<template>
	<el-dialog
		:title="$t('Pack manager')"
		width="70%"
		:visible.sync="visible"
		:append-to-body="true"
		custom-class="pack-manager-dialog"
	>
		<div>
			<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
				<el-table :data="historyItems">
					<el-table-column :label="$t('Time')" width="180px">
						<template slot-scope="scope">
							{{$timeFormat(scope.row.time)}}
						</template>
					</el-table-column>
					<el-table-column :label="$t('Remark')">
						<template slot-scope="scope">
							<el-popover
								class="popover-remark"
								placement="top"
								width="200"
								title="版本备注"
								:open-delay="500"
								trigger="hover"
								:content="scope.row.remark">
								<span slot="reference" class="short-remark">{{scope.row.remark}}</span>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column width="240px">
						<div class="operate-wrapper" slot-scope="scope">
							<el-popover
								class="popover-publish"
								placement="bottom"
								width="400"
								:title="$t('Publish to projectx')"
								@show="onPopoverPublishShow(scope.row.packResult.tpl, scope.$index)"
							>
								<publish-view :ref="'popoverPublish_' + scope.$index"></publish-view>
								<el-button
									slot="reference"
									size="mini" plain
									type="primary"
								>{{$t('Publish')}}</el-button>
							</el-popover>
							<el-button
								size="mini" plain
								type="success"
								@click="copyTpl(scope.row.packResult.tpl)"
							>{{$t('Copy skin')}}</el-button>
							<el-popconfirm :title="$t('Are you sure to delete this item?')"
							               @onConfirm="deleteItem(scope.row.id)"
							               placement="top">
								<el-button
									slot="reference"
									size="mini" plain
									type="danger"
								>{{$t('Delete')}}</el-button>
							</el-popconfirm>
						</div>
					</el-table-column>
				</el-table>
			</el-scrollbar>
		</div>
		<div slot="footer" class="dialog-footer">
			<div>
				<el-button type="primary" size="mini" @click="onPack">{{ $t("Pack") }}</el-button>
				<px-config-popover/>
			</div>
			<div>
				<el-button size="mini" @click="onClose">{{ $t("Close") }}</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {mapActions} from 'vuex'
	import copy from 'copy-to-clipboard'
	import PublishView from "./PublishView";
	import {openPreview} from "../../../utils";
	import PxConfigPopover from "../components/PxConfigPopover";

	export default {
		name: "PackManagerDialog",
		components: {PxConfigPopover, PublishView},
		data() {
			return {
				visible: false,
				isSaveProjecx: false,
				activeName: 'project',
				historyItems: [],
			}
		},
		methods: {
			async show() {
				this.visible = true;
				this.historyItems = await this.getPackHistory();
			},
			onPopoverPublishShow(tpl, index){
				this.$refs['popoverPublish_' + index].active(tpl);
			},
			onPack() {
				this.$emit('pack');
			},
			onClose() {
				this.visible = false;
			},
			copyTpl(tpl) {
				copy(tpl);
				this.$message({
					message: this.$t('Copy skin success'),
					type: "success"
				});
			},
			async deleteItem(id) {
				await this.deletePackItem(id);
				this.show();
			},
			...mapActions([
				'getPackHistory',
				'deletePackItem',
			]),
		}
	}
</script>

<style scoped>

</style>