<template>
  <div class="pie-radius-chart-content">
    <div ref="pieRadiusChart" class="echarts item" />

    <div class="item">
      <div v-for="(item, index) in list" class="item-line">
        <span :style="{ background: color[index] }" class="color"></span>
        <div class="text">
          <span>{{ item.name }}</span>
          <span>{{ item.pie }}</span>
          <span>{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
import { useEcharts } from '@/hooks/chart.js';
import { getPost } from "@/api/largeScreen/largeScreen.js"


const color = [
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
];
const pieRadiusChart = ref(null);
const chartOption = ref({
  tooltip: {
    trigger: 'item',
  },
  color,
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      text: '总数',
      textAlign: 'center',
      fill: '#fbffff',
      width: 30,
      height: 30,
      fontSize: 14,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '80%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
});
const { setOption } = useEcharts(pieRadiusChart);
const pollingInterval = ref(null);
const list = computed(() => {
  return chartOption.value.series[0].data;
});


onMounted(() => {
  pollingInterval.value = setInterval(fetchData(), 5000);
});
function fetchData() {
  getPost().then(res => {
    chartOption.value.series[0].data = res.data.map((el, idx) => {
      return {
        value: el.total,
        name: el.name,
      };
    });
    let dataNum = res.data.reduce((pre, cur) => pre + cur.total, 0);
    chartOption.value.graphic.style.text = '总数量' + '\n\n' + dataNum;
    setOption?.(chartOption.value);
  }).catch(error => {
    console.error(error);
    clearInterval(pollingInterval.value);
  });
  return fetchData
}
</script>

<style lang="less" scoped>
.echarts {
  height: 100%;
  width: 100%;
}

.pie-radius-chart-content {
  display: flex;
  height: calc(100% - 40px);

  .item {
    width: 50%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    flex-flow: column;
  }

  .item-line {
    display: flex;
    align-items: center;
    color: #fbffff;
    font-size: 12px;
    width: 100%;

    .color {
      display: inline-flex;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      margin-right: 4px;
    }

    .text {
      flex: 1;
      display: flex;
      justify-content: space-between;

      span {
        display: inline-flex;
        width: 33.33%;
      }
    }
  }
}
</style>
