<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import * as echarts from "echarts/core";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [];
    }
  },
  color: {
    type: String,
    default: ""
  }
});
const xLabel = ["2017", "2018", "2019", "2020", "2021", "2022"];
const dataValue = ref(props.data);
const lineColor = ref(props.color);
setOptions(
  {
    // backgroundColor: "#00266b",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgb(255,255,255,0.3)"
        }
      }
    },
    legend: {
      icon: "rect",
      show: false,
      top: "5%",
      right: "5%",
      itemWidth: 11, // 图例标记的图形宽度。
      itemHeight: 7, //  图例标记的图形高度。
      textStyle: {
        color: "#fff",
        fontSize: 12,
        padding: [5, 5, 5, 5]
      }
    },
    grid: {
      left: "1%",
      right: "1%",
      top: "5%",
      bottom: "0%",
      containLabel: true,
      show: false
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: false,
          lineStyle: {
            color: "rgba(1, 58, 116,1)"
          }
        },
        axisLabel: {
          show: false,
          //坐标轴刻度标签的相关设置
          // textStyle: {
          color: "#FFFFFF",
          fontSize: 12
          // }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "rgba(1, 58, 116,1)"
          }
        },

        axisTick: {
          show: false
        },
        data: xLabel
      }
    ],
    yAxis: [
      {
        nameTextStyle: {
          color: "white",
          fontSize: 12,
          padding: [0, 0, 0, -30]
        },
        // minInterval: 1,
        type: "value",
        splitLine: {
          show: false,
          lineStyle: {
            color: "#1160a0",
            type: "dashed"
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(1, 58, 116,1)"
          }
        },
        axisLabel: {
          show: false,
          // textStyle: {
          color: "#fff",
          fontSize: 12
          // }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "异常数量",
        type: "line",
        smooth: true,
        showSymbol: false,
        // lineStyle: {
        //   // normal: {
        //   width: 2,
        //   color: "#FECA50" // 线条颜色
        //   // }
        // },
        itemStyle: {
          // normal: {
          color: lineColor.value //拐点颜色
          // borderColor: '#fff600',//拐点边框颜色
          // borderWidth: 13//拐点边框大小
          // label: {
          //   show: false, //开启显示
          //   color: "#fff",
          //   position: "top", //在上方显示
          //   formatter: function (res) {
          //     if (res.value) {
          //       return res.value;
          //     } else {
          //       return 0;
          //     }
          //   }
          // }
          // }
        },
        areaStyle: {
          // itemStyle: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color:
                  lineColor.value === "#FECA50"
                    ? "rgba(254,202,80, 0.3)"
                    : "rgba(15,84,250, 0.3)"
              },
              {
                offset: 0.6,
                color:
                  lineColor.value === "#FECA50"
                    ? "rgba(254,202,80, 0.2)"
                    : "rgba(15,84,250, 0.2)"
              },
              {
                offset: 1,
                color:
                  lineColor.value === "#FECA50"
                    ? "rgba(254,202,80, 0)"
                    : "rgba(15,84,250, 0)"
              }
            ],

            false
          )
          // }
        },
        data: dataValue.value
      }
    ]
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  },
  // 点击空白处
  {
    type: "zrender",
    name: "click",
    callback: params => {
      console.log("点击空白处", params);
    }
  }
);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 6vh" />
</template>
