<template>
  <div id="payDetail" class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="search-container">
      <el-input v-model="listQuery.search_name" type="text" style="width:300px" placeholder="代理昵称/手机号" />
      <el-input v-model="listQuery.pay_no" type="text" style="width:300px" placeholder="支付流水号" />
      <el-select v-model="listQuery.type">
        <el-option label="全部" value="" />
        <el-option label="后台充值" value="0" />
        <el-option label="支付" value="1" />
        <el-option label="退回" value="2" />
        <el-option label="扣款" value="3" />
      </el-select>
      <el-date-picker
        v-model="listQuery.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
      />
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button type="primary" @click="toExport">导出</el-button>
    </div>
    <el-table
      border
      stripe
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      :data="tableList"
    >
      <el-table-column
        prop="pay_num"
        label="支付流水号"
        width="230"
      />
      <el-table-column
        prop="order_num"
        label="订单号"
        width="200"
      />
      <el-table-column
        prop="created_at"
        label="时间"
        width="160"
      />
      <el-table-column
        prop="user"
        label="昵称"
      >
        <span slot-scope="{ row }">{{ row.user && row.user.nickname }}</span>
      </el-table-column>
      <el-table-column
        prop="user"
        label="姓名"
      >
        <span slot-scope="{ row }">{{ row.user && row.user.realname }}</span>
      </el-table-column>
      <el-table-column
        prop="user"
        label="手机号"
        width="130"
      >
        <span slot-scope="{ row }">{{ row.user && row.user.mobile }}</span>
      </el-table-column>
      <el-table-column
        prop="type"
        label="摘要"
        width="120"
      >
        <span slot-scope="{ row }">{{ typeShow(row.type) }}</span>
      </el-table-column>
      <el-table-column
        prop="pay_money"
        label="金额"
        width="100"
      >
        <span slot-scope="{ row }">{{ parseMoney(row.pay_money) }}</span>
      </el-table-column>
      <el-table-column
        prop="style"
        label="支付方式"
      />
      <el-table-column
        prop="remark"
        label="备注"
      />
      <el-table-column
        prop="op_name"
        label="操作人"
      />
    </el-table>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>
<script>
// api
import { getList, toExport } from '@/api/finance/payDetail'
import { parseMoney } from '@/utils/index'
import { formatter } from '@/filters/index'
export default {
  data() {
    return {
      loadingFull: false,
      listQuery: {
        page_size: 10,
        page_index: 1,
        pay_no: '',
        search_name: '',
        type: '',
        time: ''
      },
      tableList: [],
      tableTotal: 0
    }
  },
  created() {
    this.parseMoney = parseMoney
    this.getList()
  },
  methods: {
    async getList() {
      this.loadingFull = true
      const { page_size, page_index, pay_no, search_name, type, time } = this.listQuery
      await getList({
        page_size, page_index, pay_no, search_name, type,
        start_time: time.length > 0 ? time[0] : '',
        end_time: time.length > 0 ? time[1] : ''
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.tableList = res.data.list
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    typeShow(status) {
      let out
      switch (status) {
        case 1:
          out = '支付'
          break
        case 2:
          out = '退回'
          break
        case 3:
          out = '扣款'
          break
        default:
          out = '后台充值'
      }
      return out
    },
    async toExport() {
      this.loadingFull = true
      const { time } = this.listQuery
      await toExport({
        pay_no: this.listQuery.pay_no,
        search_name: this.listQuery.search_name,
        type: this.listQuery.type,
        start_time: time.length > 0 ? time[0] : '',
        end_time: time.length > 0 ? time[1] : ''
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          if (res.data.length < 1) {
            this.$message.error('可有内容可导出')
          } else {
            import('@/vendor/Export2Excel').then(excel => {
              excel.export_json_to_excel({
                header: Object.keys(res.data[0]),
                data: res.data.map(listItem => Object.keys(res.data[0]).map(j => listItem[j])),
                filename: `${formatter(new Date(), 'yyyy-MM-dd')}收支明细`,
                bookType: 'xlsx'
              })
            })
          }
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  #payDetail {
    .search-container {
      margin-bottom: 15px;
      display: flex;
      justify-content: flex-start;

      button, /deep/ .el-input, /deep/ .el-select, /deep/ .el-range-editor  {
        margin-right: 10px;
      }
    }
  }
</style>
