<template>
  <div v-if="formData">
    <form-create
      ref="fc"
      v-model="fApi"
      :option="formConfig"
      :rule="formData.rules"
      class="formBox"
      handle-icon="false"
      @submit="onSubmit"
    />
    <div class="el-form-item__content" style="margin-left: 125px;">
      <el-button type="primary" :loading="loading" @click="checkForm">提交</el-button>
    </div>
  </div>
</template>
<script>
import formCreate from '@form-create/element-ui'
import request from '../../../packages/utils/request'
import config from './config'
import utils from 'xe-utils'
formCreate.register({
  name: 'help',
  init({ value }, rule) {
    // 判断value是字符串还是数组,如果是字符串则转换为数组，如果是数组则不变
    if (!utils.isArray(value)) {
      value = [value]
    }
    rule.suffix = {
      type: 'p',
      children: value,
      style: 'line-height: 1.5;margin-top: 4px;',
      class: 'd-text-grey d-size-12'
    }
  }
})
export default {
  name: 'DkFormCreate',
  inject: {
    layout: {
      default: {
        device: 'desktop'
      }
    }
  },
  components: {
    formCreate: formCreate.$form()
  },
  props: {
    formData: { type: Object, default: null },
    // 是否提交
    isSubmit: { type: Boolean, default: true },
    extraConfig: { default: () => { return {} }, type: Object },
    path: { default: '', type: String },
    isLoading: { default: false, type: Boolean }
  },
  data() {
    return {
      config: config,
      fApi: null,
      loading: false
    }
  },
  computed: {
    device() {
      return this.layout.device
    },
    formConfig() {
      const _config = utils.merge(this.config, this.extraConfig)
      if (this.device === 'mobile') {
        _config.form.labelPosition = 'top'
        _config.form.size = 'mini'
      } else {
        _config.form.labelPosition = 'left'
        _config.form.size = 'medium'
      }
      return _config
    }
  },
  mounted() {

  },

  methods: {
    checkForm() {
      this.fApi.validate((valid, fail) => {
        if (valid) {
          this.fApi.submit((formData, fApi) => {
            this.onSubmit(formData)
          })
        } else {
          this.$message.info(Object.values(fail)[0][0]['message'])
        }
      })
    },
    // 提交表单 group
    onSubmit(formData) {
      if (this.isLoading) {
        this.loading = true
      }
      if (this.isSubmit) {
        request({
          url: this.path + this.formData.action,
          method: this.formData.method,
          data: { formData }
        }).then(res => {
          this.$message.success(res.msg)
          this.dialogTableVisible = false
          this.$emit('submit', formData, res)
          this.loading = false
        }).catch(res => {
          this.$message.error(res.msg)
          this.$emit('fail', formData, res)
          this.loading = false
        })
      } else {
        this.$emit('submit', formData)
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.submit-button {
  display: flex;
  justify-content: center;
}
</style>
