<template>
  <div class="h-full flex flex-col">
    <div class="flex justify-between h-10 items-center px-4">
      <div class="text-[#999] text-sm">年度目标</div>
      <div class="w-30">
        <a-select
          ref="select"
          v-model:value="day"
          class="w-full"
          @change="onChange"
        >
          <a-select-option :value="item" v-for="item in years" :key="item">{{
            item
          }}</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="flex-1" ref="yRef"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useECharts } from '@/components/echarts/useECharts.js'
import echarts from '@/components/echarts/echarts.js'
import http from '@/utils/request'
const day = ref(null)
const yRef = ref(null)
const { setOptions } = useECharts(yRef)
const years = ref([])
const datas = ref({})

const createFiveYears = () => {
  const now = new Date()
  for (let i = 0; i < 5; i++) {
    years.value.push(now.getFullYear() - i)
  }
  day.value = years.value[0]
}

onMounted(() => {
  createFiveYears()
  getData()
})

const onChange = () => {
  getData()
}

const getData = async () => {
  const resData = await http.get('/admin-api/api/cockpit/yearly-goals', {
    params: {
      year: day.value,
    },
  })
  datas.value = resData
  chatInit()
}

const chatInit = () => {
  const { expected_performance, actual_performance } = datas.value
  let rate = (actual_performance / expected_performance).toFixed(2)
  console.log(rate);
  if (rate == 'NaN') {
    rate = 0
  }
  const rateValue = (rate * 100).toFixed(0)
  setOptions({
    title: {
      text: `${rateValue}%`,
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        color: '#000',
      },
    },
    color: ['#AAAFC8'],

    series: [
      {
        name: 'Line1',
        type: 'pie',
        clockWise: true,
        radius: ['80%', '70%'],
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        hoverAnimation: false,
        data: [
          {
            value: rateValue,
            name: '01',
            itemStyle: {
              normal: {
                color: '#0E7CE2',
              },
            },
          },
          {
            name: '02',
            value: 100 - rateValue,
            itemStyle: {
              normal: {
                color: '#AAAFC8',
              },
            },
          },
        ],
      },
    ],
  })
}
</script>
