<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/Echarts/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>