<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/chart/RingProcessChart/RingProcessChart.vue
 * @Date: 2022-09-01 17:56:00
 * @Description: 
 * @LastEditTime: 2022-11-11 13:41:00
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
import { Ref, defineProps, watchEffect } from 'vue';
import type { EChartsOption } from 'echarts'
import { useECharts } from '@/hooks/web/useECharts';
import { colorList, mergeOptions } from '@/components/chart/options/index'
import { isObject } from '@/utils/is';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
const yaTheme = localStorage.getItem('YA_THEME')
/**
 * @author changjun
 * @description 环形进度条图表组件
 * @prop { String } color 进度条的颜色设置
 * @prop { Number } chartData 图表数据数字类型 0-100 占比

 * @date 2022/09/01
 */

/**
 * @desc: 环形进度条图表组件
 * @author: changjun
 */

interface RingProcessChartProps {
  /**
   * 是否需要手动设置一些其它的设置，需要结合otherOptions才能起作用
   */
  manual?: boolean,
  /**
   * 手动设置一些其它的设置，需要结合manual才能起作用
   */
  otherOptions?: EChartsOption,
  chartClass?: string,
  color?: string,
  chartData: number,
}


const {
  manual = false,
  otherOptions = {},
  chartClass = '',
  color = '#0095FF',
  chartData = 0
} = defineProps<RingProcessChartProps>()

let options: EChartsOption = {
  title: {
    text: '',
    textStyle: {
      color: unref(color),
      fontSize: 12 
    },
    left: "center",
    top: "center"
  },


  angleAxis: {
    max: 100, 
    clockwise: true, 
    // 隐藏刻度线
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    }
  },

  radiusAxis: {
    type: "category",
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    }
  },

  polar: {
    center: ["50%", "50%"], 
    radius: "100%" 
  },

  series: [
    
    {
      type: "bar",
      data: [
        {
          value: unref(chartData),
          itemStyle: {
            color: unref(color)
          }
        }
      ],
      coordinateSystem: "polar",
      roundCap: true,
      barWidth: 8, 
      barGap: "-100%",
      z: 2
    },
    {
      type: "bar",
      data: [
        {
          value: 100,
          itemStyle: {
            color: yaTheme === 'light'?'rgba(237, 238, 246, 1)':'#4A6184',
          }
        }
      ],
      coordinateSystem: "polar",
      animation: false,
      roundCap: true,
      barWidth: 6,
      barGap: "-100%", 
      z: 1,
      selectedMode: false,
      emphasis: {
        disabled: true
      }
    },
    {
      type: 'pie',
      radius: '38%',
      center: ['50%', '50%'],
      emptyCircleStyle: {
        color: yaTheme === 'light'?'rgba(237, 238, 246, 1)':'#4A6184'
      },
      emphasis: {
        disabled: true
      }
    },
  ]
}

watchEffect(() => {
  initChart()
});

async function initChart() {
  // @ts-ignore
  options.title.text = unref(chartData) + '%'
  // @ts-ignore
  options.title.color = unref(color)
   // @ts-ignore
  options.series[0].data[0].value = unref(chartData)
   // @ts-ignore
  options.series![0].data[0].itemStyle.color = unref(color)
  // @ts-ignore
  // 如果是手动设置模式的话
  if (unref(manual) && isObject(unref(otherOptions))) {
    options = mergeOptions(options, unref(otherOptions))
  }
  setOptions(options);
}

onMounted(() => {
  initChart()
})
</script>

<template>

  <div class="chart" :class="chartClass" ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
</template>
