<template>
  <Card title="各类型报告数量">
    <template v-if="oChartData.allStage.length > 0 || oChartData.firstStage.length > 0">
      <!-- 第一个图表 -->
      <div class="flex">
        <div class="pie-wrap">
          <Pie
            v-if="oChartData.allStage.length > 0"
            height="180px"
            width="180px"
            :chartData="oChartData.allStage"
            :option="option1"
            class="pie"
            ref="pieRef1"
            @mousemove="mousemove"
          />
        </div>
        <div class="define-legned-wrap">
          <span
            v-for="(item, index) in oChartData.allStage"
            :key="index"
            class="define-legned-item"
            :class="{ active: activeIndex1 === index }"
            @click="handleClick(index, 1)"
          >
            <span class="num" :style="{ color: colorData[index] }">{{ item.value }}</span>
            <span class="name ellipsis-1">{{ item.name }}</span>
          </span>
        </div>
      </div>
      <a-divider />
      <!-- 第二个图表 -->
      <div class="flex">
        <div class="pie-wrap">
          <Pie
            v-if="oChartData.firstStage.length > 0"
            height="180px"
            width="180px"
            :chartData="oChartData.firstStage"
            :option="option2"
            class="pie"
            ref="pieRef2"
            @mousemove="mousemove"
          />
        </div>
        <div class="define-legned-wrap">
          <span
            v-for="(item, index) in oChartData.firstStage"
            :key="index"
            class="define-legned-item"
            :class="{ active: activeIndex2 === index }"
            @click="handleClick(index, 2)"
          >
            <span class="num" :style="{ color: colorData[index] }">{{ item.value }}</span>
            <span class="name ellipsis-2">{{ item.name }}</span>
          </span>
        </div>
      </div>
    </template>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { getIndexCountTypeStage } from '@/api/dashboard/api';
  import Pie from '/@/components/chart/Pie.vue';
  const colorData = ref(['#FCBE00', '#4ECB73', '#3697FF', '#FF5051', '#3661FF']);
  const oChartData = ref({
    allStage: [],
    firstStage: [],
  });
  const activeIndex1 = ref(0);
  const activeIndex2 = ref(0);
  const pieRef1 = ref<ComponentRef>(null);
  const pieRef2 = ref<ComponentRef>(null);
  const total1 = ref(0);
  const total2 = ref(0);
  const option1 = ref({
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },
    title: {
      text: '',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
        lineHeight: 24,
      },
    },
    series: [
      {
        name: 'allStage',
        type: 'pie',
        radius: ['70%', '90%'],
        center: ['50%', '50%'],
        color: colorData,
        label: {
          show: false,
        },
      },
    ],
  });
  const option2 = ref({
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} ({d}%)',
    },
    title: {
      text: '',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
        lineHeight: 24,
      },
    },
    series: [
      {
        name: 'firstStage',
        type: 'pie',
        radius: ['70%', '90%'],
        center: ['50%', '50%'],
        color: colorData,
        label: {
          show: false,
        },
      },
    ],
  });
  /**
   * 初始化数据
   */
  function init() {
    getIndexCountTypeStage().then((res) => {
      if (res) {
        console.log(res);
        oChartData.value = res;
        total1.value = res.allStage.reduce((sum, item) => sum + Number(item.value), 0);
        total2.value = res.firstStage.reduce((sum, item) => sum + Number(item.value), 0);
        setTimeout(() => {
          pieRef1.value.highlight(activeIndex1.value); // 高亮
          pieRef2.value.highlight(activeIndex2.value); // 高亮
          getTitle();
        }, 100);
      }
    });
  }
  /**
   * 以长度进行分割
   */
  function splitString(str, len) {
    let result = [];
    for (let i = 0; i < str.length; i += len) {
      result.push(str.substr(i, len));
    }
    return result.join('\n');
  }
  function getTitle() {
    option1.value.title.text =
      oChartData.value.allStage[activeIndex1.value].value + '/' + total1.value + '\n' + oChartData.value.allStage[activeIndex1.value].name;

    option2.value.title.text =
      oChartData.value.firstStage[activeIndex2.value].value +
      '/' +
      total1.value +
      '\n' +
      splitString(oChartData.value.firstStage[activeIndex2.value].name, 7);
  }

  function handleClick(index, type) {
    if (type === 1) {
      activeIndex1.value = index;
      pieRef1.value.highlight(index);
    }
    if (type === 2) {
      activeIndex2.value = index;
      pieRef2.value.highlight(index);
    }
    getTitle();
  }
  function mousemove(params) {
    if (params.seriesName === 'allStage') {
      activeIndex1.value = params.dataIndex;
      pieRef1.value.highlight(activeIndex1.value); // 高亮
      getTitle();
    }
    if (params.seriesName === 'firstStage') {
      activeIndex2.value = params.dataIndex;
      pieRef2.value.highlight(activeIndex2.value); // 高亮
      getTitle();
    }
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped>
  :deep(.ant-card-body) {
    padding: 0 14px;
    .ant-divider-horizontal {
      margin: 0;
    }
    .pie-wrap {
      height: 173px;
      display: flex;
      align-items: center;
    }

    .define-legned-wrap {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      height: 173px;

      .define-legned-item {
        cursor: pointer;
        width: 33.33%;
        // flex: 0 0 33.33%;
        padding: 15px 10px;
        display: flex;
        flex-direction: column;

        &.active {
          background: #eff1f2;
          border-radius: 10px;
        }

        .num {
          line-height: 28px;
          font-size: 26px;
          text-align: center;
        }
        .name {
          line-height: 24px;
          font-size: 16px;
          color: #333;
          text-align: center;
        }
      }
    }
  }
  .ellipsis-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
