<template>
  <!-- 增加修改 -->
  <a-modal width="35%" :label-col="4" :wrapper-col="14" :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="保险类型" prop="insuranceType">
        <a-input v-model="form.insuranceType" placeholder="请输入" />
      </a-form-model-item> -->
      <a-form-model-item label="保险类型" prop="insuranceType">
        <a-select placeholder="请选择保险类型" v-model="form.insuranceType">
          <a-select-option v-for="(d, index) in insuranceTypeOptions" :key="index" :value="d.value">{{
            d.label
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="保费" prop="insuranceExpense">
        <a-input v-model="form.insuranceExpense" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="保额" prop="insuranceInsured">
        <a-input v-model="form.insuranceInsured" placeholder="请输入" />
      </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: {
    insuranceTypeOptions: {
      type: Array,
      required: true,
    },
  },
  components: {},
  data() {
    return {
      formTitle: '增加',
      // 表单参数
      form: {
        insuranceType: undefined,
        insuranceExpense: undefined,
        insuranceInsured: undefined,
      },
      visible: false,
      rules: {
        insuranceType: [{ required: true, message: '报销类型不能为空', trigger: 'change' }],
        insuranceExpense: [{ required: true, message: '保费不能为空', trigger: 'blur' }],
        insuranceInsured: [{ required: true, message: '保额不能为空', trigger: 'blur' }],
      },
    }
  },
  filters: {},
  created() {},
  computed: {},
  watch: {},
  methods: {
    onClose() {
      this.visible = false
    },
    // 取消按钮
    cancel() {
      this.visible = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        insuranceType: undefined,
        insuranceExpense: undefined,
        insuranceInsured: undefined,
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.visible = true
      this.reset()
    },
    /** 提交按钮 */

    handleOk() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          this.$emit('add', this.form)
          this.onClose()
        }
      })
    },
  },
}
</script>
