import type { PropType, ExtractPropTypes } from "vue";
import { EChartsOption } from "echarts";
import { getNormalizedChart } from "../../../utils";
import { dataSource } from "../../../utils";
import { DataSourceType } from "../../../chartEnum";

export const basicLineProps = {
  width: {
    type: Number as PropType<number>,
    default: 400,
  },
  height: {
    type: Number as PropType<number>,
    default: 260,
  },
  dataSource,
  // 标题
  title: {
    type: Object as PropType<EChartsOption["title"]>,
  },
  // 图例
  legend: {
    type: Object as PropType<EChartsOption["legend"]>,
  },
  // 背景
  backgroundColor: {
    type: String as PropType<string>,
  },
  // 边框
  grid: {
    type: Object as PropType<EChartsOption["grid"]>,
  },
  // 提示框
  tooltip: {
    type: Object as PropType<EChartsOption["tooltip"]>,
  },
  // x轴数据
  xAxis: {
    type: Object as PropType<EChartsOption["xAxis"]>,
  },
  // y轴数据
  yAxis: {
    type: Object as PropType<EChartsOption["yAxis"]>,
  },
  // 折线
  series: {
    type: Array as PropType<EChartsOption["series"]>,
  },
  // 数据集
  dataset: {
    type: Object as PropType<EChartsOption["dataset"]>,
  },
};

/* 系列相关 */
const series: EChartsOption['series'] = [];
series['line' as unknown as number] = {
  lineStyle: {
    type: "solid",
    width: 1
  },
  symbol: "rect",
  symbolSize: 4,
  symbolRotate: 0,
  smooth: false,
  step: false,
};

const chartOptions = getNormalizedChart({
  title: {
    text: "折线图标题",
  },
  xAxis: {
    data: ['轴标签A', '轴标签B', '轴标签C', '轴标签D']
  },
  series
});

export const defaultPropsValue: EChartsOption = {
  container: {
    props: {
      width: 400,
      height: 260,
    },
  },
  props: {
    // 数据源
    dataSource: {
      sourceType: DataSourceType.STATIC,
      data: {
        xData: ['轴标签A', '轴标签B', '轴标签C', '轴标签D'],
        series: [
          {
            type: 'line',
            name: '系列1',
            data: [89.3, 92.1, 94.4, 85.4]
          },
          {
            type: 'line',
            name: '系列2',
            data: [95.8, 89.4, 91.2, 76.9]
          },
        ]
      },
      url: location.origin + "/mock/api/get/example/line",
      method: "POST",
      params: {},
      headers: {},
      refreshTime: 0,
      dataProcess: `
        (res) => {
          // 取出列表
          const data = res.data;
          // x轴数据
          const xData = data.map((item) => item.name); 
          // 系列数据
          const series = [
            { type: 'line', name: '苹果', data: data.map(item => item.apple) },
            { type: 'line', name: 'VIVO', data: data.map(item => item.vivo) },
            { type: 'line', name: '小米', data: data.map(item => item.mi) },
          ];

          // 返回图表数据
          return { xData, series };
        }
      `
    },
    ...chartOptions
  },
};

export type BasicLineProps = ExtractPropTypes<typeof basicLineProps>;