<template>
  <div>
    <h1>{{ action }}</h1>
    <a-form-model ref="ruleForm" :model="editData"  :rules="rules" >
      <a-form-model-item label="主题" prop="subject">
        <a-input v-model="editData.subject"/>
      </a-form-model-item>
      <a-form-model-item label="交易" prop="deal">
        <a-input v-model="editData.deal"/>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="onSubmit">确认</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import {Modal} from "ant-design-vue";

export default {
  name: "edit",
  data() {
    return {
      rules: {
        subject: [
          { required: true, message: '请输入主题', trigger: 'change' }
        ],
        deal: [
          { required: true, message: '请输入交易', trigger: 'change' }
        ]
      },
      editData:this.form
    }
  },
  methods:{
    onSubmit:function (){
      let that=this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if(this.action.includes('编辑')) {
            that.$emit('close')
          }else{
            that.$emit('onAdd')
          }
        } else {
          Modal.error({
            title:'错误提示',
            content:'表单校验失败'
          })
          return false;
        }
      });
    }
  },
  props: {
    action: String,
    form: Object,
  }
}
</script>

<style scoped>

</style>