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

export const componentProps = {
  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"]>,
  },
  // 饼图数据
  series: {
    type: Array as PropType<EChartsOption["series"]>,
  },
  // color
  color: {
    type: Object as PropType<EChartsOption["color"]>
  },
  // 系列设置
  seriesExtend: {
    type: Object as PropType<EChartsOption["series"]>,
    default: () => seriesExtend
  }
};

/* 系列相关 */
const series: EChartsOption['series'] = [];
const seriesExtend = {
  top: 70,
  left: 20,
  right: 20,
  bottom: 20,
  startAngle: 0,
  endAngle: 360,
  radius: ['0%', '75%'],
};

const chartOptions = getNormalizedChart({
  title: {
    text: "饼图标题",
  },
  grid: {
    show: false,
  },
  xAxis: {
    show: false
  },
  yAxis: {
    show: false
  },
  series,
  seriesExtend,
})

export const defaultPropsValue: EChartsOption = {
  // 组件容器默认属性
  container: {
    props: {
      width: 400,
      height: 260,
    },
  },
  // 图表默认属性
  props: {
    // 数据源
    dataSource: {
      sourceType: DataSourceType.STATIC,
      data: {
        series: [
          {
            type: 'pie',
            name: '系列1',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
            ]
          }
        ]
      },
      url: location.origin + "/mock/api/get/example/pie",
      method: "POST",
      params: {},
      headers: {},
      refreshTime: 0,
      dataProcess: `
        (res) => {
          // 取出列表
          const data = res.data;
          
          // 系列数据
          const series = [
            { type: 'pie', name: '月份', data: data.map(item => ({value: item.apple, name: item.name})) }
          ];

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

export type BasicPieProps = ExtractPropTypes<typeof componentProps>;