<template>
  <card :header="props.title" class="card-nopx card1-nopx">
    <div class="chart-box-nopx">
      <barChart
        :echartData="echartData"
        yAxisName="数量"
        ref="barChartRef"
        :legend="{ show: false }"
        :grid="{
          left: '3%',
          right: '7%',
          top: '15%',
          bottom: '3%',
          containLabel: true,
        }"
        :refresh="refresh"
        event="selectchanged"
        @selectchanged-callback="onSelectchanged"
        v-if="echartData.xAxisData.length"
      />
    </div>
  </card>
  <card header="表格数据" class="card-nopx card2-nopx" v-if="isSelect">
    <new-table class="table-nopx" :data="tableData" :columns="columns" :loading="loading" :max-height="300" />
  </card>
</template>

<script setup>
import { watch, computed } from 'vue';
import barChart from '@/components/EchartsZH/barChart.vue';
const props = defineProps({
  title: {
    type: String,
    default: '项目年径流总量控制率评价统计',
  },
  data: {
    type: Array,
    default: () => [],
  },
});
const refresh = ref(0);
const colorMap = new Map([
  [0, '#5470c6'],
  [1, '#91cc75'],
  [2, '#fac858'],
  [3, '#73c0de'],
]);
const echartData = computed(() => {
  return {
    xAxisData: props.data.map(item => item.name),
    seriesData: [
      {
        type: 'bar',
        name: '项目个数',
        colorBy: 'data',
        selectedMode: 'single',
        barWidth: 30,
        data: props.data.map((item, i) => ({
          ...item,
          itemStyle: {
            color: colorMap.get(i),
          },
        })),
      },
    ],
  };
});
const loading = ref(false);
const tableData = ref([
  {
    name1: 'xxxx',
    name2: 'xxxx',
    name3: 'xxxx',
    name4: 'xxxx',
  },
]);
const columns = [
  {
    prop: 'name1',
    label: 'name1',
  },
  {
    prop: 'name2',
    label: 'name2',
  },
  {
    prop: 'name3',
    label: 'name3',
  },
  {
    prop: 'name4',
    label: 'name4',
  },
];
const isSelect = ref(false);
watch(
  () => props.title,
  () => {
    refresh.value++;
  }
);
const onSelectchanged = data => {
  console.log(data);
  isSelect.value = data.params.fromAction === 'select';
};
</script>

<style lang="scss" scoped>
.card-nopx {
  position: absolute;
  right: 10px;
  z-index: 10;
  &.card1-nopx {
    top: 10px;
  }
  &.card2-nopx {
    top: 365px;
  }
  .chart-box-nopx {
    width: 420px;
    height: 260px;
  }
  .table-nopx {
    width: 420px;
  }
}
</style>