<!-- 实现动态组件的绑定 -->
<template>
	<view class="group-list">
		书籍及
		<u-form :model="form" ref="uForm">
			<template v-for="(groupItem,index) in group">
				<view class="group-item">
					<view class="group-title" :key="index">{{groupItem.name}}</view>
					<view class="group-items" :key="index">
						<u-form-item :label-width="0" :required="item.required"
							v-for="(item,itemIndex) in groupItem.foods" :key="index">
							<!-- <view :key="index"> -->
							<view>{{item.name}}</view>
							<xh-input></xh-input>
							<!-- <xh-input :item="item" v-if="item.fieldsType==='input'"></xh-input> -->
							<!-- </view> -->
						</u-form-item>
					</view>
				</view>
			</template>
		</u-form>
	</view>
</template>

<script>
	// import {
	// 	// XhInput,
	// 	// XhSelect,
	// 	// XhMultipleSelect,
	// 	// XhFiles,
	// 	// XhSwitch,
	// 	// XhTextarea,
	// 	// XhServiceMore,
	// 	// XhDate
	// } from '@/components/createCom/index.js'
	import XhInput from '@/components/createCom/XhInput.vue'
	export default {
		components: {
			'xh-input': XhInput,
		},
		props: {
			item: {
				type: Array,
				default () {
					return []
				}
			},
		},
		watch:{
			"item":function(newVal){
				this.group = newVal
				console.log(this.group,'this.group')
			}
		},
		data() {
			return {
				list: [{
					fieldsId: '产品规格',
					fieldsType: 'input',
					fieldsName: '产品规格',
					fieldsValue: '',
					required: true,
					fields_options: [{
						key: '',
						label: ''
					}]
				},],
				// 完工信息的不同项
				group: [{
					groupName: '接入点信息',
					item: [{
						fieldsId: '基础信息',
						fieldsType: 'input',
						fieldsName: '产品规格',
						fieldsValue: '',
						required: true,
						fields_options: [{
							key: '',
							label: ''
						}]
					},]
				}],
				configList: [{
					panelName: '',
					panelType: '',
					group: [{
						groupName: '接入点信息',
						item: [{
							fieldsId: '基础信息',
							fieldsType: 'input',
							fieldsName: '',
							fieldsValue: '',
							required: true,
							fields_options: [{
								key: '',
								label: ''
							}]
						}]
					}]
				}],
				form: {
					name: '',
					intro: '',
					sex: ''
				},
				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '鲜甜',
						disabled: false
					},
					{
						name: '麻辣',
						disabled: false
					}
				],
				radio: '',
				switchVal: false
			}
		},
		created() {
			this.group = this.item
			console.log(this.group,'this.group')
			console.log(XhInput, 'XhInput')
		}
	}
</script>

<style lang="scss" scoped>
	.group-list{
		
		.group-item{
			
		}
	}
</style>
