<template>
  <a-card
    class="general-card"
    :title="$t('multiDAnalysis.card.title.contentTypeDistribution')"
    :header-style="{ paddingBottom: 0 }"
  >
    <Chart style="height: 222px" :option="chartOption" />
  </a-card>
</template>

<script lang="ts" setup>
import useChartOption from '@/hooks/chart-option';

const { chartOption } = useChartOption((isDark) => {
  return {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 20,
    },
    legend: {
      show: true,
      top: 'center',
      right: '0',
      orient: 'vertical',
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
      textStyle: {
        color: isDark ? '#ffffff' : '#4E5969',
      },
    },
    radar: {
      center: ['40%', '50%'],
      radius: 80,
      indicator: [
        { name: '\u56fd\u9645', max: 6500 },
        { name: '\u8d22\u7ecf', max: 22000 },
        { name: '\u79d1\u6280', max: 30000 },
        { name: '\u5176\u4ed6', max: 38000 },
        { name: '\u4f53\u80b2', max: 52000 },
        { name: '\u5a31\u4e50', max: 25000 },
      ],
      axisName: {
        color: isDark ? '#ffffff' : '#1D2129',
      },
      axisLine: {
        lineStyle: {
          color: isDark ? '#484849' : '#E5E6EB',
        },
      },
      splitLine: {
        lineStyle: {
          color: isDark ? '#484849' : '#E5E6EB',
        },
      },
      splitArea: {
        areaStyle: {
          color: [],
        },
      },
    },
    series: [
      {
        type: 'radar',
        areaStyle: {
          opacity: 0.2,
        },
        data: [
          {
            value: [4850, 19000, 19000, 29500, 35200, 20000],
            name: '\u7eaf\u6587\u672c',
            symbol: 'none',
            itemStyle: {
              color: isDark ? '#6CAAF5' : '#249EFF',
            },
          },
          {
            value: [2250, 17000, 21000, 23500, 42950, 22000],
            name: '\u56fe\u6587\u7c7b',
            symbol: 'none',
            itemStyle: {
              color: isDark ? '#A079DC' : '#313CA9',
            },
          },
          {
            value: [5850, 11000, 26000, 27500, 46950, 18000],
            name: '\u89c6\u9891\u7c7b',
            symbol: 'none',
            itemStyle: {
              color: isDark ? '#3D72F6' : '#21CCFF',
            },
          },
        ],
      },
    ],
  };
});
</script>

<style scoped lang="less"></style>
