<template>
  <div class="withdrawal">
    <!-- 表格 -->
    <el-table v-loading="loading" :data="payList">
      <el-table-column label="序号" align="center" prop="recordId" />
      <el-table-column label="测试宝账户" align="center" prop="accountId" />
      <el-table-column label="交易名称" align="center" prop="recordName" />
      <el-table-column label="交易金额" align="center" prop="record_amount">
        <template slot-scope="scope">
          {{ scope.row.recordAmount + '元' }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="交易类型" align="center" prop="record_type">
        <template slot-scope="scope">
          {{ resolveType(scope.row.record_type) }}
        </template>
      </el-table-column> -->
      <el-table-column label="充值状态" align="center" prop="recordStatus">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.recordStatus == 0" type="primary">处理中</el-tag>
          <el-tag v-if="scope.row.recordStatus == 1" type="success">已完成</el-tag>
          <el-tag v-if="scope.row.recordStatus == 2" type="warning">已取消</el-tag>
          <el-tag v-if="scope.row.recordStatus == 3" type="danger">已失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="充值时间" align="center" prop="record_time">
        <template slot-scope="scope">
          {{ parseTime(new Date(scope.row.recordTime)) }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            style="color: #1890ff !important"
            @click="lookDetail(scope.row.record_id)"
            >交易详情</el-button
          >
          <el-button v-if="scope.row.record_status == 0" size="mini" type="text" icon="el-icon-upload2" style="color: #1890ff !important" @click="uploadVoucher(scope.row)"
            >提交支付凭证</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页符 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize" @pagination="getList" />
    <!-- 详情弹层 -->
    <el-dialog title="记录详情" :visible.sync="detailShow" :close-on-click-modal="false" width="800px" append-to-body>
      <el-descriptions size="medium" border>
        <el-descriptions-item v-if="activeRecord.name" label="姓名">{{ activeRecord.name }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.sex" label="性别">{{ activeRecord.sex }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.phonenumber" label="手机号">{{ activeRecord.phonenumber }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.record_name" label="交易名称">{{ activeRecord.record_name }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.record_type" label="交易类型">{{resolveType(activeRecord.record_type)  }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.record_status" label="交易状态">
          <el-tag v-if="activeRecord.record_status == 0" type="primary">处理中</el-tag>
          <el-tag v-if="activeRecord.record_status == 1" type="success">已完成</el-tag>
          <el-tag v-if="activeRecord.record_status == 2" type="warning">已取消</el-tag>
          <el-tag v-if="activeRecord.record_status == 3" type="danger">已失败</el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.record_amount" label="交易金额">{{ activeRecord.record_amount }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.record_time" label="交易时间">{{parseTime(new Date(activeRecord.record_time))  }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.alipay" label="支付宝账户">{{ activeRecord.alipay }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.bank_deposit" label="开户行">{{ activeRecord.bank_deposit }}</el-descriptions-item>
        <el-descriptions-item v-if="activeRecord.bank_account" label="银行账户">{{ activeRecord.bank_account }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog title="上传支付凭证" v-if="uploadShow" :visible.sync="uploadShow" :close-on-click-modal="false" width="800px" append-to-body @close="cancel">
      <div style="align-items: center;display: flex;">
        支付凭证：
      <ImageUpload ref="imgupload" v-model="submitInfo.paymentRecord" listtype='picture-card' fileName="publicize" :limit="3" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRechargeList, getPayList, getPayDetail, uploadPayment } from '@/api/pay/withdrawal'
import ImageUpload from '@/components/ImgUpload/index.vue'
export default {
  name: 'withdrawal',
  components: { ImageUpload },
  data() {
    return {
      loading: false, //列表loading加载
      payList: [], //支付列表
      total: 0,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
      },
      detailShow: false, // 详情弹层
      uploadShow: false, //上传弹层
      activeRecord: {},
      imgUrl: '',
      // 提交信息
      submitInfo: {
        recordId: '',
        recordStatus: 1,
        paymentRecord: [],
      },
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取列表
     /**
     * 交易类型
     * 0：充值记录
     *:1：提现记录
     *:2：支出记录
     *:3：收入记录
     */
    async getList() {
      this.loading = true
      try {
        const res = await getRechargeList(this.queryParam)
        // this.total = res.total
        this.payList = res.filter(it => it.recordType == 0)
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // 查看详情
    async lookDetail(recordId) {
      try {
        const res = await getPayDetail(recordId)
        console.log(res)
        this.activeRecord = res
        this.detailShow = true
      } catch (error) {
      }
    },
    // 提交支付凭证
    uploadVoucher(row) {
      this.uploadShow = true
      this.submitInfo.recordId = row.record_id
    },
    // 提交支付凭证
    async submit() {
      try {
        if (!this.submitInfo.paymentRecord.length) {
          return this.$message.warning('请先上传支付凭证！')
        }
        const data = {
          recordId: this.submitInfo.recordId,
          recordStatus: this.submitInfo.recordStatus,
          paymentRecord: this.submitInfo.paymentRecord.join(','),
        }
        await uploadPayment(data)
        this.$message.success('提交成功')
        this.getList()
        this.cancel()
      } catch (error) {
        this.cancel()
      }
    },

    // 支付凭证取消
    cancel() {
      this.submitInfo.recordId = ''
      this.submitInfo.paymentRecord = []
      this.$refs.imgupload.fileList = []
      this.uploadShow = false
    },

    // 交易类型
    resolveType(val) {
      if (val == 0) {
        return '充值记录'
      } else if (val == 1) {
        return '提现记录'
      } else if (val == 2) {
        return '支出记录'
      } else if (val == 3) {
        return '收入记录'
      }
    },
  },
}
</script>

<style scoped lang="scss">
</style>