<template>
  <div>
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="100px">
        <el-form-item
          label="起始时间"
          prop="timeBegin">
          <el-date-picker
            v-model="form.timeBegin"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="截止时间"
          prop="timeEnd">
          <el-date-picker
            v-model="form.timeEnd"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="getStatistics">搜索</el-button>
        <el-button
          type="success"
          :loading="exportLoading"
          @click="handleExport">导出</el-button>
      </div>
    </div>
    <div class="tableBox">
      <el-table
        v-loading="loading"
        row-class-name="is-center"
        :data="tableData">
        <el-table-column
          prop="projectName"
          label="项目名称" />
        <el-table-column
          prop="count"
          label="订单数量" />
      </el-table>
    </div>

    <el-pagination
      background
      :page-size="form.pageSize"
      @current-change="handlePage"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getPlatformOrderStatistics } from '@/api/platform'
import moment from 'moment'

export default {
  name: 'OrderStatistics',
  data () {
    return {
      loading: false,
      exportLoading: false,
      tableData: [],
      total: 0,
      form: {
        id: '',
        export: false,
        exportDetail: false,
        timeBegin: moment().subtract(1, 'months').startOf('day'),
        timeEnd: moment().endOf('day'),
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.getStatistics()
  },
  methods: {
    getStatistics (goFirst) {
      if (goFirst) {
        this.form.pageNum = 1
      }
      if (!this.form.timeBegin || !this.form.timeEnd) {
        this.$message.error('请选择起始时间和截止时间')
        return
      }
      this.loading = true
      const params = {
        ...this.form,
        timeBegin: moment(this.form.timeBegin).format('YYYY-MM-DD HH:mm:ss'),
        timeEnd: moment(this.form.timeEnd).format('YYYY-MM-DD HH:mm:ss'),
        export: false,
        exportDetail: false
      }
      getPlatformOrderStatistics(params).then(res => {
        this.loading = false
        this.tableData = res.data || []
        this.total = res.total || 0
      }).catch(() => {
        this.loading = false
      })
    },
    handleExport () {
      if (!this.form.timeBegin || !this.form.timeEnd) {
        this.$message.error('请选择起始时间和截止时间')
        return
      }
      this.exportLoading = true
      const params = {
        ...this.form,
        timeBegin: moment(this.form.timeBegin).format('YYYY-MM-DD HH:mm:ss'),
        timeEnd: moment(this.form.timeEnd).format('YYYY-MM-DD HH:mm:ss'),
        export: true,
        exportDetail: false
      }
      getPlatformOrderStatistics(params).then(() => {
        this.exportLoading = false
        this.$notify({
          title: '提示',
          message: '导出成功',
          type: 'success'
        })
      }).catch(() => {
        this.exportLoading = false
        this.$notify.error({
          title: '提示',
          message: '导出失败'
        })
      })
    },
    handlePage (pageNum) {
      this.form.pageNum = pageNum
      this.getStatistics()
    }
  }
}
</script>

<style scoped>

</style>
