<template>
  <div
    id="history"
    v-loading="loading"
    style="width:100%;height:100%"></div>
</template>

<script>
import moment from 'moment'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import { getOrderStatistics } from '@/api/order.js'

let option = {
  color: ['#4E84FD', '#A359FD', '#deeb34', '#4E8400'],
  legend: {
    data: ['售票金额', '售票张数', '退票金额', '退票张数']
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    top: 30,
    left: 20,
    right: 30,
    bottom: '5%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisLine: {
        show: true
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 3
      }
    }
  ],
  yAxis: [
    {
      name: '张数',
      nameLocation: 'end',
      nameTextStyle: {
        padding: [0, 10, 0, -30]
      },
      type: 'value',
      axisLine: {
        show: true
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    {
      name: '金额/元',
      nameLocation: 'end',
      nameTextStyle: {
        padding: [0, -20, 0, 40]
      },
      position: 'right',
      type: 'value',
      axisLine: {
        show: true
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      yAxisIndex: 1,
      name: '售票金额',
      type: 'bar',
      symbol: 'none',
      itemStyle: {
        color: '#4E84FD'
      },
      areaStyle: {
        color: '#F1FAFE'
      },
      data: []
    }, {
      name: '售票张数',
      type: 'bar',
      symbol: 'none',
      itemStyle: {
        color: '#A359FD'
      },
      areaStyle: {
        color: '#F1FAFE'
      },
      data: []
    }, {
      name: '退票张数',
      type: 'bar',
      symbol: 'none',
      itemStyle: {
        color: '#FE635F'
      },
      areaStyle: {
        color: '#F1FAFE'
      },
      data: []
    }
  ]
}
export default {
  data () {
    return {
      option,
      loading: false
    }
  },
  mounted () {
    this.getOrderStatistics()
  },
  methods: {
    async getOrderStatistics () {
      const chart = echarts.init(document.getElementById('history'))
      this.loading = true
      const res = await getOrderStatistics({
        pageSize: -1,
        pageNum: 1,
        timeBegin: moment().add(-30, 'days').format('YYYY-MM-DD HH:mm:ss'),
        timeEnd: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        ticketTypeIdList: [],
        otaSourceNameList: []
      })
      this.loading = false
      const allData = res.data || []
      const latestDays = Array.from({ length: 30 }, (_, i) => moment().add(-i, 'days').format('YYYY-MM-DD')).reverse()
      const getValue = (time, key) => {
        const item = allData.find(i => i.orderDateDay === time)
        return item ? item[key] : 0
      }
      this.option.xAxis[0].data = latestDays
      this.option.series = [
        {
          type: 'bar',
          name: '售票金额',
          yAxisIndex: 1,
          data: latestDays.map(tm => getValue(tm, 'salePrice')),
          symbol: 'none',
          itemStyle: {
            color: '#4E84FD'
          },
          areaStyle: {
            color: '#F1FAFE'
          }
        },
        {
          type: 'bar',
          name: '售票张数',
          yAxisIndex: 0,
          data: latestDays.map(tm => getValue(tm, 'saleNum')),
          symbol: 'none',
          itemStyle: {
            color: '#A359FD'
          },
          areaStyle: {
            color: '#F1FAFE'
          }
        },
        {
          type: 'bar',
          name: '退票金额',
          yAxisIndex: 1,
          data: latestDays.map(tm => getValue(tm, 'cancelPrice')),
          symbol: 'none',
          itemStyle: {
            color: '#4E8400'
          },
          areaStyle: {
            color: '#F1FAFE'
          }
        },
        {
          type: 'bar',
          name: '退票张数',
          yAxisIndex: 0,
          data: latestDays.map(tm => getValue(tm, 'cancelNum')),
          symbol: 'none',
          itemStyle: {
            color: '#FE635F'
          },
          areaStyle: {
            color: '#F1FAFE'
          }
        }
      ]
      console.log(this.option)
      chart.setOption(this.option)
    }
  }
}
</script>
