<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/chart/FunnelChart/FunnelChart.vue
 * @Date: 2022-09-02 17:04:46
 * @Description: 
 * @LastEditTime: 2022-09-03 08:54:22
 * @LastEditors: changjun
-->
<script setup lang="ts">
import { Ref, defineProps, watchEffect } from 'vue';
import type { EChartsOption } from 'echarts'
import { useECharts } from '../../../hooks/web/useECharts';
import { funnelColorList, 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>);

interface FunnelChartProps {
  /**
   * 名称，关联图表的 series
   */
  name: string
  /**
   * 图表数据
   */
  chartData: any[],
  /**
   * 是否需要手动设置一些其它的设置，需要结合otherOptions才能起作用
   */
  manual?: boolean,

  chartClass?: string,
  colors?: string[],
  /**
   * 手动设置一些其它的设置，需要结合manual才能起作用
   */
  otherOptions?: EChartsOption,
  funnelTop?: number | string,
  funnelBottom?: number | string,
  funnelLeft?: number | string,
  funnelRight?: number | string,
}

const {
  chartData = [],
  manual = false,
  otherOptions = {},
  chartClass = '',
  colors = funnelColorList,
  funnelTop = 24,
  funnelBottom = 24,
  funnelLeft = '4%',
  funnelRight = '',
} = defineProps<FunnelChartProps>()


let options: EChartsOption = {

  tooltip: {
    show: true,
    borderColor: 'transparent'
  },

  color: unref(colors),

  legend: {
    show: false,
  },

  series: [
    {
      name: '',
      type: 'funnel',
      gap:0,
      left: unref(funnelLeft),
      top: unref(funnelTop),
      bottom: unref(funnelBottom),
      label: {
        show: true,
        position: 'outer',
        color: 'rgba(0,0,0,0.65)',
        fontSize: 12
      },
      labelLine: {
        show: true,
        length: 70,
      },
      data: unref(chartData),
      width: '60%',
      minSize: '10%',
      maxSize: '80%',
    }
  ]
}

async function initChart() {
  options.series![0].left = unref(funnelLeft);
  options.series![0].top = unref(funnelTop);
  options.series![0].bottom = unref(funnelBottom);
  options.series![0].name = unref(name)
  options.series![0].data = unref(chartData)
  options.color = unref(colors)
  // 如果是手动设置模式的话
	if(unref(manual) && isObject(unref(otherOptions))){
		options = mergeOptions(options, unref(otherOptions))
	}
  setOptions(options);
}

onMounted(() => {
  initChart()
})

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


</script>

<template>

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

</template>
