<template>
  <!-- 增加修改 -->
  <a-modal width="35%" :label-col="4" :wrapper-col="8" :visible="visible" @cancel="onClose" @ok="handleOk">
    <a-divider orientation="left">
      <b>钥匙柜提示编辑</b>
    </a-divider>
    <a-form-model ref="form2" :model="form" :rules="rules">
      <a-form-model-item label="标题" v-if="formType == 1">
        <a-input v-model="form['key.title']" placeholder="请输入" :maxLength=7 />
      </a-form-model-item>
      <a-form-model-item label="描述一" v-if="formType == 2">
        <a-input v-model="form['key.text1']" placeholder="请输入" :maxLength=7 />
      </a-form-model-item>
      <a-form-model-item label="描述二" v-if="formType == 3">
        <a-input v-model="form['key.text2']" placeholder="请输入" :maxLength=7 />
      </a-form-model-item>
      <a-form-model-item label="描述三" v-if="formType == 4">
        <a-input v-model="form['key.text3']" placeholder="请输入" :maxLength=7 />
      </a-form-model-item>
      <!-- <div class="bottom-control">
          <a-space>
            <a-button type="primary" @click="submitForm"> 保存11111111 </a-button>
            <a-button type="dashed" @click="onClose"> 取消 </a-button>
          </a-space>
        </div> -->
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  name: 'CreateSubForm',
  props: {
    list: Object,
    formType: Number,
  },
  components: {},
  data() {
    return {
      formTitle: '增加',
      // 表单参数
      form: {
        'key.text1': undefined,
        'key.text1': undefined,
        'key.text1': undefined,
      },
      visible: false,
      rules: {
        // 'key.title': [{ required: true, message: '标题不能为空', trigger: 'change' }],
        // 'key.text1': [{ required: true, message: '保费不能为空', trigger: 'blur' }],
        // 'key.text2': [{ required: true, message: '保额不能为空', trigger: 'blur' }],
        // 'key.text3': [{ required: true, message: '保额不能为空', trigger: 'blur' }],
      },
    }
  },
  filters: {},
  created() {},
  computed: {},
  //   watch: {
  //     list: {
  //       handler(val) {
  //         console.log('--------==',val);
  //         this.form = val
  //       },
  //       deep: true,
  //       immediate: true,
  //     },
  //   },
  methods: {
    onClose() {
      this.visible = false
      this.reset()
    },
    // 取消按钮
    cancel() {
      this.visible = false
      this.reset()
    },
    show(data) {
      this.form = data
      this.visible = true
    },
    // 表单重置
    reset() {
      this.form = {
        'key.title': undefined,
        'key.text1': undefined,
        'key.text2': undefined,
        'key.text3': undefined,
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.visible = true
      this.reset()
    },
    /** 提交按钮 */

    handleOk() {
      let val = {}
      if (this.formType == 1) {
        val = {
          content: this.form['key.title'],
          type: 'key.title',
        }
      }
      if (this.formType == 2) {
        val = {
          content: this.form['key.text1'],
          type: 'key.text1',
        }
      }
      if (this.formType == 3) {
        val = {
          content: this.form['key.text2'],
          type: 'key.text2',
        }
      }
      if (this.formType == 4) {
        val = {
          content: this.form['key.text3'],
          type: 'key.text3',
        }
      }
      this.$refs.form2.validate((valid) => {
        if (valid) {
          this.$emit('add', val)
          this.onClose()
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-modal {
  margin-top: 200px;
}
</style>
