<!--
 * @Descripttion: 动态表单渲染器
-->
<template>
	<!-- input -->
	<template v-if="item.component=='input'">
		<el-input v-model="data[item.name]" v-bind="item.options" show-word-limit></el-input>
	</template>
	<!-- textarea -->
	<template v-else-if="item.component=='textarea'">
		<el-input v-model="data[item.name]" v-bind="item.options"  type="textarea" show-word-limit></el-input>
	</template>
	<!-- checkbox -->
	<template v-else-if="item.component=='checkbox'">
		<el-checkbox v-model="data[item.name]" :label="_item.value"  v-for="(_item, _index) in item.options.items" :key="_index">{{ _item.label }}</el-checkbox>
	</template>
	<!-- radio -->
	<template v-else-if="item.component=='radio'">
		<el-radio-group v-model="data[item.name]">
			<el-radio v-for="_item in item.options.items" :key="_item.value" :label="_item.value">
				{{_item.label}}
			</el-radio>
		</el-radio-group>
	</template>
	<!-- select -->
	<template v-else-if="item.component=='select'">
		<el-select v-model="data[item.name]" v-bind="item.options" clearable filterable style="width: 100%;">
			<el-option v-for="option in item.options.items" :key="option.value" :label="option.label || option.name" :value="option.value"></el-option>
		</el-select>
	</template>
	<!-- checkboxGroup -->
	<template v-else-if="item.component=='checkboxGroup'">
		<el-checkbox-group v-model="data[item.name]">
			<el-checkbox v-for="_item in item.options.items" :key="_item.value" :label="_item.value">
				{{_item.label}}
			</el-checkbox>
		</el-checkbox-group>
	</template>
	<!-- upload -->
	<template v-else-if="item.component=='upload'">
		<x-upload v-model="data[item.name]" v-bind="item.options"></x-upload>
	</template>
	<!-- updatemultiple -->
	<template v-else-if="item.component=='updatemultiple'">
		<x-upload-multiple v-model="data[item.name]" draggable v-bind="item.options"></x-upload-multiple>
	</template>
	<!-- switch -->
	<template v-else-if="item.component=='switch'">
		<el-switch v-model="data[item.name]" v-bind="item.options" />
	</template>
	<!-- cascader -->
	<template v-else-if="item.component=='cascader'">
		<el-cascader v-model="data[item.name]" :options="item.options.items" clearable></el-cascader>
	</template>
	<!-- date -->
	<template v-else-if="item.component=='date'">
		<el-date-picker v-model="data[item.name]" v-bind="item.options"></el-date-picker>
	</template>
	<!-- number -->
	<template v-else-if="item.component=='number'">
		<el-input-number v-model="data[item.name]" controls-position="right"></el-input-number>
	</template>
	<!-- color -->
	<template v-else-if="item.component=='color'">
		<el-color-picker v-model="data[item.name]" v-bind="item.options"></el-color-picker>
	</template>
	<!-- rate -->
	<template v-else-if="item.component=='rate'">
		<el-rate style="margin-top: 6px;" v-model="data[item.name]" v-bind="item.options"></el-rate>
	</template>
	<!-- slider -->
	<template v-else-if="item.component=='slider'">
		<el-slider v-model="data[item.name]" v-bind="item.options"></el-slider>
	</template>
	<!-- tableselect -->
	<template v-else-if="item.component=='tableselect'">
		<tableselect-render v-model="data[item.name]" :item="item"></tableselect-render>
	</template>
	<!-- editor -->
	<template v-else-if="item.component=='editor'">
		<sc-editor v-model="data[item.name]" v-bind="item.options"></sc-editor>
	</template>
	<template v-else-if="item.component=='text'">
		<el-link type="info" :underline="false">{{ data[item.name] }}</el-link>
	</template>
	<!-- avatar -->	
	<template v-else-if="item.component=='avatar'">
		<x-avatar v-model="data" :options="item.options" size="small"></x-avatar> 
	</template>
	<template v-else-if="item.component=='formtable'">
	 	<x-form-table ref="videostable" v-model="data[item.name]" v-bind="item.options"> </x-form-table>
	</template>
	<!-- noComponent -->
	<template v-else>
		<el-tag type="danger">[{{item.component}}] Component not found</el-tag>
	</template>
	<div v-if="item.message" class="el-form-item-msg">{{item.message}}</div>
</template>
<script>
	import { defineAsyncComponent } from 'vue'
	const tableselectRender = defineAsyncComponent(() => import('./items/tableselect'))
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))

	export default {
		props: {
			item: { type: Object, default: () => {} },
			modelValue: [String, Number, Boolean, Date, Object, Array],
		},
		components: {
			tableselectRender,
			scEditor
		},
		data() {
			return {
				data: this.modelValue,
			}
		},
		watch:{
			data(val){
				this.$emit("update:modelValue", val)
			}
		},
		computed: {

		},
		methods: {

			
		}
	}
</script>