<template>
  <Item v-bind="$attrs">
    <a-spin :spinning="spinning">
      <a-form-model-item v-bind="itemBind" style="margin-bottom: 15px">
        <slot>
          <component
            v-if="includeComponent"
            :is="componentIs"
            v-bind="bind"
            v-on="$listeners"
            @change="onChangeValue"
          ></component>
          <!-- 未配置 -->
          <template v-else>
            <span>
              未配置【
              <span v-text="_valueType"></span>
              】：
              <span v-text="value"></span>
            </span>
          </template>
        </slot>
      </a-form-model-item>
    </a-spin>
  </Item>
</template>
<script lang="ts">
// import Field_image from "./views/image.vue";
// import Field_upload from "./views/upload.vue";
// import Field_codemirror from "./views/codemirror.vue";
// import Field_grid from "./views/grid/index.vue";
// import Field_editor from "./views/editor.vue";
// import Field_icons from "./views/icons.vue";
import lodash from 'lodash';
import { Component, Inject, Mixins } from 'vue-property-decorator';
import { valueTypeMap } from './declare';
import Item from './item.vue';
import { FieldBasics } from './script';
import Field_checkbox from './views/checkbox.vue';
import Field_date from './views/date.vue';
import Field_dateMonth from './views/dateMonth.vue';
import Field_dateRange from './views/dateRange.vue';
import Field_dateWeek from './views/dateWeek.vue';
import Field_password from './views/password.vue';
import Field_radio from './views/radio.vue';
import Field_rate from './views/rate.vue';
import Field_select from './views/select.vue';
import Field_slider from './views/slider.vue';
import Field_switch from './views/switch.vue';
import Field_text from './views/text.vue';
import Field_textarea from './views/textarea.vue';
import Field_transfer from './views/transfer.vue';
@Component({
  components: {
    Item,
    Field_text,
    Field_password,
    Field_textarea,
    Field_rate,
    Field_radio,
    Field_checkbox,
    Field_date,
    Field_dateWeek,
    Field_dateMonth,
    Field_dateRange,
    Field_select,
    Field_slider,
    Field_switch,
    Field_transfer,
    // Field_image,
    // Field_upload,
    // Field_codemirror
    // Field_grid,
    // Field_editor,
    // Field_icons
  },
})
export default class extends Mixins(FieldBasics) {
  // 表单状态值
  @Inject() declare readonly formState;
  // 自定义校验状态
  // @Inject() readonly formValidate;
  // 实体
  @Inject() declare readonly PageEntity;
  // 表单类型
  @Inject({ default: '' }) declare readonly formType;
  /**
   * 包含注册的组件
   */
  get includeComponent() {
    const components = lodash.assign({}, this.$options.components, valueTypeMap);
    return lodash.has(components, this.componentIs);
  }
  get bind() {
    return lodash.assign({}, this.$props, this.$attrs, lodash.get(this, '_events'));
  }
  /**
   * 动态组件 is
   */
  get componentIs() {
    return `Field_${this._valueType}`;
  }
  async mounted() {}
}
</script>
<style lang="less"></style>
