<template>
	<el-form label-width="80px" size="mini" :inline="inline">
		<span v-for="(va, key) in value" :key="key">
			<Echarts v-if="includes(va, 'Object')" :value="va" :keys="keys[key] || {}"></Echarts>
			<template v-else-if="includes(va, 'Array') && keys[key]">
				<Echarts v-if="key == 'series'" v-for="(ser,serKey) in va" :key="serKey" :value="ser" :keys="keys[key]"></Echarts>
				<arr-obj v-if="key != 'series'" :value="va" :keys="keys[key]"></arr-obj>
			</template>
			<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 ArrObj from './ArrObj.vue';
export default {
	name: 'Echarts',
	components:{
		ArrObj
	},
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		keys: {
			type: Object,
			default() {
				return {};
			}
		},
		inline: {
			type: Boolean,
			default: false
		}
	}
};
</script>
