import { cloneDeep } from "lodash";
export default function useChartOption(source, type, enableLabel = true, other = null, max) {
  let defaultOption = {
    legend: {
      type: "scroll",
      orient: "horizontal",
      bottom: 0,
      left: "center",
      padding: [10, 0, 0, 0],
      itemGap: 5,
      itemWidth: 10,
      itemHeight: 10,
      pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
      pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
      pageIconSize: 11, //翻页按钮大小
      // pageFormatter: "", //隐藏翻页的数字
      // pageButtonItemGap: -6, //翻页按钮的两个之间的间距
    },
    grid: { width: 'auto' },
    tooltip: {
      formatter: function (params) {
        return `${params.value.title}: ${params.value.number} (${params.value.rate})`;
      }
    },
    dataset: {
      source: []
    },
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: []
  }

  let sourceData = cloneDeep(source)

  defaultOption.dataset.source = sourceData

  if (type == 'pie') {
    sourceData = sourceData.map(item => {
      let name = item.title
      return {
        ...item,
        name,
        value: item.number
      }
    })
    defaultOption.tooltip = {
      formatter: function (params) {
        if(params.value.icon) {
          return `<span class="diagram-toolip-img">${params.value.icon}</span>${params.value.title}: ${params.value.number} (${params.value.rate})`;
        }else {
          return `${params.value.title}: ${params.value.number} (${params.value.rate})`;
        }
      }
    }
    defaultOption.dataset.source = sourceData
    defaultOption.dataset.dimension= other ? other.dimension : null
    defaultOption.series.push({
      type: 'pie',
      label: {
        show: enableLabel ? true : false,
        formatter: function(params) {
          return `${params.data.title},${params.data.number}`
        }
      },
      avoidLabelOverlap: true,
      bottom: 15,
      encode: other ? other.encode : null
    })
    console.log(defaultOption);
  }

  if (type === 'circle') {
    sourceData = sourceData.map(item => {
      let name = item.title
      return {
        ...item,
        name,
        value: item.number
      }
    })
    defaultOption.dataset.source = sourceData
    defaultOption.dataset.dimension= other ? other.dimension : null
    defaultOption.series.push({
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      label: {
        show: enableLabel ? true : false,
        formatter: function(params) {
          return `${params.data.title},${params.data.number}`
        }
      },
      avoidLabelOverlap: true,
      bottom: 15,
      encode: other ? other.encode : null
    })
  }

  if (type === 'bar') {
    const xAxis = {
      type: 'category',
      triggerEvent: true,
      axisLabel: {
        interval: 0, //横轴信息全部显示
        rotate: -56, //-15度角倾斜显示
        formatter(value) {
          if (value.length > 5) {
            return value.slice(0, 4)+'...'
          }
          return value;
        },
      },
    }
    const yAxis = {
      type: "value",
      axisLabel: {
        margin: 4,
      }
    }
    defaultOption.color = ['#70b936']
    defaultOption.dataZoom = sourceData.length > 8  ?
      [
        {
          type: 'slider',
          show: true,
          minValueSpan: 5,
          maxValueSpan: 8,
          handleSize: 4,
          filterMode: 'filter',
          xAxisIndex: [0],
          height: 10,
          backgroundColor: '#fff',
          dataBackground: {
            areaStyle: {
              color: '#fff'
            }
          },
          brushStyle: {
            color: '#fff'
          },
          showDetail: false,
          showDataShadow: false,
          bottom: 5
        },
      ] : null
    defaultOption.legend = null
    defaultOption.grid.bottom = '70'
    defaultOption.xAxis = xAxis
    defaultOption.yAxis = yAxis

    defaultOption.series.push({
      type: 'bar',
      encode: {
        x: 'title',
        y: 'number'
      },
      itemStyle: {
        normal: {
          label: {
            show: enableLabel ? true : false, //开启显示
            position: "top", //在上方显示
          },
        },
      },
    })
    console.log(defaultOption);
  }

  if (type === 'horizontalBar') {
    const xAxis = {
      type: 'category',
      axisLabel: {
        formatter(value) {
          if (value.length > 5) {
            return value.slice(0, 4)+'...'
          }
          return value;
        },
      },
    }
    const yAxis = {
      show: true,
      type: "value",
      axisLabel: {
        margin: 4,
      }
    }
    defaultOption.color = ['#70b936']

    defaultOption.dataZoom = defaultOption.dataZoom = sourceData.length > 8 ?[
      {
        type: 'slider',
        yAxisIndex: [0],
        show: true,
        minValueSpan: 5,
        maxValueSpan: 8,
        width: 10,
        handleSize: 4,
        filterMode: 'filter',
        backgroundColor: '#fff',
        dataBackground: {
          areaStyle: {
            color: '#fff'
          }
        },
        brushStyle: {
          color: '#fff'
        },
        showDataShadow: false,
        showDetail: false,
        bottom: 10
      },
    ] : null
    defaultOption.legend = null
    defaultOption.grid.top = '30'
    defaultOption.grid.left = '70'
    defaultOption.grid.right = '100'
    defaultOption.grid.bottom = '30'
    defaultOption.xAxis = yAxis
    defaultOption.yAxis = xAxis
    defaultOption.series.push({
      type: 'bar',
      encode: {
        x: 'number',
        y: 'title'
      },
      itemStyle: {
        normal: {
          label: {
            show: enableLabel ? true : false, //开启显示
            position: "right", //在上方显示
          },
        },
      },
    })
  }

  if (type === "line") {
    const xAxis = {
      type: 'category',
      triggerEvent: true,
      axisLabel: {
        interval: 0, //横轴信息全部显示
        rotate: -56, //-15度角倾斜显示
        formatter(value) {
          if (value.length > 5) {
            return value.slice(0, 4)+'...'
          }
          return value;
        },
      },
    }

    const yAxis = {
      type: "value",
      axisLabel: {
        margin: 4,
      }
    }
    defaultOption.color = ['#70b936']

    defaultOption.xAxis = xAxis
    defaultOption.yAxis = yAxis
    defaultOption.series.push({
      type: 'line',
      encode: {
        x: 'title',
        y: 'number'
      },
      label: {
        show: enableLabel ? true : false,
      },
    })
  }

  if (type === 'radar') {
    const legendData = sourceData.map(item => item.title)
    const indicator = legendData.map(name => {
      return {
        name,
        max
      }
    })
    const seriesData = sourceData.map(item =>item.number)
    const tooltipText = sourceData.map(item =>item.title + ': ' + '\xa0' + item.number + '\xa0' + '（' + item.rate + '）' + '<br />')
    defaultOption = {
      // legend: {
      //   data: legendData
      // },
      tooltip: {
        formatter:(params)=>{
          return tooltipText.join('')
        }
      },
      color: ['#70b936'],
      radar: {
        indicator
      },
      series: [
        {
          type: 'radar',
          data: [
            { 
              value: seriesData,
            }
          ]
        }
      ]
    }
  }

  if (type === 'multi-bar') {
    const xAxis = {
      type: 'category'
    }
    const yAxis = {
      type: "value",
      axisLabel: {
        margin: 4,
      }
    }
    defaultOption.legend = null
    defaultOption.grid.bottom = '40'
    defaultOption.tooltip = {}
    defaultOption.xAxis = xAxis
    defaultOption.yAxis = yAxis
    const num = defaultOption.dataset.source.length - 1
    for (let i = 0; i <= num; i++) {
      const item = {
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        }
      }
      defaultOption.series.push(item)
    }
  }

  if (type === 'multi-horizontal-bar') {
    const xAxis = {
      type: 'category'
    }
    const yAxis = {
      type: "value",
      axisLabel: {
        margin: 4,
      }
    }
    defaultOption.legend = null
    defaultOption.tooltip = {}
    defaultOption.grid.left = '50'
    defaultOption.xAxis = yAxis
    defaultOption.yAxis = xAxis
    const num = defaultOption.dataset.source.length - 1
    for (let i = 0; i <= num; i++) {
      const item = {
        type: 'bar',
        label: {
          show: true,
          position: 'right'
        }
      }
      defaultOption.series.push(item)
    }
  }

  if(type === 'multi-line') {
    const xAxis = {
      type: 'category'
    }
    const yAxis = {
      type: "value",
      axisLabel: {
        margin: 4,
      }
    }
    defaultOption.xAxis = xAxis
    defaultOption.yAxis = yAxis
    defaultOption.tooltip = {}
    const num = defaultOption.dataset.source.length - 1
    for (let i = 0; i <= num; i++) {
      const item = {
        type: 'line',
      }
      defaultOption.series.push(item)
    }
  }
  console.log('defaultOption',defaultOption);
  return defaultOption
}