<template>
  <el-dialog title="设置天数" :visible="isShow" width="400px" @close="handleCancel">
    <el-form ref="form" :model="form" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="天数" prop="days">
            <el-input-number v-model="form.days" style="text-align:left;" :controls="false" placeholder="请输入" size="small"></el-input-number> <span>天</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  //import引入组件才能使用
  props: {
    isOpen: Boolean
  },
  components: {},
  data() {
    return {
      rules: {
        days: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },
      form: {
        days: undefined
      },
      isShow: false
    };
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {
    isOpen: {
      handler(val) {
        if (val) {
          this.handleInitForm()
        }
        this.isShow = val
      },
      deep: true,
      immediate: true
    }
  },
  // 方法集合
  methods: {
    handleInitForm() {
      this.$nextTick(() => {
        this.form.days = undefined
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    handleCancel() {
      this.$emit('onCancel')
    },
    handleConfirm() {
      this.$refs.form.validate((bool) => {
        if (bool) {
          this.$emit('onConfirm')
        }
      })
    },
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {

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

  },
}
</script>
<style scoped>
</style>