<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch :loading="loading" :search-form="searchForm" @onValueChange="onValueChange" @submit="onSubmit"/>
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="true"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :actions-width="120"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :alertTip="alertTip"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
      @onResponse="onResponse"
    />
    <Dialog ref="dialog">
      <template slot="content"/>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'
import { paymentOrderManualRGTXAudit, withdrawssetRmbNote, rmbPaymentOrderSetIsLocked } from '@/api/data'

export default {
  components: {
    Dialog
  },
  data() {
    const statusOpt = [
      {
        value: 0,
        label: '待处理'
      },
      {
        value: 1,
        label: '处理中'
      },
      {
        value: 2,
        label: '成功'
      },
      {
        value: 3,
        label: '失败'
      },
      {
        value: 4,
        label: '待用户提交凭证'
      },
      {
        value: 5,
        label: '待人工审核'
      },
      {
        value: 6,
        label: '已撤回'
      }
    ]
    return {
      loading: false,
      alertTip:'',
      searchForm: [
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          clearable: false
        },
        {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
        {
          label: '状态',
          type: 'select',
          prop: 'status',
          clearable: true,
          options: statusOpt
        }
      ],
      columns: [
        {
          label: '会员ID',
          prop: 'member_id',
          width: 120
        },
        {
          label: '会员昵称',
          popover: true,
          width: 140,
          props: ['first_name'],
          tagType: (row) => row?.status === 1 ? 'danger' : '',
          options: [
            {
              label: '会员ID',
              value: ['member_id']
            },
            {
              label: '用户名称',
              value: ['first_name']
            },
            {
              label: '异常信息',
              vShow: (row) => row?.admin_note ? true : false,
              value: ['admin_note']
            }
          ]
        },
        {
          label: '订单号',
          prop: 'order_no'
        },
        {
          label: '提现金额',
          prop: 'amount',
          method: (row) => Number(row.amount)?.toFixed(2)
        },
        {
          label: '银行卡',
          width: '180px',
          html: true,
          method: (row) => `${row?.account}（${row?.bank_name}）<br/>账户：${row?.card_no} `
        },
        {
          label: '手续费',
          prop: 'fee',
          method: (row) => Number(row.fee)?.toFixed(2)
        },
        {
          label: '类型',
          prop: 'type',
          method: (row) => {
            const typeMap = {
              1: '代收',
              2: '代付',
              3: '人工充值',
              4: '人工提现'
            };
            return typeMap[row.type] || '';
          }
        },
        {
          label: '是否加锁',
          prop: 'is_locked',
          method: (row) => row.is_locked === 1 ? '是' : '否'
        },
        {
          label: '状态',
          method: (row) => {
            return statusOpt.filter(item => item.value === row.status)[0]?.label
          }
        },
        {
          label: '原因',
          prop: 'remark'
        },
        {
          label: '备注',
          prop: 'admin_note'
        },
        {
          label: '申请时间',
          prop: 'created_at'
        }
      ],
      rowsActions: [
        {
          key: 'lock',
          label: '上锁',
          vIF: (row) => row.status === 0 && row.is_locked === 0,
          method: (row) => {
            this.$confirm(`确定要上锁吗?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              rmbPaymentOrderSetIsLocked({
                ids: [row.id],
                is_locked: 1
              }).then(() => {
                this.onSubmit()
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
              })
            }).catch(() => {})
          }
        },
        {
          key: 'unlock',
          label: '解锁',
          vIF: (row) => row.status === 0 && row.is_locked === 1,
          method: (row) => {
            this.$confirm(`确定要解锁吗?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              rmbPaymentOrderSetIsLocked({
                ids: [row.id],
                is_locked: 0
              }).then(() => {
                this.onSubmit()
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
              })
            }).catch(() => {})
          }
        },
        {
          key: 'no',
          label: '驳回',
          vIF: (row) => row.status === 0,
          method: (row) => {
            this.getStatus({ ids: [row.id], status: 3 })
          }
        },
        {
          key: 'yes',
          label: '通过',
          vIF: (row) => row.status === 0,
          method: (row) => {
            this.getStatus({ ids: [row.id], status: 1 })
          }
        },
        {
          key: 'note',
          label: '备注',
          method: (row) => {
            this.$prompt('请输入备注', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPattern: /^\S+$/,
              inputErrorMessage: '请输入备注'
            }).then(({ value }) => {
              withdrawssetRmbNote({
                id: row.id,
                admin_note: value
              })
                .then(() => {
                  this.onSubmit()
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                })
            })
          }
        }
      ],
      apis: {
        list: {
          url: 'withdraw/rmb',
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        },
        pass: {
          url: 'paymentOrder/manualAudit',
          method: 'post',
          params: ['ids'],
          status: ['status'],
          statusValue: 1,
        },
        reject: {
          url: 'paymentOrder/manualAudit',
          method: 'post',
          params: ['ids'],
          status: ['status'],
          statusValue: 3,
          remark: ['remark']
        }
      },
      tableOptions: {
        reject: {
          show: true
        },
        pass: {
          show: false
        }
      },
      editForm: [],
      editConfig: {}
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    onResponse(data) {
      this.alertTip = `总金额：${data.total_amount}(RMB)；已处理：${data.total_success}(RMB)；失败金额：${data.total_fail}(RMB)`
    },
    getStatus(row) {
      if (row.status === 3) {
        this.$prompt('请输入原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\S+$/,
          inputErrorMessage: '请输入原因'
        }).then(({ value }) => {
          paymentOrderManualRGTXAudit({
            ...row,
            is_rgtx: 1,
            remark: value
          })
            .then(() => {
              this.onSubmit()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            })
        })
      } else {
        this.$confirm(`确定通过审核?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          paymentOrderManualRGTXAudit({...row,  is_rgtx: 1,})
            .then(() => {
              this.onSubmit()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            })
        })
      }
    },
    onValueChange(val) {

    },
    onSubmit(params) {
      this.$refs.table.getList({...params, type: 4})
    }
  }
}
</script>
