<template>
  <div id="root">
    <el-form :inline="true" :model="listQuery" class="form-inline">
      <el-form-item label="编号">
        <el-input v-model="listQuery.id" placeholder="编号"/>
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="listQuery.licensePlate" placeholder="车牌号"/>
      </el-form-item>
      <el-form-item label="缴费订单号">
        <el-input v-model="listQuery.orderNumber" placeholder="缴费订单号"/>
      </el-form-item>
      <el-form-item label="缴费人姓名">
        <el-input v-model="listQuery.paymentName" placeholder="缴费人姓名"/>
      </el-form-item>
      <el-form-item label="缴费人手机号">
        <el-input v-model="listQuery.paymentTel" placeholder="缴费人手机号"/>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="clearQuery">清空</el-button>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex; margin-left: 20px;">
      <el-button type="primary" @click="exportLicense">导出数据</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      border
      style="width: 100%; margin-top: 20px;">
      <el-table-column
        prop="id"
        label="编号"
        align="center"
        width="180"/>
      <el-table-column
        prop="licensePlate"
        label="车牌号"
        align="center"
        width="180"/>
      <el-table-column
        prop="extensionMonth"
        align="center"
        label="续期时长（月）"/>
      <el-table-column
        prop="extensionPrice"
        align="center"
        label="续期费用（元）">
        <template slot-scope="scope">{{ scope.row.extensionPrice / 100 }}</template>
      </el-table-column>
      <el-table-column
        prop="orderNumber"
        align="center"
        label="缴费订单号"/>
      <el-table-column
        prop="paymentTel"
        align="center"
        label="缴费人手机号"/>
      <el-table-column
        prop="paymentName"
        align="center"
        label="缴费人姓名"/>
      <el-table-column
        prop="paymentType"
        align="center"
        label="缴费方式">
        <template slot-scope="scope">{{ showPayType(scope.row.paymentType) }}</template>
      </el-table-column>
      <el-table-column
        prop="expireDate"
        align="center"
        label="延期后到期日">
        <template slot-scope="scope">{{ formatDate(scope.row.expireDate) }}</template>
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        align="center"
        label="订单状态">
        <template slot-scope="scope">{{ showStatus(scope.row.orderStatus) }}</template>
      </el-table-column>
      <el-table-column
        prop="updateDate"
        align="center"
        label="缴费完成时间">
        <template slot-scope="scope">{{ formatDateTime(scope.row.updateDate) }}</template>
      </el-table-column>
    </el-table>
    <div class="block-page">
      <el-pagination
        :current-page="listQuery.pageNum"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'License',
  data() {
    return {
      listQuery: {
        id: '',
        licensePlate: '',
        orderNumber: '',
        paymentName: '',
        paymentTel: '',
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      loading: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.listQuery.pageNum = 1
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.getData()
    },
    formatDate(val) {
      if (val === null || val === '') {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    formatDateTime(val) {
      if (val === null || val === '') {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      var hour = value.getHours()
      var minutes = value.getMinutes()
      var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    },
    showPayType(obj) {
      let str = ''
      switch (obj) {
        case '0':
          str = '微信缴费'
          break
        case '1':
          str = '线下缴费'
          break
        case '2':
          str = '支付宝缴费'
          break
      }
      return str
    },
    clearQuery() {
      this.listQuery.id = ''
      this.listQuery.licensePlate = ''
      this.listQuery.orderNumber = ''
      this.listQuery.paymentName = ''
      this.listQuery.paymentTel = ''
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.getData()
    },
    query() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.getData()
    },
    getData() {
      this.loading = true
      this.$store.dispatch('GetLicenseAll', this.listQuery).then((res) => {
        const resCode = res.code
        if (resCode === '1') {
          this.loading = false
          this.$message.error(res.message)
          return
        }
        const resData = res.data
        this.list = resData.records
        this.listQuery.pageNum = resData.current
        this.listQuery.pageSize = resData.size
        this.total = resData.total
        this.loading = false
      }).catch(() => {
        console.log('error GetLicenseAll')
        this.loading = false
      })
    },
    showStatus(val) {
      let str = ''
      switch (val) {
        case '0':
          str = '未支付'
          break
        case '1':
          str = '已支付'
          break
        case '2':
          str = '正在支付中'
          break
        case '3':
          str = '已关闭'
          break
      }
      return str
    },
    exportLicense() {
      this.$store.dispatch('ExportLicenseData').then((res) => {
        this.download(res)
      })
    },
    download(data) { // 下载文件
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', '月租车订单.xlsx')

      document.body.appendChild(link)
      link.click()
    }
  }
}
</script>

<style scoped>
.form-inline {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.block-page {
  display: flex;
  justify-content: flex-end;
}
</style>
