<template>
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" label-width="80px">
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="审核状态" style="width:500px">
          <el-option v-for="status in statusList" :key="status.value" :value="status.value" :label="status.label" />
        </el-select>
      </el-form-item>

      <el-form-item label="客户公司" prop="customer">
        <el-select v-model="ruleForm.customer" placeholder="客户公司" style="width:500px">
          <el-option />
        </el-select>
      </el-form-item>

      <el-form-item label="审核备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" placeholder="审核备注" style="width:500px" />
      </el-form-item>

      <el-form-item class="flex-end" style="width:570px">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
  // status //审核状态
  // customer //客户公司
  // remark //审核备注

export default {
  data(){
    return {
      statusList:[
        {value:'1', label:'通过'},
        {value:'0', label:'驳回'}
      ],
      ruleForm:{
        customer:"",
        status:"",
        remark:""
      }
    }
  },
  computed:{
    rules(){
      return {
      customer:[
        {
          required:true,
          trigger:'change',
          message:'请选择客户公司'
        }
      ],
      status:[
        {
          required:true,
          trigger:'change',
          message:'请选择审核状态'
        }
      ],
      remark:[
        {
          required:this.ruleForm.status === '0',
          trigger:'change',
          message:'请输入审核备注'
        }
      ],
     }
    }
  },
  methods:{
        async onSubmit(){
          try {
            await this.$refs.ruleForm.validate()
            //todo...
            this.$emit('refresh')
          }catch(err){
            console.log(err)
          }
      }
    }
}
</script>
