<template>
  <div id="root">
    <el-form :model="formInline" inline class="form-inline">
      <el-form-item label="订单号">
        <el-input v-model="formInline.orderBumber" placeholder="订单号"/>
      </el-form-item>
      <el-form-item label="缴费项目编号">
        <el-input v-model="formInline.billId" placeholder="缴费项目编号"/>
      </el-form-item>
      <el-form-item label="缴费项目名">
        <el-input v-model="formInline.billName" placeholder="缴费项目名"/>
      </el-form-item>
      <el-form-item label="收费单号">
        <el-input v-model="formInline.billInvoiceId" placeholder="收费单号"/>
      </el-form-item>
      <el-form-item label="缴费人手机号">
        <el-input v-model="formInline.payPhone" placeholder="缴费人手机号"/>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="clear">清空</el-button>
        <el-button type="primary" @click="searchData">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-left: 20px; margin-bottom: 20px;" @click="exportExcel">导出数据</el-button>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="list"
      border
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <!--<el-table-column-->
      <!--type="selection"-->
      <!--align="center"-->
      <!--width="55"/>-->
      <el-table-column
        label="订单号"
        prop="id"
        align="center">
        <template slot-scope="scope">
          <span style="color: #409EFF;cursor: pointer" @click="getOrderInfo(scope.row.orderBumber)">{{ scope.row.orderBumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="billId"
        align="center"
        label="收费组编号">
        <template slot-scope="scope">
          <span v-for="item in scope.row.billIdList">
            <a style="color: #409EFF;cursor: pointer" @click="getInfo(item)">{{ item }}</a>,
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="billInvoiceId"
        label="收费单号"
        align="center"
        width="120">
        <template slot-scope="scope">
          <span v-for="item in scope.row.billInvoiceIdList">
            {{ item }},
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="payPrice"
        align="center"
        label="总费用金额">
        <template slot-scope="scope">{{ showPayPrice(scope.row.sumPrice) }}</template>
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        align="center"
        label="订单状态">
        <template slot-scope="scope">{{ show(scope.row.orderStatus) }}</template>
      </el-table-column>
      <el-table-column
        prop="payPhone"
        align="center"
        label="缴费人手机号"/>
      <el-table-column
        prop="payRemark"
        align="center"
        label="缴费备注"/>
      <el-table-column
        prop="payType"
        align="center"
        label="缴费方式">
        <template slot-scope="scope">{{ showPayType(scope.row.payType) }}</template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="订单生成时间">
        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="缴费完成时间">
        <template slot-scope="scope">{{ formatDate(scope.row.updateDate) }}</template>
      </el-table-column>
    </el-table>
    <div class="foot-page">
      <el-pagination
        :current-page="formInline.pageNum"
        :page-sizes="[10, 20, 40, 100]"
        :page-size="formInline.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      formInline: {
        orderBumber: '', // 流水 id
        billId: '', // 缴费项 id
        billName: '', //  缴费项 名称
        billInvoiceId: '', // 缴费单 编号
        payPhone: '', //  缴费人手机号
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      list: [], // 数据
      total: 0 // 总数
    }
  },
  mounted() {
    this.getBillStatement()
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.getBillStatement()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.pageNum = val
      this.getBillStatement()
    },
    getBillStatement() { //  获取流水信息
      this.loading = true
      this.$store.dispatch('GetBillStatementAll', this.formInline).then(res => {
        this.loading = false
        const resData = res.data
        this.list = resData.list
        this.formInline.pageNum = resData.pageNum
        this.formInline.pageSize = resData.pageSize
        this.total = resData.total
      }).catch(() => {
        this.loading = false
        console.log('error GetBillStatementAll')
      })
    },
    searchData() { // 搜索
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      this.getBillStatement()
    },
    showPayType(obj) {
      let str = ''
      switch (obj) {
        case '0':
          str = '微信缴费'
          break
        case '1':
          str = '线下缴费'
          break
        case '2':
          str = '支付宝缴费'
          break
      }
      return str
    },
    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
    },
    showPayPrice(payPrice) { //  转换金额
      const price = payPrice / 100
      return price
    },
    getInfo(billId) { // 跳转收费组详情
      this.$router.push({ name: 'bill-info', query: { id: billId }})
    },
    clear() { // 情空
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      this.formInline.id = '' // 流水 id
      this.formInline.billId = '' // 缴费项 id
      this.formInline.billName = '' //  缴费项 名称
      this.formInline.billInvoiceId = '' // 缴费单 编号
      this.formInline.payName = '' //  缴费人

      this.getBillStatement()
    },
    exportExcel() {
      this.$store.dispatch('ExportBillStatementExcel', this.formInline.billId).then(res => {
        const url = window.URL.createObjectURL(new Blob([res]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '流水信息.xls')
        document.body.appendChild(link)
        link.click()
      }).catch(() => {
        console.log('error ExportBillStatementExcel')
      })
    },
    showBillArray(billIdList) { // 收费组id 集合
      let aStr = ''
      billIdList = ['1001', '1002']
      billIdList.map((item, index) => {
        aStr += `<a style="color: #409EFF;cursor: pointer" @click="getInfo(` + item + `)">` + item + `</a>,`
      })

      return aStr
    },
    getOrderInfo(id) { // 跳转订单详情
      this.$router.push({ name: 'bill-statement-info-index', query: { id: id }})
    },
    show(orderStatus) {
      let str = ''
      switch (orderStatus) {
        case '0':
          str = '未支付'
          break
        case '1':
          str = '已支付'
          break
        case '2':
          str = '正在支付'
          break
        case '3':
          str = '已关闭'
          break
      }

      return str
    }
  }
}
</script>

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