<template>
  <div class="left_bottom">
    <div class="left_bottom-title flex">
      <div class="flex items-center">
        <img src="@/assets/img/home/title_arrow.png" alt="">
        占比分析
      </div>
      <div class="left_bottom-title-tabs">
        <span :class="{active: activeIndex === 0}" class="mr-5 left_bottom-title-tabs-item" @click="change(0)">来源方式</span>
        <span :class="{active: activeIndex === 1}" class="left_bottom-title-tabs-item" @click="change(1)">受理类型</span>
      </div>
    </div>
    <div class="left_bottom-content">
      <template v-if="dataList.length">
        <v-chart class="chart" :option="option" :loading="loading" :loading-options="loadingOptions"/>
      </template>
      <template v-else>
        <EmptyCom></EmptyCom>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, watch} from "vue";
import {proportionAnalysis} from "api/home";
import dayjs from "dayjs";
import EmptyCom from "@/components/empty-com";
import {loadingOptions} from "@/utils/constants";


const props = defineProps({
  dateArray: {
    type: Array,
    default: () => []
  }
})
const date = ref([]);
watch(() => props.dateArray, (val: any) => {
  date.value = val;
}, {immediate: true})

watch(() => props.dateArray, (val: any) => {
  getData();
})

const activeIndex = ref(0);
const option = ref<any>({});
const change = (index: number) => {
  activeIndex.value = index;
  getData();
};
const dataList = ref([])
const loading = ref(false);
const getData = async () => {
  loading.value = true;
  try {
    const {result} = await proportionAnalysis({
      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
      IsSource: activeIndex.value === 0
    });
    const legendDate = result.map((item: any) => item.name);
    dataList.value = result.map((item: any) => {
      return {
        name: item.name,
        value: item.hasCount
      }
    });
    setOption(legendDate, dataList.value);
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};
const setOption = (legendDate, data: any) => {
  option.value =
      {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          height: '180',
          icon: 'circle',
          top: 'center',
          right: '0',
          orient: "vertical",
          itemGap: 20,
          data: legendDate,
          textStyle: {
            color: '#fff',
            fontSize: 14,

          },
          formatter: name => {
            let total = 0;
            let value;
            dataList.value.forEach((item) => {
              total += Number(item.value);
              if (item.name == name) {
                value = item.value;
              }
            })
            let p = Math.round(((value / total) * 100)); //求出百分比
            return `${name}     ${p}% (${value}件)`;  //返回出图例所显示的内容是名称+百分比
          }
        },
        graphic: [
          {
            type: 'text',
            z: 100,
            left: '21%',
            top: '31%',
            style: {
              fill: '#fff',
              text: '100%',
              font: '32px Microsoft YaHei',
            }
          }, {
            type: 'text',
            z: 100,
            left: '24%',
            top: '45%',
            style: {
              fill: '#fff',
              text: '来源占比',
              font: '16px Microsoft YaHei'
            }
          }],
        series: [
          {
            name: '小环',
            type: 'gauge',
            splitNumber: 8,
            radius: '65%',
            center: ['30%', '40%'],
            startAngle: 0,
            endAngle: 360,
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                width: 3,
              },
              length: 15,
              splitNumber: 3
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            // data: 100
          },
          {
            name: '',
            type: 'pie',
            radius: ['55%', '80%'],
            center: ['30%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#050D0E',
              borderWidth: 10,
            },
            label: {
              show: false,
              formatter: '{b}：{d}%', // 用来换行
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
};
onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.left_bottom {
  padding: 0 30px;

  &-title {
    font-size: 20px;
    color: #fff;
    justify-content: space-between;
    align-items: center;

    &-tabs {
      font-size: 14px;
      color: #7DBDEC;

      &-item {
        padding: 5px 10px;
        cursor: pointer;
      }
    }

    .active {
      color: #B4D7EC;
      border: 1px solid #B4D7EC;
      border-radius: 5px;
    }
  }

  &-content {
    height: calc(100% - 40px);
  }
}
</style>