<template>
  <a-modal
    :confirm-loading="loading"
    :destroyOnClose="true"
    :title="resolvedTitle? resolvedTitle : businessTitle"
    :visible="visible"
    :width="`${xAddFormLayoutWidth}vw`"
    :zIndex="1001"
    okText="提交"
    @cancel="close"
    @ok="$refs.nativeForm.onSubmit()">
    <x-add-native-form
      ref="nativeForm"
      @afterSubmit="afterSubmit"
      @onSubmit="onSubmit"
      @x-form-item-emit-func="emitFunc">
      <template slot="groupFormItems" slot-scope="{form, model, rules, modifyModelData}">
        <slot name="groupFormItems" :form="form" :model="model" :rules="rules" :modifyModelData="modifyModelData"></slot>
      </template>
    </x-add-native-form>
  </a-modal>
</template>
<script>
import { mapState } from 'vuex'
import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'

export default {
    name: 'XAddForm',
    components: {
      XAddNativeForm,
    },
    props: {},
    data () {
      return {
        // 业务类型
        businessType: '',
        // 业务标题
        title: '',
        // 自定义标题
        resolvedTitle: '',
        // 新增或修改业务是否执行中
        loading: false,
        // 是否显示新增/修改模态框
        visible: false,
        // 本地编辑模式
        localEditMode: false,
        // 弹出表单宽度
        xAddFormLayoutWidth: 68
      }
    },
    computed: {
      businessTitle () {
        return this.businessType + this.title
      },
      ...mapState('account', { currUser: 'user' })
    },
    methods: {
      init (params) {
        params.showSubmitBtn = false
        const {
          businessType, title, customTitle, xAddFormLayout, localEditMode, xAddFormLayoutWidth = 68
        } = params
        if (xAddFormLayout) {
          params.layout = xAddFormLayout
        }
        this.businessType = businessType
        this.xAddFormLayoutWidth = xAddFormLayoutWidth
        this.title = title
        this.resolvedTitle = customTitle
        this.localEditMode = localEditMode
        this.visible = true
        const that = this
        that.$nextTick(() => {
          that.$refs.nativeForm.init(params)
        })
      },
      close () {
        this.loading = false
        this.visible = false
      },
      onSubmit (params) {
        this.loading = true
        const modalClose = () => {
          this.loading = false
          this.close()
        }
        if (this.localEditMode) {
          // 交由父级处理
          this.$emit('onLocalSubmit', params, modalClose)
        } else if (this.$listeners.onSubmit) {
          // 交由父级处理
          this.$emit('onSubmit', params, modalClose)
        } else {
          // 触发默认提交事件
          this.$refs.nativeForm.defaultSubmit(params.realForm, modalClose)
        }
      },
      afterSubmit (params) {
        this.$emit('afterSubmit', params)
      },
      emitFunc (func, data, value) {
        this.$emit('x-form-item-emit-func', func, data, value)
      },
      setForm (form) {
        this.$refs.nativeForm.setForm(form)
      },
      setFormWithKey (form) {
        this.$refs.nativeForm.setFormWithKey(form)
      }
    }
  }
</script>
