<template>
  <div>
    <div v-if="showCard" >
      <div class="card-box" :style="{'background': background}">
        <div style="font-size: large;font-weight: 600;margin-top: 10px;margin-bottom: 20px;color:#606266">
          <span>审核信息</span>
        </div>
        <Form ref="form" :value="auditForm" labelWidth="150px" :disabled="disabled">
          <Radio prop="status" :data="[{value:2,label:'通过'},{value:3,label:'驳回'}]" label="审核结果" @change="change" required></Radio>
          <br/>
          <Input prop="rejectReason" :width="remarkWidth" type="textarea" :label="auditForm.status == 3 ? '驳回原因' : '审核意见'" :required="auditForm.status == '3'" :maxlength="250"/>
        </Form>
      </div>
      <div style="display: flex;align-items: center;justify-content: center;margin-top:10px" v-if="showSubmit" class="bottom-div">
        <el-button  @click="goBack" >返回</el-button>
        <el-button type="primary" @click="submitAudit" >提交审核</el-button>
      </div>
    </div>

    <div v-if="!showCard">
      <Form  ref="form" :value="auditForm" labelWidth="150px" :disabled="disabled">
        <Radio prop="status" :data="[{value:2,label:'通过'},{value:3,label:'驳回'}]" label="审核结果" @change="change" required></Radio>
        <br/>
        <Input prop="rejectReason" type="textarea" :width="remarkWidth" :label="auditForm.status == 3 ? '驳回原因' : '审核意见'" :required="auditForm.status == '3'" :maxlength="250"/>
      </Form>
      <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px" v-if="showSubmit" class="bottom-div">
        <el-button  @click="goBack" >返回</el-button>
        <el-button type="primary" @click="submitAudit" :loading="loading">提交审核</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AuditForm",
  props:{
    showSubmit:{
      type: Boolean,
      default: false
    },
    showCard:{
      type: Boolean,
      default: false
    },
    type:{
      type:String
    },
    remarkWidth:{
      type: String,
      default: '640px'
    },
    background:{
      type: String,
      default:'#fff'
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      auditForm:{},
      flag:null,
      isDisabled: false,
    }
  },
  computed:{
    disabled(){
      return this.type == 'detail' || this.isDisabled
    }
  },
  methods:{
    goBack(){
      this.$emit('goBack')
    },
    change(value){
      if(this.flag != null){
        this.$set(this.auditForm,'rejectReason','')
      }
      this.flag = value
      this.$nextTick(()=>{
        this.$refs.form.clearValidate()
      })
    },
    setValue(obj){
      const {status,rejectReason,isDisabled} = obj
      this.$set(this.auditForm,'status',Number(status))
      this.$set(this.auditForm,'rejectReason',rejectReason)
      this.isDisabled = isDisabled
    },
    async checkForm(){
      return  await this.$refs.form.validate()
    },
    async submitAudit() {
      await this.$refs.form.validate()
      this.$emit('submitAudit', this.auditForm)
    }
  }
}
</script>

<style scoped>
.bottom-div {
  text-align: center;
  background-color: #D4DAE7;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center
}
.card-box{
  height: 100%; padding: 16px 22px 16px 25px;margin-bottom: 16px;
}
</style>
