<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/chart/FunnelChart/FunnelChart.vue
 * @Date: 2022-09-02 17:04:46
 * @Description: 
 * @LastEditTime: 2023-08-31 13:42:32
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { Ref, defineProps, watchEffect, onMounted, unref, ref } from "vue";
import type { EChartsOption } from "echarts";
import { useECharts } from "../../../hooks/web/useECharts";
import { mapMapping } from "../../../assets/map/provinceData";
import { bigNumberTransform } from "../../../utils/utils";
const mapData = mapMapping();
import {
  funnelColorList,
  mergeOptions,
  themeColor,
  getCommonTheme,
} from "../../../components/chart/options/index";
import { isObject } from "../../../utils/is";
const chartRef = ref<HTMLDivElement | null>(null);
const commonChartTheme = computed(() => {
  return getCommonTheme("light");
}) as any;
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as Ref<HTMLDivElement>
);
const yaTheme = localStorage.getItem("YA_THEME");
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;
  defaultType?: string;
  labelLine?: number | string;
  fontSize?: number | string;
  seriesWidth?: string;
  legendFormatter?: string | ((name: string) => string);
  tooltipValueFormatter?: any;
  tooltipFormatter?:
  | string
  | ((params: any, ticket: any, callback: any) => string);
}
const {
  chartData = [],
  manual = false,
  otherOptions = {},
  chartClass = "",
  colors = [],
  funnelTop = 24,
  funnelBottom = 24,
  funnelLeft = 0,
  funnelRight = "",
  defaultType = "",
  legendFormatter = (name) => name,
  tooltipFormatter = "",
  tooltipValueFormatter = (val) => bigNumberTransform(val),
  labelLine = 70,
  fontSize = 12,
  seriesWidth = "60%",
} = defineProps<FunnelChartProps>();

let options: EChartsOption = {
  tooltip: {
    show: true,
    confine: true,
    textStyle: {
      color: unref(commonChartTheme).tooltip.textStyle.color,
    },
    backgroundColor: unref(commonChartTheme).tooltip.backgroundColor,
    borderColor: "transparent",
    extraCssText: "border-radius: 4px;",
    valueFormatter: unref(tooltipValueFormatter),
    formatter: unref(tooltipFormatter) as any,
  },

  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: yaTheme === "light" ? "rgba(0, 0, 0, 0.4)" : "#96A2B5",
        fontSize: unref(fontSize),
        formatter: unref(legendFormatter),
        rich: {
          name: {
            fontSize: 14,
            color: "rgba(140, 236, 255, 1)",
          },
          value: {
            color: "rgba(140, 236, 255, 1)",
            fontSize: 12,
            fontFamily: "YouSheBiaoTiHei",
          },
        },
      },
      labelLine: {
        show: true,
        length: unref(labelLine),
      },
      itemStyle: {
        borderWidth: 0,
      },
      data: unref(chartData),
      width: unref(seriesWidth),
      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);
  options.series![0].label.formatter = (params) => {
    // console.log(name,'name==')
  };
  options.color = themeColor[mapData?.en].funnelColorList;

  // 如果是手动设置模式的话
  if (unref(manual) && isObject(unref(otherOptions))) {
    options = mergeOptions(options, unref(otherOptions));
  }
  options.series![0].label.formatter = unref(legendFormatter);
  if (unref(defaultType) == "two") {
    options.series![0].label.formatter = unref(legendFormatter);
    console.log(
      unref(legendFormatter),
      "unref(legendFormatter)unref(legendFormatter)unref(legendFormatter)"
    );
    let arr = JSON.parse(JSON.stringify(options.series![0]));
    options.series![1] = arr;
    options.series![1].label.position = "inside";
    options.series![1].label.color = "#FFF";
  }
  setOptions(options);
}

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

watchEffect(() => {
  initChart();
});
</script>

<template>
  <div class="chart" :class="chartClass" ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
</template>
<style lang="scss">
.fun-linechart-tooltip {
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  flex-direction: column;

  .fun-linechart-flex {
    display: flex;
    align-items: center;
  }

  &-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1;
  }

  &-content {
    &-item {
      display: flex;
      align-items: center;
      margin-top: 8px;

      &-icon {
        width: 6px;
        height: 6px;
        border-radius: 6px;
        margin-right: 5px;
        position: relative;
        top: 2px;
      }

      &-name {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
        margin-right: 8px;
      }

      &-value {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.4);
        text-align: right;
      }
    }
  }
}
</style>
