<template>
	<el-form label-width="80px" size="mini" :inline="inline">
		<span v-for="(va, key) in value" :key="key">
			<all v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></all>
			<div v-else-if="includes(va, 'Array') && keys[key]">
				<!-- 对象数组 多维数组 -->
				<component :is="va | arrayType" :value="va" :keys="keys[key]" :headers="value['tabHeader'] || []" @change="change" :changeData="changeData"></component>
			</div>
			<template v-else>
				<el-form-item :label="keys[key] || key" v-if="keys[key] && key != '_caveat'">
					<el-input v-model="value[key]" type="textarea"></el-input>
				</el-form-item>
				<el-alert
					style="margin-bottom: 10px;"
					v-if="key == '_caveat'"
				    :title="value[key]"
				    type="error"
				    effect="dark"
					:closable="false">
				  </el-alert>
			</template>
		</span>
	</el-form>
</template>

<script>
import tplArray from './dataTypeTpl/array1Obj.vue';
import tplTabArray from './dataTypeTpl/array2Arr.vue';
export default {
	name:"All",
	components: {
		tplArray,
		tplTabArray
	},
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		inline:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			//表头变化
			changeData:{}
		}
	},
	filters:{
		//检测数组 - 对应数据结构类型
		arrayType(value){
			return value.length?(Array.isArray(value[0])?'tplTabArray':'tplArray'):'tplArray';
		}
	},
	methods:{
		change(data){
			this.changeData = data;
		}
	}
};
</script>
