<template>
	<el-dialog
		:title="$t('Asset dependence')"
		width="80vw"
		:visible.sync="visible"
		:append-to-body="true"
		:close-on-click-modal="false"
		:show-close="false"
		:close-on-press-escape="false"
		custom-class="asset-dependence-dialog flex-dialog"
	>
		<div class="wrapper">
			<div class="assets-dep">
				<div class="explicit-tags">
					<div>
						<div class="explicit"></div>
						显式依赖
					</div>
					<div>
						<div class="implicit"></div>
						隐式依赖
					</div>
				</div>
				<el-scrollbar class="assets-scrollbar" wrap-class="wrap-x-hidden"
				              view-class="scrollbar-view">
					<asset-list ref="depAssetList" :editable="false" :selectable="false"
					            :assets-source="assetsSource"
					            v-if="view"
					            @click-item="onClickItem"
					            :target-view="view"
					            :explicit-dep-assets="explicitDepAssets"
					            :implicit-dep-assets="implicitDepAssets"
					/>
				</el-scrollbar>
			</div>
			<div class="custom-dep">
				<span>自定义模块依赖</span>
				<el-select class="select" multiple v-model="depCustoms" size="mini">
					<el-option v-for="custom in customs"
						:key="custom.id"
						:value="custom.id"
						:label="custom.name"
					>
					</el-option>
				</el-select>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<div>
				<el-button slot="reference" size="mini" @click="clickClose">{{ $t("Close") }}</el-button>
				<el-button class="save-button" type="primary" size="mini" @click="clickSave">{{ $t("Save") }}
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {mapMutations, mapGetters} from 'vuex';
	import MonacoEditor from "vue-monaco";
	import {clonePureObj, monacoEditorOptions} from "../../../../utils";
	import AssetList from "../../Assets/AssetList";

	export default {
		name: "AssetDependenceDialog",
		components: {AssetList, MonacoEditor},
		props: [],
		data() {
			return {
				visible: false,
				tab: 'exp',
				monacoEditorOptions,
				showEditor: false,
				store: {},
				assetsSource: [],
				view: null,
				explicitDepAssets: [],
				implicitDepAssets: [],
				depCustoms: [],
			}
		},
		computed: {
			...mapGetters(['customs']),
		},
		methods: {
			async edit(view) {
				this.view = view;

				this.explicitDepAssets = view.explicitDepAssets.concat();
				this.implicitDepAssets = view.implicitDepAssets.concat();
				this.depCustoms = view.depCustoms ? view.depCustoms.concat() : [];

				this.assetsSource = clonePureObj(this.$store.getters.assets);

				this.visible = true;
			},
			clickSave() {
				this.modifyViewDepAssets({
					view: this.view,
					explicitDepAssets: this.explicitDepAssets,
					implicitDepAssets: this.implicitDepAssets,
					depCustoms: this.depCustoms
				});
				this.visible = false;
			},
			clickClose() {
				this.visible = false;
			},
			onClickItem(asset) {
				const {uuid} = asset;
				const {explicitDepAssets, implicitDepAssets} = this;

				if (explicitDepAssets.includes(uuid)) {
					return
				}

				let index = implicitDepAssets.indexOf(uuid);
				if (index >= 0) {
					implicitDepAssets.splice(index, 1);
				} else {
					implicitDepAssets.push(uuid);
				}
			},
			...mapMutations(['modifyViewDepAssets'])
		}
	}
</script>

<style scoped>

</style>