import { ref } from "vue";

export const useSpectrumDiagramChatHooks = () => {

  const visualColors = ['#5470C6', '#91CC75', '#EE6666', '#73C0DE', '#FAC858', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC'];

  const options = ref<Record<string, any>>({
    // title: {
    //   text: `{a|总量}\n{b|0}`,
    //   textStyle: {
    //     rich: {
    //       a: {
    //         fontSize: 14,
    //         color: "#4E5969",
    //         lineHeight: 24,
    //       },
    //       b: {
    //         fontSize: 16,
    //         color: "#1D2129",
    //         lineHeight: 28,
    //         fontWeight: "bold",
    //       },
    //     },
    //   },
    //   left: "50%", // 水平居中
    //   top: "50%", // 垂直居中
    //   textAlign: "center",
    //   textVerticalAlign: "middle",
    // },
    legend: {
      icon: "circle",
      bottom: "0",
      left: "center",
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: "#556677",
      },
    },
    // tooltip: {
    //   trigger: "item",
    // },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '10%',
      top: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [],
      name: 'Time (s)',
      nameLocation: 'middle',
      nameGap: 30,
      axisLabel: {
        interval: 10 // 间隔显示标签，避免拥挤
      }
    },
    yAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            interval: 10 // 间隔显示标签
        }
    },
    visualMap: {
      type: 'continuous',
      min: -60,
      max: 20,
      color: visualColors,
      orient: 'vertical',
      right: 0,
      top: 'center',
      itemWidth: 20,
      itemHeight: 150,
      label: {
          formatter: function(value: any) {
            return value;
          }
      }
    },
    series: [
      {
        type: 'heatmap',
        data: [],
        pointSize: 2,
        emphasis: {
            itemStyle: {
                borderColor: '#333',
                borderWidth: 1
            }
        },
        // progressive: 1000,
        // animation: false
      }
    ],
  })

  return {
    options
  }
}
