<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width="800"
    :confirm-loading="loading"
    title="创建表单"
    :body-style="{ paddingBottom: '8px' }"
    :visible="addVisible"
    @ok="save"
    @cancel="cancel"
  >
    <a-form
      layout="horizontal"
      :form="form"
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
      <a-form-item label="表单内部名称:" name="innerTitle">
        <a-input
          v-decorator="['innerTitle', { rules: [{ required: true, message: '请输入表单内部名称' }] }]"
          placeholder="请输入表单内部名称"
        >
        </a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { createFormDetailPage } from '@/api/common'

export default {
  name: 'TeDetailPageAdd',
  props: {
    // 弹窗是否打开
    addVisible: Boolean
  },
  data() {
    return {
      // 提交状态
      loading: false,
      form: this.$form.createForm(this, { name: 'dynamic_rule' })
    }
  },
  watch: {},
  methods: {
    /**
     * 保存和编辑
     *
     * @author zs
     * @date 2021/09/02 18:35
     */
    async save() {
      // 校验表单
      this.form.validateFields(async err => {
        if (!err) {
          try {
            console.info('success')
            // 修改加载框为正在加载
            this.loading = true
            const formObj = this.form.getFieldsValue()
            // 执行新增
            const result = await createFormDetailPage({ title: formObj.innerTitle, sub_title: formObj.innerTitle })
            console.log(result)
            this.loading = false
            this.$message.success('创建成功！')
            this.$emit('closeAddModal')

            this.$router.push(`/formDesign/${result.data.pid}`)
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    cancel() {
      this.$emit('closeAddModal')
    },
  }
}
</script>
