<template>
	<el-dialog :title="$t('Select from history')" width="70%" :visible.sync="visible" @open="onOpen"
	           :append-to-body="true">
		<div class="project-history-table" v-if="project">
			<el-table :data="historyProjects" stripe height="100%">
				<el-table-column
					label="时间"
					width="200">
					<template slot-scope="scope">
						<i class="el-icon-time"></i>
						<span style="margin-left: 10px">{{ $timeFormat(scope.row.operator_time) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作人"
					width="100"
					prop="operator"
				>
				</el-table-column>
				<el-table-column
					label="版本备注"
					prop="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="60">
					<template slot-scope="scope">
						<el-button
							@click.native.prevent="selectProject(scope.row)"
							type="primary" icon="el-icon-edit"
							size="small" circle plain>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="pagination"
				@current-change="handleCurrentChange"
				:current-page.sync="currentPage"
				:page-size="pageSize"
				layout="prev, pager, next, jumper"
				:total="historyProjectCount">
			</el-pagination>
		</div>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<el-button size="mini" @click="visible=false">{{$t('Cancel')}}</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	import {HISTORY_PAGE_SIZE} from "../../config";

	export default {
		name: "ProjectHistoryDialog",
		data() {
			return {
				visible: false,
				project: null,
				currentPage: 1,
				historyProjectCount: 0,
				pageSize: HISTORY_PAGE_SIZE,
				historyProjects: [],
			}
		},
		computed: {
			...mapState([
				'env',
			]),
		},
		watch: {},
		methods: {
			async show(project) {
				this.project = project;
				this.visible = true;

				this.handleCurrentChange(1);
			},
			onOpen() {

			},
			async handleCurrentChange(page) {
				const loading = this.$loading({
					lock: true,
					text: this.$t('In processing'),
				});
				this.currentPage = page;

				const {data, total} = await this.fetchHistory({
					projectID: this.project.id,
					currentPage: page,
					pageSize: this.pageSize
				});
				this.historyProjects = data;
				this.historyProjectCount = total;
				loading.close();
			},
			selectProject(item){
				this.$emit('select-history-project', this.project, 'http:' + item.url);
				this.visible = false;
			},
			...mapActions([
				'fetchHistory'
			]),
		}
	}
</script>

<style lang="scss">

</style>