<script>

export default {
  name: "authAdd",
  props: {
    instance: Function,
    permissions: Function,
    dict: Object
  },
  data() {
    return {
      detail: {},
    }
  },
  computed: {
    isAuditing: v => v.detail.auditStatus == 1
  },
  methods: {
    back(params = {}) {
      this.$router.push(params)
    },
    getDetail() {
      const {id} = this.$route.query
      this.instance.post("/api/user/auth/page", null, {params: {id}}).then(res => {
        if (res?.data?.records) {
          const detail = res.data.records[0] || {}
          let {picture = "{}"} = detail
          picture = JSON.parse(picture)
          this.detail = {...detail, ...picture}
        }
      })
    },
    getNeedCerts(type) {
      return this.$parent.certificates.filter(e => !e.permit || e.permit.includes(type))
    },
    handleAudit(auditStatus) {
      const auditLabels = {
        2: "同意通过", 3: "驳回"
      }
      this.$confirm(`是否要${auditLabels[auditStatus]}认证?`).then(() => {
        this.instance.post("/api/user/audit", null, {params:{
            id: this.detail.id, auditStatus
          }}).then(res => {
          if (res?.code == 0) {
            this.$confirm("是否要返回列表？","提交成功").then(() => this.back())
          }
        })
      })
    }
  },
  created() {
    this.dict.load("auditStatus")
    this.getDetail()
  }
}
</script>

<template>
  <ai-page title="认证材料" class="authAdd" showBack content-string="detail">
    <el-form size="small" label-position="top" :model="detail" ref="detail">
      <ai-card title="认证材料">
        <div class="grid">
          <el-form-item v-for="(op,i) in getNeedCerts(detail.type)" :key="i" v-bind="op" :rules="{required:true,message:`请上传${op.label}`,trigger:'change'}">
            <el-image :src="detail[op.prop]" :preview-src-list="[detail[op.prop]]"/>
          </el-form-item>
        </div>
      </ai-card>
      <ai-card title="备注说明">
        <div v-text="detail.remark"/>
      </ai-card>
    </el-form>
    <div slot="footer">
      <template v-if="isAuditing">
        <el-button type="primary" @click="handleAudit(2)">同意</el-button>
        <el-button type="danger" @click="handleAudit(3)">拒绝</el-button>
      </template>
      <el-button @click="back">关闭</el-button>
    </div>
  </ai-page>
</template>

<style scoped lang="scss">
.authAdd {
}
</style>
