import { ref } from "vue";

interface SeriesOptions {
  title: string;
  key: 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,
      key: options.key,
      type: "bar",
      stack: options.title,
      barWidth: "8px",
      barGap: "30%",
      data: [],
    };
    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;
  };

  var singleData = [224, 220, 335];
  var multipleData = [442, 440, 220];
  var judgeData = [110, 220, 115];

  const options = ref<Record<string, any>>({
    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)',
    },
    legend: {
      icon: "circle",
      bottom: "0",
      left: "center",
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: "#556677",
      },
    },
    grid: {
      top: "20%",
      bottom: "15%",
      left: "5%",
      right: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: [],
        axisLabel: {
          // inside: true,
          // padding: [15, 0, 0, 0],
          textStyle: {
            color: "#86909C",
            fontSize: 12,
          },
        },
        axisTick: {
          inside: true,
          length: 4,
          lineStyle: {
            color: "#86909C",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#E5E6EB",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          // inside: true,
          textStyle: {
            color: "#4E5969",
            fontSize: 12,
          },
        },
        splitLine: {
          lineStyle: {
            color: "#F2F3F5",
            type: "solid",
          },
          show: true,
        },
      },
    ],
    series: [
      {
        key: 'eva_batch_top1',
      },
      {
        key: 'eva_class_top1',
      },
      {
        key: 'point_acc',
      },
    ],
  });



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