import { ref } from 'vue'

interface SeriesOptions {
  title: string,
  color?: string,
  data: number[],
  lineColor?: string
}


export const useMain = () => {
  const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];

  // 构建serise配置
  const createSeriesOptions = (options: SeriesOptions) => {
    const item = {
      name: options.title,
      type: "line",
      data: options.data,
      symbolSize: 1,
      symbol: "circle",
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 2,
        // color: options.lineColor,
        // shadowColor: "rgba(158,135,255, 0.3)",
        // shadowBlur: 10,
        // shadowOffsetY: 20,
      },
      // itemStyle: {
      //   normal: {
      //     color: options.lineColor,
      //     borderColor: options.lineColor,
      //   },
      // },
    }
    return item
  }

  // tooltip格式化
  const tooltipFormat = (params: Array<Record<string, any>>) => {
    // 标题部分 - 黑色
    let result = `<div style="color:#000; font-weight:bold; margin-bottom:10px;">${params[0].axisValue}</div>`;

    // 每项数据
    params.forEach((item: Record<string, any>, index: number) => {
      const marginBottom = index < params.length - 1 ? 'margin-bottom:4px;' : '';
      result += `
        <div style="
          background: #fff;
          padding:5px 10px;
          border-radius:4px;
          box-shadow: 6px 0px 20px 0px rgba(34,87,188,0.1);
          ${marginBottom};
          display: flex;
          align-items: center;
          width: 200px;
        ">
          <div>
            ${item.marker}
            <span style="font-weight:bold;">${item.seriesName}:</span>
          </div >
          <div style="margin-left: auto">
            ${item.value}
          </div>
        </div>
      `;
    });
    return result;
  }

  const options = ref<Record<string, any>>({
    backgroundColor: "rgba(255, 255, 255, 0)",
    title: {
      text: "",
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
      },
      left: "center",
      top: "5%",
    },
    legend: {
      icon: "circle",
      bottom: "0",
      left: "center",
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: "#556677",
      },
    },

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      borderColor: 'transparent',
      borderWidth: 0,
      padding: [10, 15],
      textStyle: {
        color: '#333',
        fontSize: 14,
        fontWeight: 'bold'
      },
      extraCssText: 'border-radius: 6px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px)',
    },
    grid: {
      top: "15%",
    },
    xAxis: [
      {
        type: "category",
        data: [],
        axisLine: {
          lineStyle: {
            color: "#A9AEB8",
          },
        },
        axisTick: {
          show: true,
          color: '#A9AEB8'
        },
        axisLabel: {
          // interval: 0,
          textStyle: {
            color: "#556677",
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
        },
        axisPointer: {
          label: {
            // padding: [11, 5, 7],
            padding: [0, 0, 10, 0],
            margin: 15,
            fontSize: 12,
            backgroundColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#fff", // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: "#fff", // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: "#33c0cd", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#33c0cd", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#333",
          },
        },
        axisLabel: {
          textStyle: {
            color: "#556677",
          },
        },
        splitLine: {
          show: true,
          color: '#E5E6EB'
        },
      },
    ],
    series: [
      // {
      //   name: "老北京布鞋",
      //   type: "line",
      //   data: [150, 120, 170, 140, 500, 160, 110],
      //   symbolSize: 1,
      //   symbol: "circle",
      //   smooth: true,
      //   showSymbol: false,
      //   lineStyle: {
      //     width: 5,
      //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      //       {
      //         offset: 0,
      //         color: "#fe9a",
      //       },
      //       {
      //         offset: 1,
      //         color: "#fe9a8b",
      //       },
      //     ]),
      //     shadowColor: "rgba(254,154,139, 0.3)",
      //     shadowBlur: 10,
      //     shadowOffsetY: 20,
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: colorList[2],
      //       borderColor: colorList[2],
      //     },
      //   },
      // },
    ]
  })


  return {
    colorList,
    tooltipFormat,
    createSeriesOptions,
    options
  }
};


