<template>
	<el-table v-if="editData" :data="customMetas" stripe height="100%">
		<el-table-column
			width="40"
		>
			<template slot-scope="scope">
				<el-checkbox v-model="scope.row.selected"/>
			</template>
		</el-table-column>
		<el-table-column
			prop="id"
			label="ID"
			width="200">
		</el-table-column>
		<el-table-column
			prop="name"
			:label="$t('Name')"
			width="200">
		</el-table-column>
		<el-table-column
			prop="desc"
			:label="$t('Desc')"
			width="60">
			<template slot-scope="scope">
				<el-popover
					:title="scope.row.meta.name"
					width="200"
					trigger="click"
					:content="scope.row.meta.desc">
					<el-button slot="reference" size="mini" icon="el-icon-document" circle type="primary" plain/>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column
			prop="events"
			:label="$t('Events')"
			width="60">
			<template slot-scope="scope">
				<el-button size="mini" icon="el-icon-guide" circle type="primary" plain @click="showEvents(scope.row)"/>
			</template>
		</el-table-column>
		<el-table-column
			prop="assets"
			:label="$t('Assets')"
			width="60">
			<template slot-scope="scope">
				<el-button size="mini" icon="el-icon-edit" circle type="primary" plain @click="editAssetMapping(scope.row)"/>
			</template>
		</el-table-column>
		<el-table-column
			prop="props"
			:label="$t('Props')"
			width="60">
			<template slot-scope="scope">
				<el-button size="mini" icon="el-icon-edit" circle type="primary" plain @click="editProps(scope.row)"/>
			</template>
		</el-table-column>
		<!--<el-table-column
			label="Version"
			width="100"
		>
			<template slot-scope="scope">
				<el-select size="mini"/>
			</template>
		</el-table-column>-->
		<el-table-column>
		</el-table-column>
		<asset-mapping-editor-dialog ref="assetMappingEditorDialog" @save="onSaveAssetMapping"/>
		<props-editor-dialog ref="propsEditorDialog"/>
		<events-details-dialog ref="eventsDetailsDialog"/>
	</el-table>
</template>

<script>
	import {mapState, mapMutations, mapGetters} from 'vuex'
	import {clonePureObj} from "../../../../utils";
	import AssetMappingEditorDialog from "./AssetMappingEditorDialog";
	import PropsEditorDialog from "./CustomModuleEditor/PropsEditorDialog";
	import EventsDetailsDialog from "./CustomModuleEditor/EventsDetailsDialog";

	export default {
		name: "CustomModuleEditor",
		components: {EventsDetailsDialog, PropsEditorDialog, AssetMappingEditorDialog},
		data() {
			return {
				visible: false,
				customMetas: [],
				editData: null,
			}
		},
		computed: {
			...mapState({
				customs: state => state.project.data.customs,
			}),
			...mapGetters([
				'customPackages',
			])
		},
		methods: {
			edit() {
				this.editData = clonePureObj(this.customs);
			},
			active(){
				this.customMetas.splice(0);
				let packageDatas = this.customPackages;
				for (let pid in packageDatas) {
					let meta = packageDatas[pid];
					let editData = this.editData.find(item => item.id === meta.id);
					let data = editData ? editData : (editData || {});
					if (!data.props) {
						data.props = {};
					}
					this.customMetas.push({
						id: meta.id,
						name: meta.name,
						meta,
						data,
						assetMapping: editData && (editData.assetMapping || {}),
						selected: !!editData,
					})
				}
			},
			save() {
				const editData = this.editData;
				editData.splice(0);
				for (let meta of this.customMetas) {
					if (meta.selected) {
						editData.push({
							id: meta.id,
							assetMapping: meta.assetMapping || {},
							props: meta.data.props || {},
						});
					}
				}
				this.modifyCustoms(editData);
			},
			editAssetMapping(item) {
				this.$refs.assetMappingEditorDialog.show(item);
			},
			editProps(item) {
				this.$refs.propsEditorDialog.show(item.data, item.meta);
			},
			onSaveAssetMapping(mid, assetMapping) {
				this.customMetas.find(item => item.id === mid).assetMapping = assetMapping;
			},
			showEvents(item){
				this.$refs.eventsDetailsDialog.show(item.meta);
			},
			...mapMutations([
				'modifyCustoms',
			]),
		}
	}
</script>

<style scoped>

</style>
