<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="12">
      <el-col :span="isApproving ? 12 : 24">
        <el-row :gutter="12">
          <el-col :span="isApproving ? 24 : 12">
            <el-card class="card-box" header="申请信息">
              <el-descriptions :column="2">
                <el-descriptions-item label="提现单号">{{detail.billNo | defaultValue}}</el-descriptions-item>
                <el-descriptions-item label="申请用户">
                  <user-link :id="detail.userId" :name="detail.userName"/>
                </el-descriptions-item>
                <el-descriptions-item label="申请时间">{{detail.createTime | defaultValue}}</el-descriptions-item>
                <el-descriptions-item label="提现方式">
                  {{detail.channelName}}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>

            <el-card class="card-box">
              <el-row type="flex">
                <el-statistic title="提现金额" :value="detail.money" suffix="元" :precision="2"/>
                <el-statistic title="到账金额" suffix="元">
                  <template #formatter>
                    <span style="color: rgba(255,9,0,0.74)">{{detail.arrivalAmount | money}}</span>
                  </template>
                </el-statistic>
                <el-statistic title="余额" :value="detail.afterBalance" suffix="元" :precision="2"/>
                <el-statistic title="服务费" :value="detail.serviceCharge" suffix="元" :precision="2"/>
              </el-row>
            </el-card>
          </el-col>

          <el-col  v-if="!isApproving" :span="12">
            <el-card class="card-box" header="审核信息" >
              <el-descriptions :column="2" >
                <el-descriptions-item label="提现状态">
                  <dict-tag :value="detail.status" :options="dict.type.withdraw_status" size="small"/>
                </el-descriptions-item>
                <el-descriptions-item label="打款方式">
                  <dict-tag :value="detail.withdrawType" :options="dict.type.withdraw_type" size="small"/>
                </el-descriptions-item>
                <el-descriptions-item label="到账时间">{{detail.payTime | defaultValue}}</el-descriptions-item>
                <el-descriptions-item label="审核意见" :span="4">{{detail.remark | defaultValue}}</el-descriptions-item>
                <el-descriptions-item label="用户线下收款码">
                  <image-preview :src="detail.offlineImage" :width="80" :height="80"/>
                </el-descriptions-item>
                <el-descriptions-item label="线下支付凭证">
                  <image-preview :src="detail.payPicture" :width="80" :height="80"/>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>

        <el-card class="card-box" v-if="!isApproving">
          <el-tabs>
            <el-tab-pane label="转账信息" lazy>
              <transfer v-if="detail.billId != null" :query="{bstId: detail.billId, bstType: TransferBstType.WITHDRAW}" :view="views.withdraw"/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col v-show="isApproving" v-hasPermi="['system:bill:approval']" :span="12">
        <el-card class="card-box" header="审核">
          <el-form ref="form" :model="detail" :rules="approvalRules" label-width="6em">
            <el-row>
              <el-col :span="24">
                <el-form-item label="提现状态" prop="status" >
                  <dict-tag :value="detail.status" :options="dict.type.withdraw_status" size="small"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="打款方式" prop="withdrawType">
                  <el-radio-group v-model="detail.withdrawType" @change="onChangeWithdrawType">
                    <el-radio v-for="dict in dict.type.withdraw_type" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <template v-if="detail.withdrawType === '2'">
                <form-col :span="12" label="用户收款码" label-width="7em" prop="offlineImage">
                  <image-upload v-model="detail.offlineImage" />
                </form-col>
                <form-col :span="12" label="支付凭证" prop="payPicture">
                  <image-upload v-model="detail.payPicture"/>
                </form-col>
              </template>
            </el-row>
            <el-form-item label-width="0">
              <el-input v-model="detail.remark" type="textarea" placeholder="请输入审核意见" maxlength="500" :rows="5" show-word-limit/>
            </el-form-item>
          </el-form>
          <el-row type="flex" style="justify-content: flex-end">
            <el-button type="success" @click="pass" v-hasPermi="['system:bill:approval']" icon="el-icon-check">通过并打款</el-button>
            <el-button type="danger" @click="reject" v-hasPermi="['system:bill:approval']" icon="el-icon-close">驳回</el-button>
          </el-row>
        </el-card>
      </el-col>
    </el-row>



  </div>
</template>

<script>
import { getWithdraw, passWithDrawBill, rejectWithDrawBill } from '@/api/system/withdraw'
import { AccountType, TransferBstType, views, WithdrawType } from '@/utils/constants'
import { getUserAccountByType } from '@/api/ss/account'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import Transfer from '@/views/ss/transfer/index.vue'

export default {
  name: 'Withdraw/:billId',
  computed: {
    views() {
      return views
    },
    TransferBstType() {
      return TransferBstType
    },
    isApproving() {
      return this.detail.status === '11'
    }
  },
  components: { Transfer, UserLink },
  dicts: ['channel_type','withdraw_status', 'withdraw_type'],
  data() {
    return {
      id: null,
      loading: false,
      detail: {},
      suitUsingType: ['info', 'warning', 'success', 'danger'],
      suitUsingText: ['未知', '未生效', '使用中', '已失效'],

      approvalRules: {
        withdrawType: [
          { required: true, message: "请选择打款方式", trigger: "blur"}
        ],
        offlineImage: [
          { required: true, message: "请上传收款二维码", trigger: "blur"}
        ]
      }
    }
  },
  created() {
    this.id = this.$route.params.billId;
    this.getDetail(this.id);
  },
  methods: {
    onChangeWithdrawType(val) {
      if (val === WithdrawType.OFFLINE && this.detail.offlineImage == null) {
        getUserAccountByType(this.detail.userId, AccountType.OFFLINE_IMAGE).then(res => {
          if (res.code === 200 && res.data != null) {
            this.detail.offlineImage = res.data.map(item => item.accountNo).join(",");
          } else {
            this.detail.offlineImage = null;
          }
        })
      }
    },
    getDetail(id) {
      this.loading = true;
      getWithdraw(id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    pass() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$confirm("确定通过审核吗？", "通过", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            passWithDrawBill(this.detail).then(res => {
              if (res.code !== 200) {
                return this.$message.error(res.msg);
              }
              this.$message.success("通过成功");
              this.getDetail(this.id);
            })
          })
        }
      })
    },
    reject() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$confirm("确定驳回吗？", "驳回", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            rejectWithDrawBill(this.detail).then(res => {
              if (res.code !== 200) {
                return this.$message.error(res.msg);
              }
              this.$message.success("驳回成功");
              this.getDetail(this.id);
            })
          })
        }
      });
    },
  }
}
</script>
