<template>
  <el-row class="app-container">
    <el-card class="box-card">
      <el-descriptions title="申请详情" v-loading="loading">
        <template slot="extra">
          <el-button type="warning" icon="el-icon-s-check" plain @click="handleVerify" v-if="isApproving">审核</el-button>
        </template>
        <el-descriptions-item label="申请用户">{{detail.userName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{detail.createTime | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="申请状态" >
          <dict-tag :value="detail.status" :options="dict.type.ss_mch_apply_status" size="mini"/>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">{{detail.name | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="手机号" :span="2">{{detail.mobile | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="详细信息" :span="3">{{detail.content | defaultValue}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card" v-if="!isApproving">
      <el-descriptions title="审核详情" v-loading="loading">
        <el-descriptions-item label="审核人">{{detail.verifyName | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="审核时间">{{detail.verifyTime | defaultValue}}</el-descriptions-item>
        <el-descriptions-item label="审核意见">{{detail.verifyRemark | defaultValue}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!--审核弹窗-->
    <simple-verify-dialog
      :show.sync="showVerify"
      @reject="onReject"
      @pass="onPass"
    />

  </el-row>
</template>

<script>
import { getMchApply, verifyMchApply } from '@/api/ss/mchApply'
import SimpleVerifyDialog from '@/components/SimpleVerifyDialog/index.vue'

export default {
  name: 'MchApplyDetail',
  components: { SimpleVerifyDialog },
  dicts: ['ss_mch_apply_status'],
  data() {
    return {
      detail: {},
      loading: false,
      showVerify: false,
    }
  },
  computed: {
    // 审核中
    isApproving() {
      return this.detail.status === '0';
    }
  },
  created() {
    this.getDetail(this.$route.query.applyId);
  },
  methods: {
    onPass(form) {
      verifyMchApply(this.detail.applyId, true, form.remark).then(res => {
        if (res.code !== 200) {
          return this.$message.error(res.msg);
        }
        this.$message.success('审核成功');
        this.showVerify = false;
        this.getDetail(this.detail.applyId);
      })
    },
    onReject(form) {
      verifyMchApply(this.detail.applyId, false, form.remark).then(res => {
        if (res.code !== 200) {
          return this.$message.error(res.msg);
        }
        this.$message.success('驳回成功');
        this.showVerify = false;
        this.getDetail(this.detail.applyId);
      })
    },
    handleVerify() {
      this.showVerify = true;
    },
    getDetail(applyId) {
      if (applyId == null) {
        return this.$message.error('参数错误：applyId不允许为空');
      }
      this.loading = true;
      getMchApply(applyId).then(response => {
        this.detail = response.data;
      }).finally(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container .box-card:nth-child(n + 1) {
  margin-top: 1em;
}
</style>
