<template>
  <div
    id="history"
    style="width:100%;height:100%"></div>
</template>
<script>
import { getMonthSales } from '@/api/mainpage'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
let option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    top: 30,
    left: 10,
    right: 20,
    bottom: '5%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 3
      }
    }
  ],
  yAxis: [
    {
      name: '张数',
      nameLocation: 'end',
      nameTextStyle: {
        padding: [0, 10, 0, -30]
      },
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    {
      name: '金额/元',
      nameLocation: 'end',
      nameTextStyle: {
        padding: [0, -20, 0, 40]
      },
      position: 'right',
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      yAxisIndex: 1,
      name: '售票金额',
      type: 'line',
      symbol: 'none',
      itemStyle: {
        color: '#4E84FD'
      },
      areaStyle: {
        color: '#F1FAFE'
      },
      data: []
    }, {
      name: '售票张数',
      type: 'line',
      symbol: 'none',
      itemStyle: {
        color: '#A359FD'
      },
      areaStyle: {
        color: '#F1FAFE'
      },
      data: []
    }, {
      name: '退票张数',
      type: 'line',
      symbol: 'none',
      itemStyle: {
        color: '#FE635F'
      },
      areaStyle: {
        color: '#F1FAFE'
      },
      data: []
    }
  ]
}
export default {
  data () {
    return {
      option
    }
  },
  mounted () {
    this.getMonthSales()
  },
  methods: {
    getMonthSales () {
      let chart = echarts.init(document.getElementById('history'))
      chart.setOption(this.option)
      getMonthSales().then(res => {
        // console.log(res)
        res.pop()
        let option = {
          xAxis: [{
            data: res.map(item => item.date.slice(5))
          }],
          series: [
            {
              type: 'line',
              name: '售票金额',
              data: res.map(item => item.sum_price),
              symbol: 'none',
              itemStyle: {
                color: '#4E84FD'
              },
              areaStyle: {
                color: '#F1FAFE'
              }
            },
            {
              type: 'line',
              name: '售票张数',
              data: res.map(item => item.sum_count),
              symbol: 'none',
              itemStyle: {
                color: '#A359FD'
              },
              areaStyle: {
                color: '#F1FAFE'
              }
            },
            {
              type: 'line',
              name: '退票张数',
              data: res.map(item => item.cancel_count),
              symbol: 'none',
              itemStyle: {
                color: '#FE635F'
              },
              areaStyle: {
                color: '#F1FAFE'
              }
            }
          ]
        }
        chart.setOption(option)
      })
    }
  }
}
</script>
