<!--
 * @Author: 曹捷
 * @Date: 2021-05-08 10:10:44
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-02 16:12:34
 * @Description: fileContent
-->

<template>
  <a-col class="auto-form" :span="itemInfo.__config__.span" v-if="itemInfo">
    <slot></slot>
    <a-form-item class="form-item" :label="itemInfo.__config__.label" :name="itemInfo.key" :labelCol="labelCol"
      :wrapperCol="wrapperCol">
      <component :is="itemInfo.__config__.tag" v-model:value="formData[itemInfo.key]"
        :placeholder="itemInfo.placeholder" :addonBefore="itemInfo.__slot__.prepend"
        :addonAfter="itemInfo.__slot__.append" :maxlength="itemInfo.maxlength" :showCount="itemInfo['show-word-limit']"
        :allow-clear="itemInfo.clearable" :disabled="itemInfo.disabled" :readonly="itemInfo.readonly"
        :min="itemInfo.min" :max="itemInfo.max" :step="itemInfo.step" :autoSize="itemInfo.autosize"
        :multiple="itemInfo.multiple" :itemInfo="itemInfo.ajaxInfo" :dictCode="itemInfo.dictCode"
        :type="itemInfo.componentType" :checkedChildren="itemInfo.checkedChildren"
        :unCheckedChildren="itemInfo.unCheckedChildren" :activeValue="itemInfo.activeValue"
        :inactiveValue="itemInfo.inactiveValue" :format="itemInfo.format" :valueFormat="itemInfo.valueFormat"
        :class="itemInfo.__config__.class" :mode="itemInfo.mode" :showTime="itemInfo.showTime">
        <template #prefix v-if="itemInfo['prefix-icon']">
          <i class="iconfont " :class="'icon-'+itemInfo['prefix-icon']"></i>
        </template>
        <template #suffix v-if="itemInfo['suffix-icon']">
          <i class="iconfont " :class="'icon-'+itemInfo['suffix-icon']"></i>
        </template>
      </component>
    </a-form-item>
  </a-col>

</template>

<script>
import { computed, inject } from 'vue'
export default {
  props: {
    itemInfo: {
      type: Object
    },
    formData: {
      type: Object
    }
  },
  setup (props, context) {
    let _computed = {
      formConf: computed(() => inject('formConf')),
      // 是否显示标签
      wrapperCol: computed(() => {
        return { span: props.itemInfo.__config__.wrapperCol ? props.itemInfo.__config__.wrapperCol : _computed.formConf.value.wrapperCol }
      }),
      labelCol: computed(() => {
        let label = props.itemInfo.__config__.labelCol
        let span = 0
        if (props.itemInfo.__config__.showLabel) {
          span = label ? label : _computed.formConf.value.labelCol
        }
        return { span }
      })
    }
    return { ..._computed }
  }
}
</script>

<style lang="less">
.auto-form {
  .form-item {
    padding: 10px;
    margin-bottom: 0;
  }
}
</style>