<template>
	<div class="file-item" @click="$emit('click', $event)">
		<div class="icon">
			<i @dragstart="assetDragStart(data)" v-if="showIcon" draggable="true" class="file-icon"
			   :class="fileIcon"></i>
			<img @dragstart="assetDragStart(data)" v-if="showThumbnail" draggable="true"
			     class="thumbnail alpha-image-background" :src="thumbnailUrl"
			     alt="thumb" @dblclick="onDbclick()">
			<svga-preview-view @dragstart="assetDragStart(data)" draggable class="alpha-image-background" v-if="showSvga"
			                   :max-width="60"
			                   :max-height="60"
			                   :src="thumbnailUrl"></svga-preview-view>
			<div v-if="editable" class="operate-bar">
				<!--<el-button class="micro" circle plain size="mini" type="success" icon="icon-upload" @dblclick.native.stop
				           @click="onClickReplace"/>-->
				<!--<el-button class="micro" circle plain size="mini" type="success" icon="el-icon-edit" @dblclick.native.stop @click="onClickEdit"/>-->

				<el-dropdown size="mini" trigger="click" placement="top" @command="onMoreMenu">
					<el-button circle size="mini" class="micro" type="success" icon="el-icon-more" @click.stop/>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item, key) in assetItemMenu"
						                  :command="key"
						                  :key="key"
						                  :disabled="key === 'combine' && !combinable"
						                  v-if="showMenuItem(key)"
						>{{item}}
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

				<el-popconfirm class="delete-button" :title="$t('Are you sure to delete this asset?')"
				               @onConfirm="onClickDelete"
				               placement="top">
					<el-button
						slot="reference"
						class="micro" circle size="mini"
						type="danger"
						icon="el-icon-delete"
						@click.stop
					/>
				</el-popconfirm>
			</div>
		</div>
		<div class="name">
			<span>{{data.name}}</span>
			<span class="full-name">{{data.name}}</span>
		</div>
		<div :class="{'dep-flag': depFlag >= 0, 'explicit': depFlag === 1, 'implicit': depFlag === 2}">

		</div>
	</div>
</template>

<script>
	import {mapMutations, mapActions} from "vuex";
	import {fileTypeIcon} from "../../../config";
	import {selectFile, strEllipsis} from "../../../utils";
	import SvgaPreviewView from "../../../components/SvgaPreviewView";

	export default {
		name: "FileItem",
		components: {SvgaPreviewView},
		props: {
			data: {type: Object},
			editable: {type: Boolean, default: false},
			combinable: {type: Boolean, default: false},
		},
		data() {
			return {
				assetItemMenu: this.$t('assetItemMenu'),
			}
		},
		watch: {},
		computed: {
			fileIcon() {
				let icon = fileTypeIcon[this.data.ext];
				return 'icon-' + (icon ? fileTypeIcon[this.data.ext] : fileTypeIcon['']);
			},
			showThumbnail() {
				return fileTypeIcon[this.data.ext] === 't';
			},
			showSvga() {
				return this.data.ext === '.svga';
			},
			showIcon() {
				return !this.showThumbnail && !this.showSvga;
			},
			thumbnailUrl() {
				return this.data.url;
			},
			ellipsisName() {
				return strEllipsis(this.data.name, 14, 5);
			},
			depFlag() {
				return this.$parent.getDepFlag(this.data.uuid);
			},
		},
		methods: {
			onDbclick() {
				this.$emit('show-file-details', this.data);
			},
			onClickDelete() {
				/*this.$confirm(this.$t('Are you sure to delete this asset'), this.$t('Alert'), {
					showClose: false,
					closeOnClickModal: false,
					closeOnPressEscape: false,
					confirmButtonText: this.$t('Confirm'),
					cancelButtonText: this.$t('Cancel'),
					type: 'warning'
				}).then(() => {
					this.$emit('delete', this.data);
					this.deleteAsset(this.data.uuid);
				}).catch((e) => {
				});*/
				this.$emit('delete', this.data);
				this.deleteAsset(this.data.uuid);
			},
			onMoreMenu(command) {
				switch (command) {
					case 'rename':
						this.editName();
						break;
					case 'replace':
						this.replace();
						break;
					case 'combine':
						this.$emit('combine', this.data);
						break;
					case 'to-jpg':
						this.$emit('to-jpg', this.data);
						break;
				}
			},
			editName() {
				this.$prompt(this.$t('Input asset name'), this.$t('Rename asset'), {
					inputValue: this.data.name,
					confirmButtonText: this.$t('Confirm'),
					cancelButtonText: this.$t('Cancel'),
					closeOnClickModal: false,
					inputPattern: /^.{1,256}$/,
					inputErrorMessage: this.$t('Invalid asset name'),
				}).then(({value}) => {
					this.$set(this.data, 'name', value);
					this.modifyAsset();
				}).catch(() => {
				});
			},
			replace() {
				selectFile((files) => {
					let file = files[0];
					this.replaceAsset({
						file: file,
						uuid: this.data.uuid,
					});
				})
			},
			showMenuItem(key) {
				const {ext} = this.data;
				if (key === 'to-jpg') {
					return ext === '.png';
				} else {
					return true;
				}
			},
			...mapMutations([
				'deleteAsset',
				'modifyAsset',
				'assetDragStart',
			]),
			...mapActions([
				'replaceAsset'
			])
		}
	}
</script>

<style scoped>

</style>