<!-- 购买来源 -->
<template>
  <div
    :id="id"
    :style="{
      width: styleUtil.px2vw(width),
      height: styleUtil.px2vh(height)
    }"
  />
</template>

<script setup>
  import { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'
  import styleUtil from '@/utils/styleUtil'

  const { id, setOption } = useEchart()

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    }
  })

  let params = null

  watch(
    () => props.list,
    (val) => {
      if (val.length > 0) {
        setTimeout(() => {
          init()
        }, 1000)
      }
    },
    {
      immediate: true
    }
  )

  const getSeriesData = () => {
    return props.list.map((item) => {
      return {
        type: 'bar',
        name: item.name,
        clockwise: false,
        silent: true,
        roundCap: true,
        barWidth: '13%',
        showBackground: true,
        coordinateSystem: 'polar',
        data: [item.value]
      }
    })
  }

  const init = () => {
    if (!params) {
      params = {
        legend: {
          show: true,
          x: 'center',
          y: '74%',
          itemHeight: fitChartSize(12),
          itemWidth: fitChartSize(12),
          itemGap: fitChartSize(6),
          formatter: function (name) {
            let obj = props.list.find((item) => item.name == name)
            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
          },
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: fitChartSize(12)
              },
              value: {
                color: '#00D5F6',
                fontWeight: 600,
                fontSize: fitChartSize(12)
              }
            }
          }
        },
        color: ['#F15A25', '#01FEFE', '#12B5FD'],
        polar: {
          center: ['50%', '40%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: getSeriesData()
      }
    } else {
      params.series = getSeriesData()
    }
    setOption(params)
  }
</script>

<style scoped lang="scss">
  .legend {
    display: flex;
    align-items: center;
    justify-content: center;

    @mixin icon($column) {
      padding: 0 vw(10);
      height: vh(70);
      display: flex;
      flex-direction: $column;
      align-items: center;
      justify-content: center;
    }

    &__wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: vw(8);
    }
    &-item {
      color: #fff;
    }
    &-item:nth-child(1) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(2) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(3) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(4) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(5) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(6) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item-label {
      font-weight: 400;
      font-size: vw(12);
      line-height: vh(14);
    }
    &-item-value {
      font-weight: bold;
      font-size: vw(16);
      line-height: vh(18);
    }
  }
</style>
