import { filterMoney } from '@/common/js/util';

const baseOpt = {
  title: {
    text: ''
  },
  accessibility: {
    enabled: false
  },
  chart: {
    style: {
      fontSize: 16
    }
  },
  credits: {
    enabled: false
  },
  legend: {
    align: 'right',
    verticalAlign: 'top'
  },
}

export function useChart(type,data,key=null) {
  const chartType = {
    'bar': renderBar,
    'line': renderLine,
    'pie': renderPie
  }

  let options = chartType[type](data,key)

  return options;
}

//柱形图
const titleMap = {
  'NewCompanyTotal': '新签客户',
  'RenewalCompanyTotal': '续约客户',
  'NotRenewalCompanyTotal': '未续约客户',
  'CompanyTotal': '客户数',
}
function renderBar(data) {
  const opt = {
    colors: ['#5470c6', '#9a60b4', '#ea7ccc'],
    yAxis: {
      labels: {
        style: {
          color: '#999'
        }
      },
      title: {
        enabled: false
      }
    },
    xAxis: {
      categories: data.Date,
      labels: {
        style: {
          color: '#999'
        }
      },
      tickWidth: 1,
      tickLength: 5,
    },
    series: [],
    ...baseOpt
  }
  const filterKey = Object.keys(data).filter(key => !['Date','Title'].includes(key));

  filterKey.forEach(key => {
    let obj = {
      data: data[key],
      type: 'column',
      name: titleMap[key],
    };
    opt.series.push(obj);
  });


  return opt
}

//折线图
function renderLine(data) {
  const opt = {
    colors: ['#CD5C5C', '#25DEDB'],
    plotOptions: {
      series: {
        marker: {
          fillColor: '#FFFFFF',
          lineWidth: 2,
          lineColor: null
        }
      }
    },
    xAxis: {
      categories: data.Date,
      labels: {
        style: {
          color: '#999'
        }
      },
      tickWidth: 1,
      tickLength: 5,
    },
    yAxis: [
      {
        gridLineWidth: 0,
        labels: {
          style: {
            color: '#999'
          }
        },
        title: {
          text: '合同数',
          align:'high',
          style: {
            color: '#999'
          },
          y: -10,
          offset: 0,
          rotation: 0,
        }
      },
      {
        gridLineWidth: 0,
        opposite: true,
        labels: {
          style: {
            color: '#999'
          }
        },
        title: {
          text: '合同金额/元',
          align:'high',
          style: {
            color: '#999'
          },
          y: -10,
          offset: 0,
          rotation: 0,
        }
      },
    ],
    series: [
      {
        data: [],
        type: 'line',
        name: '合同数',
        yAxis: 0,
      },
      {
        type: 'line',
        name: '合同金额',
        yAxis: 1,
        data: [],
      },
    ],
    ...baseOpt
  }
  
  opt.series[0].data = data.ContractTotal;
  opt.series[1].data = data.MoneyTotal;

  return opt
}

//饼图
const keyMap = {
  'MoneyTotal': {
    title: '有效合同金额',
    color: '#FE4545'
  },
  'ContractTotal': {
    title: '有效合同数',
    color: '#FF7113'
  },
  'FormalCompanyCount': {
    title: '正式客户数',
    color: '#486CFF'
  }
}
function renderPie(data,key) {
  const opt = {
    ...baseOpt,
    chart: {
      width: 200,
      height: 200
    },
    yAxis: {
      title: ''
    },
    title: {
      floating:true,
      y:80,
      text: filterMoney(data[key]),
      style: {
        fontSize: 20
      }
    },
    subtitle: {
      floating:true,
      y:100,
      text: keyMap[key].title,
      style: {
        fontSize: 12
      }
    },
    series: [{
      type: 'pie',
      name: '',
      innerSize: '82%',
      label: {
        enabled: false
      },
      data: [{
        name: keyMap[key].title,
        color: keyMap[key].color,
        y: data[key],
        dataLabels: {
          enabled: false
        }
      }]
    }]
  }

  return opt
}