<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/chart/CustomChart/LineBarChart.vue
 * @Date: 2022-08-29 16:06:58
 * @Description: 
 * @LastEditTime: 2023-08-31 20:11:41
 * @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,
  getBarChartThemeColor,
  getCommonTheme,
} from "../../../components/chart/options/index";
import { isObject } from "../../../utils/is";
import { useLineXAxisAuto } from "../logic/useLineXAxisAuto";
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 } title 图表左上显示内容
 * @prop { Array } xAxisData x轴数据
 * @date 2022/08/29
 */
interface BarChartProps {
  title?: string;
  xAxisData: any[];
  theme?: string;
  /**
   * 图表数据
   */
  chartData: any[];
  /**
   * 格式化图例显示函数 用于需要显示图例名称之外内容的时候
   */
  legendFormatter?: string | ((name: string) => string);
  italics?: boolean;

  /**
   * 手动设置色盘
   */
  colors?: string[];
  /**
   * 手动设置一些其它的设置，需要结合manual才能起作用
   */
  otherOptions?: EChartsOption;
  autoXAxis?: boolean;
  autoStartValue?: number;
  autoEndValue?: number;
  gridTop?: number | string; // 布局距离顶部
  gridBottom?: number | string; // 布局距离底部
  gridLeft?: number | string; // 布局距离左侧
  gridRight?: number | string; // 布局距离右侧
  titleLeft?: number | string; // Y轴title距离左侧距离
  legendRight?: number | string; // 图例距离右边的位置

  splitLineColor?: number | string; // 图例距离右边的位置
  labelColor?: number | string; // label文字颜色
  titleColor?: number | string;
  yAxisColor?: number | string;
  xAxisColor?: number | string;
}

const {
  xAxisData = [],
  title = "",
  chartData = [],
  legendFormatter = (name) => name,
  theme = "light",
  autoXAxis = false,
  autoStartValue = 0,
  autoEndValue = 6,
  gridTop = 55,
  gridBottom = 24,
  gridLeft = 0,
  gridRight = 24,
  titleLeft = 24,
  legendRight = 24,

  labelColor = '#fff',
  splitLineColor = '',
  titleColor = '',
  yAxisColor = '',
  xAxisColor = ''
} = defineProps<BarChartProps>();

const currentTheme = computed(() => {
  return getBarChartThemeColor(unref(theme));
}) as any;

const commonChartTheme = computed(() => {
  return getCommonTheme(unref(theme));
}) as any;

let options: EChartsOption = {
  title: {
    show: unref(title) ? true : false,
    text: unref(title),
    top: 16,
    left: unref(titleLeft),
    textStyle: {
      fontSize: 12,
      color: titleColor ? titleColor : unref(currentTheme).titleColor,
      fontWeight: 400,
    },
  },

  tooltip: {
    show: false,
  },

  grid: {
    top: unref(gridTop),
    left: unref(gridLeft),
    right: unref(gridRight),
    bottom: unref(gridBottom),
    containLabel: true,
  },

  legend: {
    top: 16, // 距离容器上边界的距离
    right: legendRight, // 距离容器右边界的距离
    itemWidth: 3, // 图例宽度
    itemHeight: 10, // 图例高度
    itemGap: 16, // 图例间距
    icon: "rect",
    // 图例文字的样式
    textStyle: {
      fontSize: 10,
      fontWeight: 400,
      color:
        yaTheme === "jasper" ? "#fff" : unref(currentTheme).legendTextColor,
    },
    formatter: unref(legendFormatter),
  },

  dataZoom: {
    type: "slider",
    show: false,
    xAxisIndex: 0,
    startValue: 0,
    endValue: 6,
  },
  xAxis: [
    {
      data: unref(xAxisData),
      axisLabel: {
        fontSize: 10,
        fontWeight: 400,
        color: yAxisColor ? yAxisColor : "#B3B3B3",
        borderColor: "#263956",
        backgroundColor: "#12233F",
        borderRadius: 2,
        lineHeight: 22,
        height: 22,
      },
      axisTick: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: splitLineColor ? splitLineColor : '#f4f4f4',
          width: 1,
        },
      },
      splitLine: {
        show: false,
      },
      // boundaryGap: false,
    },
  ],

  yAxis: [
    {
      type: "value",
      axisLabel: {
        fontSize: 10,
        fontWeight: 400,
        color: yAxisColor ? yAxisColor : unref(currentTheme).axisLabelColor,
      },
      min: xAxisData.length ? 0 : 5,
      minInterval: 1,
      splitLine: {
        // 坐标轴分割线
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: splitLineColor ? splitLineColor : '#f4f4f4',
          width: 1,
        },
      },
    },
  ],

  series: [],
};

const getSeriesData = function (list, xlist) {
  if (list.length === 0) return [];
  const lineData = list[0];
  let series = [] as any;
  const barSeries = {
    type: "bar",
    showBackground: true,
    barWidth: "auto",
    backgroundStyle: {
      color: "rgba(18, 35, 63, 1)",
      borderRadius: [2, 2, 0, 0],
      borderColor: "rgba(38, 57, 87, 1)",
    },
    data: Array.from({ length: 24 }, () => 0),
  };
  const lineSeries = {
    name: lineData.name,
    type: "line",
    showSymbol: true,
    symbol: "emptyCircle",
    symbolSize: 8,
    itemStyle: {
      color: "#4DBBE8",
    },
    label: {
      show: true,
      color: "#96979B",
      fontSize: 10,
    },
    lineStyle: { width: 1.5, color: "rgba(0, 191, 238, 1)" },
    data: lineData.data,
  };
  series = [barSeries, lineSeries];
  return series;
};

let stopAutoSwipeFun = null as any;

const initAutoXAxis = () => {
  if (unref(xAxisData).length === 0) return;
  if (unref(autoXAxis)) {
    if (stopAutoSwipeFun) {
      stopAutoSwipeFun();
    }
    const chartInstance = getInstance();
    console.log(options, "options");
    const { stopAutoSwipe } = useLineXAxisAuto(
      chartInstance,
      options,
      unref(xAxisData)
    );
    stopAutoSwipeFun = stopAutoSwipe;
  }
};

watchEffect(() => {
  // @ts-ignore
  options.xAxis![0].data = unref(xAxisData);
  options.series = getSeriesData(unref(chartData), unref(xAxisData));
  const yAXisValue = xAxisData.find((item) => Number(item) > 0);
  options.yAxis![0].min = yAXisValue ? 0 : 5;
  // @ts-ignore
  options.title!.text = unref(title);
  // @ts-ignore
  options.legend!.formatter = unref(legendFormatter);
  initAutoXAxis();
  setOptions(options);
});
onUnmounted(() => {
  stopAutoSwipeFun && stopAutoSwipeFun();
});
</script>

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