
<template>
  <div class="spatial-analysis-statistic">
    <div class="title">{{ title }}</div>
    <div class="echart-container" id="defect-column" ref="domRef"></div>
  </div>
</template>
    
  <script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  ref,
  watch,
  getCurrentInstance,
  shallowRef,
} from 'vue';
import moment from 'moment';
import { StatisticDataResource,queryInterfacesTotalNum,querySpaceData } from '/@/api/interface/interface';
const props = {
  type: {
    type: Object,
  },
};

export default defineComponent({
  name: 'ResTypeStatistic',
  components: {},
  props,
  setup(props) {
    const data = reactive({
      title: '数据资源分类统计',
    });
    const domRef = ref(null);
    const { proxy } = getCurrentInstance();
    const echarts = proxy.$echarts;
    const mychart = shallowRef(null);

    /**
     * 查询统计数据
     */
    const queryData = async () => {
      let seriesData = [
        { value: 0, name: '地图资源' },
        { value: 0, name: '文件资源' },
        { value: 0, name: '数据库资源' },
        { value: 0, name: '工具资源' },
        { value: 0, name: '接口资源' },
      ];
      // const res = await StatisticDataResource();
      // if(res){
      //   //更新地图资源
      //   seriesData[0].value = parseInt(res?.MR_COUNT ? res?.MR_COUNT : 0)
      //   seriesData[1].value = parseInt(res?.DR_COUNT ? res?.DR_COUNT : 0)
      //   seriesData[2].value = parseInt(res?.BR_COUNT ? res?.BR_COUNT : 6)
      //   seriesData[3].value = parseInt(res?.TR_COUNT ? res?.TR_COUNT : 0)
      //   seriesData[4].value = parseInt(res?.SR_COUNT ? res?.SR_COUNT : 0)
      // }

      const res = await queryInterfacesTotalNum()
      if(res){
        seriesData[4].value = parseInt(res ? res : 0)
      }
      const res2 = await querySpaceData()
      if(res2 && res2.length > 0){
        res2.map(item=>{
          if(item.type === 'mr') seriesData[0].value = parseInt(item?.NUM ? item?.NUM : 0)
          if(item.type === 'dr') seriesData[1].value = parseInt(item?.NUM ? item?.NUM : 0)
          if(item.type === 'sr') seriesData[2].value = parseInt(item?.NUM ? item?.NUM : 0)
          if(item.type === 'dt') seriesData[3].value = parseInt(item?.NUM ? item?.NUM : 0)
        })
      }

      const option = getOption(seriesData);
      //更新数据
      setEcharts(option);
    };

    const setEcharts = (option) => {
      if (mychart.value) mychart.value.clear();
      mychart.value = echarts.init(domRef.value);
      //const option = getOption();
      mychart.value.setOption(option);
      window.onresize = () => {
        mychart.value.resize();
      };
    };

    const getOption = (seriesData) => {
      // const seriesData = [
      //   { value: 1048, name: '地图资源' },
      //   { value: 735, name: '文件资源' },
      //   { value: 580, name: '数据库资源' },
      //   { value: 484, name: '工具资源' },
      //   { value: 300, name: '接口资源' },
      // ];
      let sumValue = 0;
      seriesData.map((item) => {
        sumValue += item.value;
      });
      return {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          right: '10%',
          top: 'center',
          orient: 'vertical', //图例竖直排列
          itemGap: 20, //图例间距，vertical时行间距，horizontal：水平间距
          itemWidth: 14,
          itemHeight: 14,
          formatter: (param) => {
            let label = '';
            const obj = seriesData.find((item) => item.name === param);
            if (obj) {
              if (param === '数据库资源') label = `${obj.name}   ${obj.value}`;
              else label = `${obj.name}      ${obj.value}`;
            } else label = param;
            return label;
          },
          textStyle: {
            color: '#000',
            fontSize: 14,
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['60%', '75%'],
            left: '-40%',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 6,
            },
            // label: {
            //   show: true,
            //   position: 'center',
            // },
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: () => {
                  return `{a|${sumValue}}\n\n{b|资源总数}`;
                },
                rich: {
                  a: {
                    color: '#333333',
                    fontSize: 24,
                    fontWeight: 900,
                  },
                  b: {
                    fontSize: 16,
                    fontWeight: 700,
                    color: '#999999',
                  },
                },
              },
            },

            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 16,
            //     fontWeight: 'bold',
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: seriesData,
          },
        ],
      };
    };

    onMounted(() => {
      queryData();
    });

    return {
      domRef,
      mychart,
      ...toRefs(data),
      queryData,
      setEcharts,
      getOption,
    };
  },
});
</script>
    <style lang="less" scoped>
.spatial-analysis-statistic {
  height: 100%;
  width: 100%;
  padding: 1rem;
  .title {
    height: 1.2rem;
    font-family: Source Han Sans CN;
    font-size: 1.012rem;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    color: #3d3d3d;
    margin-bottom: 1.2rem;
  }
  .echart-container {
    height: calc(100% - 2.4rem);
    width: 100%;
  }
}
</style>