import { ref, computed } from "vue";
import { StatsAnalysis } from "@/api/interface";
import { DEFAULT_PRIMARY } from "@/config";
import { ECOption } from "@/components/ECharts/config";
/**
 * @description 柱状图 hooks
 * */
export const useChart = (name: string, api: (params: any) => Promise<any>) => {
  const data = ref<StatsAnalysis.ResChartData[]>([]);
  const option = computed<ECOption>(() => {
    return {
      tooltip: {
        trigger: "axis",
        backgroundColor: "transparent",
        axisPointer: {
          type: "none"
        },
        padding: 0,
        formatter: (p: any) => {
          let dom = `<div style="width:100%; height: 70px !important; display:flex;flex-direction: column;justify-content: space-between;padding:10px;box-sizing: border-box;
                color:#fff; background: ${DEFAULT_PRIMARY};border-radius: 4px;font-size:14px; ">
                  <div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>${name}:  ${p[0].name}</div>
                  <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>数量:  ${p[0].value}</div>
                </div>`;
          return dom;
        }
      },
      toolbox: {
        show: true,
        orient: "horizontal"
      },
      grid: {
        containLabel: true,
        left: "0",
        right: "0"
      },
      dataZoom: [
        {
          show: false,
          height: 10,
          xAxisIndex: [0],
          bottom: 0,
          startValue: 0,
          endValue: 9,
          handleStyle: {
            color: "#6b9dfe"
          },
          textStyle: {
            color: "transparent"
          }
        },
        {
          type: "inside",
          show: true,
          height: 0,
          zoomLock: true
        }
      ],
      xAxis: [
        {
          type: "category",
          data: data.value.map(item => ({ value: item.name })),
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 6,
            interval: 0,
            color: "#333333",
            fontSize: 12,
            formatter: function (name: string) {
              return name.length > 8 ? name.slice(0, 8) + "..." : name;
            }
          },
          axisLine: {
            lineStyle: {
              color: "#F5DFC9"
            }
          }
        }
      ],
      yAxis: [
        {
          min: 0,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F5DFC9"
            }
          },
          axisLabel: {
            color: "#797878",
            fontSize: 12,
            fontWeight: 400,
            formatter: function (value: number) {
              if (value === 0) {
                return value + "";
              } else if (value >= 10000) {
                return value / 10000 + "w";
              }
              return value + "";
            }
          }
        }
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          data: data.value.map(item => ({ value: item.count })),
          barWidth: "30px",
          itemStyle: {
            color: "#7F95C8",
            borderRadius: [2, 2, 0, 0]
          },
          emphasis: {
            itemStyle: {
              color: DEFAULT_PRIMARY
            }
          }
        }
      ]
    };
  });
  async function loadData(params: any) {
    const res = await api(params);
    data.value = res.data;
  }
  loadData({});
  return {
    option,
    loadData
  };
};
