<template>
	<Item :iColSpan="iColSpan" v-if='!ishide'>
		<Spin v-if="spinning"></Spin>
		<FormItem v-bind="itemBind" :value="formState[_name]" v-else :class="itemClass">
      <template v-slot:label><slot name='label'/></template>
			<slot>
				<keep-alive v-if="includeComponent">
          <template v-if="$slots['cont']">
            <slot name="cont" v-bind="_bind"/>
          </template>
          <template  v-else-if='$slots["unit"] || $slots["tip"]' >
            <component :is="componentIs" v-bind="_bind" @change="onChangeValue"/>
            <template v-if="$slots['unit']">
              &nbsp;<slot name="unit"/>
            </template>
            <template v-if="$slots['tip']">
              <p class="ks-form-tip"><slot name="tip"/></p>
            </template>
          </template>
					<component v-else :is="componentIs" v-bind="_bind" @change="onChangeValue"></component>
				</keep-alive>
				<!-- 未配置 -->
				<template v-else>
					<span>
						未配置【
						<span v-text="_valueType"></span>
						】：
						<span v-text="value"></span>
					</span>
				</template>
			</slot>
		</FormItem>
	</Item>
</template>
<script setup>
import { Form, FormItem, Spin, Message } from '@king-design/vue';
import { includes } from 'lodash-es';
import { ref, useAttrs, computed,  shallowRef, inject,useSlots } from 'vue';
import Item from './item.vue';
import { useFieldBasics } from './usefieldBasics';
import { useRoute } from 'vue-router';
import { defineAsyncComponent } from 'vue';
const route = useRoute();
const fieldObj = {
	Field_readOnly: defineAsyncComponent(() => import('./views/readOnly.vue')),
	Field_text: defineAsyncComponent(() => import('./views/text.vue')),
	Field_inputCompose: defineAsyncComponent(() => import('./views/inputCompose.vue')),
	Field_textarea: defineAsyncComponent(() => import('./views/textarea.vue')),
	Field_select: defineAsyncComponent(() => import('./views/select.vue')),
	Field_switch: defineAsyncComponent(() => import('./views/switch.vue')),
	Field_radio: defineAsyncComponent(() => import('./views/radio.vue')),
	Field_checkbox: defineAsyncComponent(() => import('./views/checkbox.vue')),
	Field_slider: defineAsyncComponent(() => import('./views/slider.vue')),
	Field_date: defineAsyncComponent(() => import('./views/date.vue')),
	Field_buttonGroup: defineAsyncComponent(() => import('./views/buttonGroup.vue')),
	Field_transfer: defineAsyncComponent(() => import('./views/transfer.vue')),
	Field_upload: defineAsyncComponent(() => import('./views/upload.vue')),
	Field_spinner: defineAsyncComponent(() => import('./views/spinner.vue')),
	Field_cascader: defineAsyncComponent(() => import('./views/cascader.vue')),
	Field_treeSelect: defineAsyncComponent(() => import('./views/treeSelect.vue'))
};
const props = defineProps({
	iColSpan: Number, // 布局
	label: String, // form label 没有 取 name 数据
  itemClass: {
    type: String,
    default: ''
  }, // 控制当前label宽度
	name: String, // form name
	placeholder: {
    type: [String,Array], // 输入提示
    default: '',
  },
	rules: Array, // 校验
	linkage: Array, // 联动
	entityKey: String, // 当前实体对应的 属性key
	fieldProps: {
		// 给 field组件的 fieldProps
		type: Object,
		default: () => {}
	},
	valueType: {
		// 值类型
		type: String,
		default: 'text'
	},
	readonly: {
		// 只读
		type: Boolean,
		default: false
	},
	disabled: {
		// 禁用
		type: Boolean,
		default: false
	},
	checkType: {
		// 按钮组类型
		type: String,
		default: 'radio'
	},
	debug: {
		// 测试日志
		type: Boolean,
		default: false
	},
	request: {
		// 数据源
		type: Function,
		default: () => []
	},
	messages: {
		// 值类型
		type: Object,
		default: { required: '必须填写' }
	}
});
const formInfo = inject('formInfo',{});
const contWidth = inject('contWidth','')
const formState = formInfo.formState; // 表单数据
const $attrs = useAttrs();
const emit = defineEmits(['change']);
const { value, spinning, itemBind, _name, _valueType,ishide,_placeholder, onChangeValue } = useFieldBasics(
	props,
	formInfo,
	route,
	emit
);

/**
 * 动态组件 is
 */
const componentIs = shallowRef(fieldObj[`Field_${_valueType.value}`]);
const includeComponent = ref((includes['Field_text'], componentIs.value));
// 全局宽带设定
const lastwidth = contWidth.includes('%') ? contWidth : (contWidth.includes('px') ? contWidth : contWidth+'px');
const _bind = computed(() => {
	// entityKey, fieldProps, valueType, readonly, disabled, debug, request, messages, iColSpan, label, name, placeholder, rules, linkage
  const excludeList = ['radio','checkbox','buttonGroup','spinner','switch','transfer'];
  // [单选 多选 数字输入框，按钮组]，或者 没有传入内容宽带的 不需要设置宽度
	if(includes(excludeList, _valueType.value) || !contWidth) return {...props, ...$attrs,placeholder:_placeholder.value};
  return { ...props, ...$attrs,placeholder:_placeholder.value, style:{ width:lastwidth }};
});
</script>
<style lang="less">
.ks-form-tip {
	margin: 8px 0px 0px 0px !important;
}
</style>
