<template>
	<el-dialog :title="$t('Custom module asset mapping')" width="70%" :visible.sync="visible" @opened="onOpen"
	           :close-on-click-modal="false"
	           :append-to-body="true"
	           :show-close="false"
	           fullscreen
	           custom-class="flex-dialog asset-mapping-editor-dialog"
	>
		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
			<div class="mapping-list">
				<div class="list" v-if="customMeta">
					<div class="item" v-for="(item, index) in customMeta.assets" :key="index">
						<span class="name">{{item.name}}({{assetSize(item.url)}})</span>
						<div class="diff">
							<div class="side left">
							<span class="extname">
								{{item.ext}}
							</span>
								<div class="thumbnail">
									<img class="alpha-image-background" v-if="showThumbnail(item.ext)" :src="item.url">
									<svga-preview-view class="alpha-image-background" v-if="item.ext === '.svga'"
									                   :max-width="100"
									                   :max-height="100"
									                   :src="item.url"></svga-preview-view>
								</div>
								<el-input size="mini" v-model="item.url" readonly/>
							</div>
							<el-icon class="el-icon-connection"/>
							<div class="side right">
								<!--<span class="extname">
									{{item.ext}}
								</span>-->
								<div class="thumbnail">
									<img class="alpha-image-background" v-if="item.replace && showThumbnail(item.ext)"
									     :src="resolveSrc(item)">
									<svga-preview-view class="alpha-image-background" v-if="item.replace && item.ext === '.svga'"
									                   :max-width="100"
									                   :max-height="100"
									                   :src="resolveSrc(item)"></svga-preview-view>
								</div>
								<el-input size="mini" v-model="item.replace" clearable>
									<el-button slot="append" icon="el-icon-brush" @click="onClickReplace(item)"/>
								</el-input>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-scrollbar>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<div>
				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
				<el-button size="mini" @click="onSave" type="primary">{{$t('Save')}}</el-button>
			</div>
		</div>
		<select-asset-dialog ref="selectAssetDialog" @select="onSelectReplace"/>
	</el-dialog>
</template>

<script>
	import {mapMutations, mapState, mapGetters, mapActions} from 'vuex';
	import {fileTypeIcon} from "../../../../config";
	import SelectAssetDialog from "../SelectAssetDialog";
	import {clonePureObj} from "../../../../utils";
	import SvgaPreviewView from "../../../../components/SvgaPreviewView";

	const linkScheme = 'link://';

	export default {
		name: "AssetMappingEditorDialog",
		components: {SvgaPreviewView, SelectAssetDialog},
		data() {
			return {
				visible: false,
				mid: '',
				customMeta: null,
			}
		},
		computed: {
			...mapState({
				customs: state => state.project.data.customs,
			}),
			...mapGetters([
				'assets',
				'customPackages',
				'assetSize',
			])
		},
		methods: {
			showThumbnail(ext) {
				return fileTypeIcon[ext] === 't';
			},
			resolveSrc(item) {
				let url;
				const replace = item.replace;
				if (replace.startsWith(linkScheme)) {
					let uuid = replace.replace(linkScheme, '');
					let asset = this.assets.find(asset => asset.uuid === uuid);
					if (asset) {
						url = asset.url;
					}
				} else {
					url = replace;
				}

				return url;
			},
			onClickReplace(item) {
				this.toReplaceItem = item;
				this.$refs.selectAssetDialog.show();
			},
			onSelectReplace(asset) {
				this.$delete(this.toReplaceItem, 'replace');
				this.$set(this.toReplaceItem, 'replace', linkScheme + asset.uuid);
			},
			show(data) {
				this.mid = data.id;
				this.customMeta = clonePureObj(this.customPackages[this.mid]);
				for(let asset of this.customMeta.assets){
					this.updateAssetSize(asset.url);
				}

				for (let uuid in data.assetMapping) {
					let asset = this.customMeta.assets.find(item => item.uuid === uuid);
					if (asset) {
						this.$set(asset, 'replace', data.assetMapping[uuid]);
					}
				}

				this.visible = true;
			},
			onSave() {
				let assetMapping = {};
				for (let asset of this.customMeta.assets) {
					if (asset.replace) {
						assetMapping[asset.uuid] = asset.replace;
					}
				}

				this.$emit('save', this.mid, assetMapping);
				this.visible = false;
			},
			onClose() {
				this.visible = false;
			},
			onOpen() {

			},
			...mapMutations([]),
			...mapActions(['updateAssetSize']),
		}
	}
</script>

<style lang="scss">
	.asset-mapping-editor-dialog {
		.view {
			padding-right: 10px;
		}

		.scrollbar {
			height: 100%;

			.item {
				display: flex;
				flex-direction: column;
				align-items: stretch;

				.name {
					text-align: center;
				}

				.diff {
					position: relative;
					border: 1px solid lightgray;
					border-radius: 5px;
					min-height: 70px;
					align-items: stretch;
					display: flex;

					.el-icon-connection {
						margin-bottom: 6px;
						align-self: flex-end;
					}

					.side {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						.extname {
							position: absolute;
							background-color: rgba(0, 0, 0, 0.3);
							color: white;
							padding: 2px;
						}

						.thumbnail {
							margin: 5px;
							font-size: 0;
							width: 110px;
							height: 110px;
							display: flex;
							justify-content: center;
							align-items: center;

							img {
								max-width: 100px;
								max-height: 100px;
							}
						}

						&.left {
							.extname {
								left: 0;
								border-top-left-radius: 4px;
								border-bottom-right-radius: 4px;
							}
						}

						&.right {
							.extname {
								right: 0;
								border-top-right-radius: 4px;
								border-bottom-left-radius: 4px;
							}
						}
					}
				}
			}
		}
	}
</style>