<template>
  <view class="w-full h-[200px]">
    <ie-echart :option="options" />
  </view>
</template>
<script lang="ts" setup>
import IeEchart from '@/pagesOther/components/ie-echart/ie-echart.vue';
import { Career } from '@/types';

const props = defineProps({
  data: {
    type: Object as PropType<Career.CareerJobDetail>,
    default: () => ({})
  },
  type: {
    type: String as PropType<'education' | 'experience'>,
    default: 'education'
  }
});
const educationColors = [
  '#4A90E2', // 科技蓝（主色）
  '#FF6B6B', // 活力红（主色）
  '#6AB04C', // 成长绿（辅助色）
  '#F4A261', // 温暖橙（辅助色）
  '#8E5DAA', // 智慧紫（辅助色）
  '#E0E0E0', // 浅灰（点缀色）
  '#FFD166'  // 亮黄（点缀色）
];
const options = computed(() => {
  const data = props.type === 'education' ? props.data.edu : props.data.exp;
  const seriesData = data.map(item => {
    return {
      name: props.type === 'education' ? (item as Career.CareerJobEdu).edu : (item as Career.CareerJobExp).exp,
      value: props.type === 'education' ? (item as Career.CareerJobEdu).ratio : (item as Career.CareerJobExp).ratio
    }
  });
  return {
    color: educationColors,
    title: {
      show: false
    },
    tooltip: {
      trigger: 'item',
      confine: true,
      formatter: '{b}: {c}%'
    },
    legend: {
      show: false,
      right: 'right',
      top: 'center',
      itemWidth: 18,
      itemHeight: 10,
      itemGap: 10,
      itemStyle: {
        borderRadius: 0
      },
      formatter: (name: string) => {
        const value = seriesData.find(item => item.name === name)?.value;
        return `${name}: ${value ? value : 0}%`;
      },
      textStyle: {
        color: '#333',
        fontSize: 10
      }
    },
    grid: {
      top: '10%',
      left: '1%',
      right: '2%',
      bottom: '2%',
      containLabel: true
    },
    series: [
      {
        name: '就业情况',
        type: 'pie',
        radius: ['46%', '70%'],
        center: ['50%', '50%'],
        data: seriesData,
        label: {
          show: true,
          formatter: '{b}: \n{c}%',
          textStyle: {
            color: '#333',
            fontSize: 12
          }
        },
        labelLine: {
          show: true
        }
      }
    ]
  };

});
</script>
<style lang="scss" scoped></style>