<template>
  <div id="PortfolioCharts" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/theme/macarons'
import { EleResize } from './esresize'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => { return [] }
    },
    label: {
      type: Array,
      default: () => { return [] }
    },
    xDate: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      chartLine: null,
      options: {
        grid: {
            left: "80px",
            right:"80px",
            top: 150,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(params) {
            var res = `${params[0].axisValueLabel}` +'<br/>';
            for (var i = 0, l = params.length; i < l; i++) {
              if(params[i].seriesName == '推送产品' || params[i].seriesName == '发放优惠券'){
                res += params[i].seriesName+ '<br/>';
              }else{
                res += params[i].seriesName + ' : ' + params[i].value + '<br/>';
              }
                
            }
            console.log(params)
            return res;
         }
        },
        legend: {
          icon: "path://M839.099 59.526h-654.199c-69.243 0-125.375 53.746-125.375 120.044v664.86c0 66.299 56.132 120.044 125.375 120.044h654.199c69.243 0 125.375-53.746 125.375-120.044v-664.86c0-66.299-56.132-120.044-125.375-120.044zM840.094 388.754l-331.814 331.814c-11.779 11.78-27.219 17.67-42.66 17.67s-30.879-5.89-42.66-17.67l-239.057-239.057c-23.558-23.558-23.558-61.758 0-85.319s61.758-23.558 85.319 0l196.397 196.397 289.155-289.155c23.558-23.558 61.758-23.558 85.319 0s23.558 61.758 0 85.319z",
          data: ['进场人数', '离场人数', '在线人数','销量',],
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            data: []
          },
          {
            axisTick: {
              show: true
            },
            type: 'category',
            position: 'top',
            name: '推送产品',
            nameLocation: 'start',
            offset: 45,
            data: [],
            boundaryGap: false,
            axisLabel: { show: false },
            axisTick: { show: false }
          },
          {
            type: 'category',
            position: 'top',
            name: '发优惠券',
            nameLocation: 'start',
            offset: 90,
            data: [],
            boundaryGap: false,
            axisLabel: { show: false },
            axisTick: { show: false }
          }
        ],
        dataZoom: [
        {
          type: 'slider'
        },
        ],
        yAxis: [
          {
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(val) {
                return val
              }
            }
          },
          {
            type: 'category',
            position: 'right',
            boundaryGap: false,
            data: [0, 1],
            axisLabel: { show: false },
            axisTick: { show: true },
            axisLine: { show: false }
          },
          {
            type: 'category',
            position: 'right',
            boundaryGap: false,
            data: [0, 1],
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false }
          }
        ],
        series: [
          {
            name: '进场人数',
            type: 'line',
            data: []
          },
          {
            name: '离场人数',
            type: 'line',
            data: []
          },
          {
            name: '在线人数',
            type: 'line',
            data: []
          },
          {
            name: '销量',
            type: 'line',
            data: []
          },
          {
          data: [],
          xAxisIndex: 1,
          yAxisIndex: 1,
          symbolSize: 10,
          type: 'scatter'
        },
        {
          data: [],
          xAxisIndex: 2,
          yAxisIndex: 2,
          symbolSize: 10,
          type: 'scatter'
        }

        ],
      },
      lineCharts: {
        // 折线数据
        data: [
          {
            name: '进场人数',
            type: 'line',
            data: []
          },
          {
            name: '离场人数',
            type: 'line',
            data: []
          },
          {
            name: '在线人数',
            type: 'line',
            data: []
          },
          {
            name: '销量',
            type: 'line',
            data: []
          },
        ],
        // 折线类别
        label: ['进场人数', '离场人数', '在线人数','销量',],
        // x轴时间
        xDate: []
      }
    }
  },
  mounted() {
    // this.drawLineChart(this.lineCharts)
  },
  methods: {
    drawLineChart({ data, label, xDate }) {
      // console.log('开始渲染')
      this.options.series = data
      this.options.legend.data = label
      this.options.xAxis[0].data = xDate
      this.options.xAxis[1].data = xDate
      this.options.xAxis[2].data = xDate
      // 基于准备好的dom，初始化echarts实例
      this.chartLine = echarts.init(this.$el, 'macarons')
      // 使用刚指定的配置项和数据显示图表
      this.chartLine.setOption(this.options)
      const listener = () => {
        this.chartLine.resize()
        // console.log(2)
      }
      // window.addEventListener('resize', listener)
      EleResize.on(document.getElementById('PortfolioCharts'), listener)
    },
    testLineChart() {
      this.chartLine = echarts.init(this.$el, 'macarons')
      this.chartLine.setOption(this.options)
    }
  }
}
</script>
