<template>
  <div ref="rader" class="w-[100%] h-[100%]"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const rader = ref(null);
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});
const init = async () => {
  await proxy?.$nextTick();
  const myChart = echarts.init(rader.value);
  myChart.setOption({
    color: ['rgb(64, 158, 255)'],
    tooltip: {
      className: 'grid-tooltip'
    },
    radar: {
      // shape: 'circle',
      axisName: {
        color: '#333'
      },
      indicator: [
        { name: '业务领域', max: 5, min: 0 },
        { name: '信用等级', max: 5, min: 0 },
        { name: '合作历史', max: 5, min: 0 },
        { name: '评价反馈', max: 5, min: 0 },
        { name: '荣誉奖项', max: 5, min: 0 },
        { name: '工作经验', max: 5, min: 0 },
        { name: '专利成果', max: 5, min: 0 },
        { name: '论文成果', max: 5, min: 0 }
      ],
      radius: 60,
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#ddd'
        }
      }
    },
    series: [
      {
        name: '专家综合考评',
        type: 'radar',
        data: [
          {
            value: props.data
          }
        ],
        areaStyle: {
          color: 'rgba(64, 158, 255, 0.3)'
        }
      }
    ]
  });
  window.onresize = () => {
    myChart.resize();
  };
};
watch(
  () => props.data,
  () => {
    init();
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss">
.grid-tooltip {
  & > div {
    & > div:nth-child(2) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-left: 1px solid #ddd;
      border-top: 1px solid #ddd;
      & > div:not(:empty) {
        margin: 0 !important;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 8px;
      }
    }
  }
}
</style>
