<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>
			<div class="top-bar" v-if="activeComponent.$isViewRoot">
				<el-button size="mini" @click="clickEditStoreExp">{{$t('Edit store')}}</el-button>
				<el-button size="mini" @click="clickEditStoreComputed">{{$t('Edit computed')}}</el-button>
				<el-button size="mini" @click="clickAssetManager">{{$t('Asset dependence')}}</el-button>
			</div>
			<el-form-item :label="$t('Name')">
				<el-input v-model="form.name" @input="v => handleChange('name', v)"></el-input>
			</el-form-item>
			<el-form-item :label="$t('Type')">
				<el-select style="flex:1;" v-model="form.type" @change="v => handleChange('type', v)" placeholder="请选择类型">
					<el-option v-for="(cmp, key) in componentsMap" :key="key" :label="cmp" :value="key"></el-option>
				</el-select>
			</el-form-item>
			<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="pr-10px">
				<el-collapse v-model="activeNames">
					<el-collapse-item :title="$t('Props')" name="props">
						<props-editor
							ref="propsEditor"
							:editable="true"
							:switchable="true"
							mode="cmd"
							:data="form.properties"
							:meta="propsMeta"
							@input="onInput"
						/>
					</el-collapse-item>
					<el-collapse-item :title="$t('Function cmd') + `(${customCmdKeys.length})`" name="cmd">
						<el-form-item v-for="key in customCmdKeys" :label="customCmdNames[key]" :key="key" label-width="50px">
							<el-input class="cmd-input" v-model="activeComponent.properties[key]" @change="makeProjectDirty"/>
							<el-popconfirm :title="$t('Are you sure to delete this cmd?')" @onConfirm="deleteCmd(key)">
								<el-button slot="reference" plain icon="el-icon-delete"/>
							</el-popconfirm>
						</el-form-item>
						<div class="add-item-bar">
							<el-dropdown trigger="click" @command="addCmd" 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="(cmd, key) of customCmdNames"
										:command="key"
										:key="key"
										:disabled="customCmdKeys.includes(key)"
									>{{cmd}}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</el-collapse-item>
				</el-collapse>
			</el-scrollbar>
		</el-form>
		<store-editor-dialog ref="storeEditorDialog"/>
		<asset-dependence-dialog ref="assetDependenceDialog"/>
	</div>
</template>

<script>
	import {mapGetters, mapMutations} from 'vuex';
	import PropsEditor from "../../../components/PropsEditor";
	import {getCmpProps} from "../../../utils/common";
	import StoreEditorDialog from "./PropsTab/StoreEditorDialog";
	import ElFormItem from "../../../components/inputs/form-item";
	import AssetDependenceDialog from "./PropsTab/AssetDependenceDialog";
	import events from "@/global-events.js"

	export default {
		name: 'PropsTab',
		components: {AssetDependenceDialog, ElFormItem, StoreEditorDialog, PropsEditor},
		data() {
			const componentsMap = this.$t('view_node_menu');
			const customCmdNames = this.$t('customCmds');

			return {
				activeNames: 'props',
				componentsMap,
				customCmdNames,
				form: {
					name: '',
					type: '',
					properties: {},
				},
			};
		},
		computed: {
			...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList']),
			propsMeta() {

				this.resetScrollType(this.activeComponent)
				console.log(this.activeComponent.type)
				return getCmpProps(this.activeComponent.type);
			},
			customCmdKeys() {
				let cmdNames = Object.keys(this.customCmdNames);
				let keys = [];
				for (let key in this.activeComponent.properties) {
					if (cmdNames.includes(key)) {
						keys.push(key);
					}
				}
				return keys;
			}
		},
		watch: {
			activeComponent: {
				deep: true,
				handler: function (val) {
					this.form.name = val.name || '';
					this.form.type = val.type || '';
					this.form.properties = val.properties || {};
				}
			}
		},
		methods: {
			//重置编辑视图数据为实际视图数据
			resetScrollType(data) {
				if(data.type=="editScrollList"){
					data.type="scrollList"
				}
				if(data.type=="editScrollView"){
					data.type="scrollView"
				}
				if(data.children){
					 for(let i=0;i<data.children.length;i++){
						this.resetScrollType(data.children[i])
					}
				}
			},
			propsUpdate(val){
				// console.log("propsUpdate",val)
				 this.makeProjectDirty()
			},
			handleChange(label, v) {
				let _view = {};
				_view[label] = v;
				this.$store.dispatch('modifyActiveView', _view);
			},
			onInput(value, container, propName, oldValue) {
				console.log('propsChange', propName, value);
				let _prop = {};
				_prop[propName] = value;
				this.$store.dispatch('modifyProperties', _prop);

				let _keyv=JSON.parse(`{"${propName}":null}`)
				_keyv[propName]=value
				console.log({props:_keyv})
				//setTimeout(()=>{
					events.$emit('canvasKeyVupdate', {props:_keyv},"end");
				//},1000)

			},
			clickEditStoreExp() {
				this.$refs.storeEditorDialog.edit('exp', this.activeComponent);
			},
			clickEditStoreComputed() {
				this.$refs.storeEditorDialog.edit('computed', this.activeComponent);
			},
			clickAssetManager(){
				this.$refs.assetDependenceDialog.edit(this.activeComponent);
			},
			...mapMutations(['makeProjectDirty', 'addCmd', 'deleteCmd']),
		}
	};
</script>

<style lang="scss">

</style>
