<template>
  <div class="pie-chart-container">
    <div class="chart-wrapper">
      <div class="chart-container">
        <v-chart class="chart" :option="chartOption" :autoresize="true" style="height: 300px;" />
        <div class="center-label">
          <div class="center-title">卸载设备总数</div>
          <div class="center-number">{{ total }}</div>
        </div>
      </div>
    </div>
    <div class="legend-wrapper">
      <table class="legend-table">
        <thead>
          <tr class="legend-title">
            <th class="item">时长分布</th>
            <th class="item">卸载设备数</th>
          </tr>
        </thead>
        <tbody class="legend-list">
          <tr v-for="(item, index) in data" :key="index" class="legend-item">
            <td class="item">
              <div class="legend-number" :style="{ backgroundColor: colorList[index % colorList.length] }">{{ index+1 }}</div>
              {{ item.name }}
            </td>
            <td class="item">{{ item.value }}({{ item.percentage }})</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

interface LegendItem {
  name: string
  value: number
  percentage: string
}

const props = withDefaults(defineProps<{
  data?: LegendItem[]
}>(), {
  data: () => []
})

const colorList = [
  'rgba(22, 122, 240, 1)',
  'rgba(47, 168, 255, 1)',
  'rgba(189, 112, 224, 1)',
  'rgba(23, 84, 166, 1)',
  'rgba(49, 198, 204, 1)',
  'rgba(252, 158, 33, 1)',
  'rgba(49, 204, 108, 1)'
]

// 计算总数
const total = computed(() => {
  return props.data.reduce((sum, item) => sum + item.value, 0)
})

const chartOption = computed(() => {
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#e6e6e6',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      }
    },
    series: [
      {
        name: '时长分布',
        type: 'pie',
        radius: [105, 145],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: 8,
          // borderColor: '#fff',
          // borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          // label: {
          //   show: true,
          //   position: 'center',
          //   formatter: `卸载设备总数\n${total}`,
          //   fontSize: 14,
          //   fontWeight: 'bold',
          //   color: '#333',
          //   lineHeight: 20
          // },
          itemStyle: {
            // shadowBlur: 10,
            // shadowOffsetX: 0,
            // shadowColor: 'rgba(255, 255, 255, 0.5)'
          }
        },
        labelLine: {
          show: false
        },
        data: props.data.map((item, index) => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: colorList[index % colorList.length]
          }
        }))
      }
    ]
  }
})

</script>

<style scoped lang="scss">
.pie-chart-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;


  .chart-wrapper {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;


    .chart-container {
      position: relative;
      width: 100%;
      max-width: 400px;
    }

    .chart {
      width: 100%;
      max-width: 400px;
    }

    .center-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
      z-index: 10;

      .center-title {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 20px;
        margin-bottom: 12px;
      }

      .center-number {
        font-size: 26px;
        color: rgba(0, 0, 0, 1);
        line-height: 38px;
      }
    }
  }

  .legend-wrapper {
    padding: 0;
    
    .legend-table {
      max-width: 300px;
      border-collapse: collapse;
      width: 100%;
    }
    
    .legend-title {
      max-width: 300px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(100, 100, 100, 1);
      margin-bottom: 18px;
      th {
        height: 38px;
      }

      th.item {
        text-wrap: nowrap;
        width: 50%;
        text-align: left;
        padding: 0;
        border: none;

        &:nth-child(1) {
          width: 150px;
        }
      }
    }

    .legend-list {
      max-width: 300px;

      .legend-item {
        font-size: 14px;
        line-height: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        td {
          height: 38px;
        }
        td.item {
          text-wrap: nowrap;
          width: 50%;
          color: rgba(18, 18, 18, 1);
          padding: 0;
          border: none;
          vertical-align: middle;

          &:nth-child(1) {
            width: 150px;
          }
        }
      }

      .legend-number {
        color: white;
        font-size: 16px;
        border-radius: 8px;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 10px;
        text-align: center;
        vertical-align: middle;
        line-height: 16px;
      }
    }
  }
}
</style>