<template>
	<div class="zero-inspector-props-form" v-if="activeComponent.uuid">
		<el-form class="form" ref="form" size="mini" :model="form" label-width="100px" @submit.native.prevent>
			<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="pr-10px">
				<el-collapse accordion v-if="activeComponent.scripts && activeComponent.scripts.length">
					<template v-for="(script, index) in activeComponent.scripts">
						<el-collapse-item :title="getScriptName(script.script)" :key="script + index">
							<props-editor
								ref="propsEditor"
								:editable="true"
								:data="script.props"
								:meta="getScriptOptions(script.script)"
								@input="(value, container, propName)=>onInput(index, value, propName)"
							/>
							<el-form-item label="">
								<el-button @click="deleteNodeScript(index)" type="danger" plain>删除</el-button>
							</el-form-item>
						</el-collapse-item>
					</template>
				</el-collapse>
				<div class="add-item-bar">
					<el-dropdown trigger="click" @command="handleAddScript" placement="bottom" size="small">
						<el-button size="mini" type="primary" plain>{{$t('Add')}}</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(script, key) of scriptPackages" :command="script.id" :key="key">
								{{script.name}}
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-scrollbar>
		</el-form>
	</div>
</template>

<script>
	import {mapGetters, mapState} from 'vuex';
	import _ from 'lodash';
	import PropsEditor from "../../../components/PropsEditor";

	export default {
		name: 'ScriptsTab',
		components: {PropsEditor},
		data() {
			return {
				form: {
					scripts: []
				},
				configColl: ['properties']
			};
		},
		computed: {
			...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList', 'scriptPackages']),
			...mapState({}),
		},
		methods: {
			/**
			 * 脚本预设对象选中
			 */
			handleAddScript(command) {
				//console.log('handleAddScript', command);
				this.$store.dispatch('addNodeScript', command);
			},
			/**
			 * 事件属性发生改变
			 */
			onInput(index, v, key) {
				let _props = {};
				_props[key] = v;
				let _scripts = _.cloneDeep(this.activeComponent.scripts);
				let _script = _scripts[index];
				_script.props = _.assign(_script.props, _props);
				_scripts[index] = _script;
				this.$store.dispatch('modifyActiveView', {
					scripts: _scripts
				});
			},
			getScriptValue(item, key, index) {
				let _script = this.activeComponent.scripts[index];
				let v = _script.props[key];
				return v === undefined ? item.default : v;
			},
			getScriptProps(item, index) {
				let _type = item.type;
				let _options = [];
				if (_type === 'enum') {
					// 如果脚本选项对应的类型是数组，说明是枚举类型
					_options = item.enum.map(i => {
						return {
							label: i,
							value: i
						};
					});
					_type = 'select';
				}

				let _cmp = scriptTypeMap[_type];
				return {
					size: 'mini',
					...(_cmp.props || {}),
					options: _options
				};
			},
			getScriptType(item, index) {
				// 如果脚本选项对应的类型是数组，说明是枚举类型
				let _type = item.type;
				if (_type === 'enum') {
					_type = 'select';
				}
				return scriptTypeMap[_type].component;
			},
			getScriptName(id) {
				let _script = this.scriptPackages[id];
				return _script ? _script.name : '';
			},
			getScriptOptions(id) {
				let _script = this.scriptPackages[id];
				return _script ? _script : {};
			},
			/**
			 * 删除节点脚本
			 */
			deleteNodeScript(index) {
				let _scripts = _.cloneDeep(this.activeComponent.scripts);
				_.remove(_scripts, (s, sindex) => {
					return sindex === index;
				});

				this.$store.dispatch('modifyActiveView', {
					scripts: _scripts
				});
			}
		}
	};
</script>

<style lang="scss">

</style>