<template>
  <v-chart
    style="width:100%;height:100%"
    :auto-resize="true"
    :options="option"/>
</template>
<script>
import { getSalesByDay } from '@/api/dashboard'
import moment from 'moment'
let option = {
  color: ['#FFCB60', '#4FCBD1', '#FF6460', '#7FB800', '#F6511D', '#3F1E1E', '#65BAE3', '#707B5B', '#72AB5E', '#866CAD', '#FADF54', '#E7B2C2'],
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    top: 30,
    left: 10,
    right: 20,
    bottom: '5%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      boundaryGap: false,
      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.getSalesByDay()
  },
  methods: {
    getSalesByDay () {
      let tmpdata1 = [] // 售票金额
      let tmpdata2 = [] // 售票张数
      let tmpdata3 = [] // 退票张数
      let tmpdata4 = [] // 日期
      getSalesByDay({startDate: new Date(moment().subtract(30, 'days')), endDate: new Date(moment().subtract(1, 'days'))}).then((res) => {
        res.list.forEach(element => {
          tmpdata1.push(element.salePrice)
          tmpdata2.push(element.saleNum)
          tmpdata3.push(element.cancelNum)
          tmpdata4.push(element.date.slice(5))
        })
      })
      this.option.series[0].data = tmpdata1
      this.option.series[1].data = tmpdata2
      this.option.series[2].data = tmpdata3
      this.option.xAxis[0].data = tmpdata4
    }
  }
}
</script>
