import React from 'react';
import { StackedColumnBarProps } from '../../index.d';
import StackedColumnBarEditor from './PropsEditor';
import ReactEcharts from "echarts-for-react";
import './index.less'
//模拟接口返回的数据
const apiData = [
  {
      name: '直接访问',
      data: [320, 332, 301, 334, 390, 330, 320]
  },
  {
      name: '邮件营销',
      stack: '广告',
      data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
      name: '联盟广告',
      stack: '广告',
      data: [220, 182, 191, 234, 290, 330, 310]
  },
  {
      name: '视频广告',
      type: 'bar',
      stack: '广告',
      data: [150, 232, 201, 154, 190, 330, 410]
  },
  {
      name: '搜索引擎',
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
  },
  {
      name: '百度',
      barWidth: 5,
      stack: '搜索引擎',
      data: [620, 732, 701, 734, 1090, 1130, 1120]
  },
  {
      name: '谷歌',
      stack: '搜索引擎',
      data: [120, 132, 101, 134, 290, 230, 220]
  },
  {
      name: '必应',
      stack: '搜索引擎',
      data: [60, 72, 71, 74, 190, 130, 110]
  },
  {
      name: '其他',
      stack: '搜索引擎',
      data: [62, 82, 91, 84, 109, 110, 120]
  }
]
const option = {
  tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  legend: {},
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis: [
      {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
  ],
  yAxis: [
      {
          type: 'value'
      }
  ],
  series: [{}]
};
const StackedColumnBar: React.FC<StackedColumnBarProps> = (props) => {
  const { configs} = props;
  // 设置legend
  const legend = apiData.map(it => it.name);
  option.legend = { data: legend };
  // 设置series
  const series:Array<any> = apiData.map((it: any) => ({ ...it, type: 'bar' }));
  option.series = series;
  const height = (configs&&configs.propsCfg && configs.propsCfg.height) ? configs.propsCfg.height : '600px';
  // 根据配置生成横向坐标
  console.log(configs)
  const xAxisdata = (configs&&configs.propsCfg && configs.propsCfg.columnsDefine) ? configs.propsCfg.columnsDefine.map((it:any)=>it.title) : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  option.xAxis = [
    {
      type: 'category',
      data: xAxisdata
    }
  ];
  return <div>
    <ReactEcharts
          option={{...option}}
          notMerge
          lazyUpdate
          style={{width: '100%', height: height}}
      />
  </div>
}

export default StackedColumnBar;
export { StackedColumnBarEditor }