<template>
  <el-dialog
  :visible.sync="isShow"
  @close="$emit('update:isShow',false)"
  :modal-append-to-body='false'
  width="652px"
  title="添加备注">
    <div class="dialog-box">
      <el-form :model="remarkForm" ref="remarkFormRef">
        <el-form-item prop="text" :rules="{required:true,message:'备注不能为空',trigger:'blur'}">
          <el-input v-model.trim="remarkForm.text" placeholder="请输入备注信息" type="textarea"
          style="width: 505px;" :rows="9"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="$emit('update:isShow',false)" class="dialog-footer-button">取消</el-button>
        <el-button @click="save" type="primary" class="dialog-footer-button" style="margin-left: 30px;">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default{
    props:{
      isShow:{
        type:Boolean,
        required:true
      }
    },
    data() {
      return {
        remarkForm:{
          text:''
        }
      }
    },
    watch:{
      isShow(value){
        if(value){
          this.remarkForm.text=""
          this.$refs.remarkFormRef && this.$refs.remarkFormRef.clearValidate()
        }
      }
    },
    methods: {
      save(){
        this.$refs.remarkFormRef.validate(valid=>{
          if(valid){
            this.$emit("saveRemark",this.remarkForm.text)
            this.$refs.remarkFormRef.resetFields()
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .dialog-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .dialog-footer{
      margin: 30px 0;
      .dialog-footer-button{
        height: 40px;
        width: 120px;
      }
    }
  }
</style>