<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tabChange="onTabChange">
    <Bar :chartData="oChartData[activeKey]" height="300px" :option="option" :key="activeKey" v-if="oChartData[activeKey].length > 0" />
  </Card>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { getIndexCountTop } from '@/api/dashboard/api';
  import Bar from '/@/components/chart/Bar.vue';
  const activeKey = ref('landTop10');
  const oChartData = ref({
    landTop10: [],
    suspectedTop10: [],
    normalTop10: [],
    polluteTop10: []
  });
  const option = ref({
    grid: {
      left: '1%',
      right: '1%',
      top: '2%',
      bottom: '35px',
      containLabel: true,
    },
    legend: {
      bottom: 0,
    },
    series: [
      {
        name: '广东省系统数据',
        type: 'bar',
        color: ['#FCBE00'],
        barWidth: 15,
      },
    ],
  });
  const tabListTitle = [
    {
      key: 'landTop10',
      tab: '地块总数Top10',
    },
    {
      key: 'suspectedTop10',
      tab: '未开展调查地块总数Top10',
    },
    {
      key: 'normalTop10',
      tab: '未超标地块总数Top10',
    },
    {
      key: 'polluteTop10',
      tab: '超标地块总数Top10',
    },
  ];
  /**
   * tab切换
   */
  function onTabChange(key) {
    activeKey.value = key;
  }
  /**
   * 初始化数据
   */
  function init() {
    getIndexCountTop().then((res) => {
      if (res) {
        oChartData.value = res;
      }
    });
  }
  onMounted(() => {
    init();
  });
</script>
