<!--
 * @Description:  审核弹窗
 * @Author: ymz
 * @Date: 2021-12-03 14:43:04
 * @LastEditTime: 2021-12-03 16:09:46
 * @LastEditors: ymz
 * @Reference: 
-->
<template>
<div>
  <el-dialog
    title="审核"
    :visible.sync="isShow"
    width="50%"
    @close='closeDialog'
    center>
    <div class="dialog-content">
      <div class="title">
        <span>审批意见</span>
      </div>
      <div class="form">
        <el-form ref="form" :model="formData">
          <el-form-item label="审批意见：" required label-width='120px' prop="opinion">
            <el-radio-group  v-model="formData.opinion">
              <el-radio label="0">通过</el-radio>
              <el-radio label="1">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="说明：" label-width='120px' :required='required' prop="explain">
            <el-input type="textarea" v-model.trim="formData.explain"></el-input>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>


export default {
//import 引入的组件需要注入到对象中才能使用
components:{},
props:{
  show:{
    type:Boolean,
    default:false,
  },
  // 如果说明为必填为true 默认false
  required:{
    type:Boolean,
    default:false
  }

},
data(){
//这里存数据
  return{
    isShow:false,
    formData:{
      opinion:'',
      explain:'',
    }
  };
},
//计算属性
computed: {

},
//监控data中数据变化
watch: {
  show:{
    handler(val){
      this.isShow = val
    },
    immediate:true
  }
},
//方法
methods: {
  closeDialog(){
    this.$emit('update:show', false)
  },
  submit(){
    this.$message.closeAll()
    if(!this.formData.opinion){
      this.$message.error('请选择审批意见！')
      return
    }
    if(this.required && !this.formData.explain){
       this.$message.error('请输入说明！')
      return
    }
    this.$refs.form.resetFields()
    this.$emit('submit',this.formData)
    
  }

},
//声明周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {},//生命周期 - 创建之前
beforeMount() {},//生命周期 - 挂载之前
beforeUpdate() {},//声明周期 - 更新之前
updated() {},//生命周期 - 更新之后
beforeDestroy() {},//生命周期 - 销毁之前
destroyed() {},//生命周期 - 销毁之后
activated() {},//缓存keep-alive
};
</script>

<style scoped lang='scss'>
  .title{
    font-size: 15px;
    font-weight: 600;
    color: #000;
    line-height: 25px;
    border-bottom: 1px solid #ccc;
  }
  .form{
    margin-top: 15px;
  }

</style>