<template>
	<el-container>
		<el-container style="border-left: 1px solid #e7eaec;">
			<el-main>
				<el-row>
					<el-col :span="6">
						<el-button icon="el-icon-delete" type="danger" @click="remove"
							>删除</el-button
						>
						<el-button type="error" @click="close">返回</el-button>
					</el-col>
					<el-col :span="18">
						<el-input
							size="small"
							style="width: 380px;"
							clearable
							placeholder="标题"
							prefix-icon="el-icon-search"
							v-model="title"
						></el-input>
						<el-button
							style="margin-left: 20px;"
							size="small"
							type="primary"
							icon="el-icon-search"
							@click="loadData()"
							>{{ $t('common.search') }}</el-button
						>
						<el-button size="small" icon="el-icon-refresh" @click="reset">{{
							$t('common.reset')
						}}</el-button>
					</el-col>
				</el-row>
				<el-table
					:data="data"
					stripe
					border
					style="width: 100%;"
					header-cell-class-name="todo-header-row"
					row-class-name="todo-row"
					size="medium"
					v-loading="fullscreenLoading"
					@selection-change="handleChecked"
					ref="htTable"
				>
					<el-table-column
						type="selection"
						sortable
						width="50"
					></el-table-column>
					<ht-table-column
						type="index"
						width="50"
						align="center"
						label="序号"
					/>
					<ht-table-column
						prop="title"
						label="标题"
						:show-overflow-tooltip="true"
						:sortable="true"
					></ht-table-column>
					<ht-table-column
						prop="createTime"
						label="创建时间"
						:show-overflow-tooltip="true"
						:sortable="true"
					></ht-table-column>
					<el-table-column
						prop
						:label="$t('common.operation')"
						align="center"
						width="290"
					>
						<template slot-scope="scope">
							<el-button
								@click="edit(scope.row)"
								size="small"
								icon="el-icon-tickets"
								plain
								>编辑</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<el-footer height="45px">
				<el-row type="flex" justify="end">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageBean.page"
						:page-sizes="[10, 20, 30, 40]"
						:page-size="10"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageBean.total"
					></el-pagination>
				</el-row>
			</el-footer>
		</el-container>
	</el-container>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import form from '@/api/form.js';
export default {
	name: 'templateDraft',
	props: ['tempAlias', 'dataViewFlag', 'openType'],
	data() {
		return {
			alias_new: 'statement',
			title: '',
			fullscreenLoading: true,
			checkBoxData: [],
			pageBean: { page: 1, pageSize: 10, showTotal: true, total: 0 },
			data: [],
			selection: [],
			ignoredAlias: ['appCenterFront'],
		};
	},
	computed: {
		formDeleteUrl: function () {
			return `${window.context.form}/form/dataTemplate/v1/remove`;
		},
	},
	methods: {
		close() {
			let isSingle = '/true';
			//数据视图随机添加到其他菜单下面时获取当前菜单的别名  并且当前数据视图不是表单里的数据视图  dataViewFlag
			if (
				sessionStorage.menu_alias &&
				this.dataViewFlag == 'false' &&
				!this.ignoredAlias.includes(sessionStorage.menu_alias) &&
				this.$route.query.isNew != 'true'
			) {
				this.alias_new = sessionStorage.menu_alias;
				isSingle = '';
			} else if (this.$route.query.isNew == 'true') {
				//在前端菜单中新窗口打开
				window.close();
			}
			let path =
				'/' + this.alias_new + '/template/preview/' + this.tempAlias + isSingle;
			this.$router.push(path);
			// this.$router.go(-1);
		},
		remove() {
			if (!this.selection || this.selection.length <= 0) {
				this.$message.warning('请至少选择一项');
				return;
			}
			let ids = [];
			this.selection.forEach(item => {
				ids.push(item.id);
			});
			this.$confirm('确定删除草稿吗？')
				.then(() => {
					form.removeTempDraft(ids.join(',')).then(resp => {
						if (resp.state) {
							this.$message.success(resp.message);
							this.loadData();
						} else {
							this.$message.error(resp.message);
						}
					});
				})
				.catch(() => {});
		},
		handleChecked(selection) {
			this.selection = selection;
		},
		edit(row) {
			//判断是不是发布到前端菜单
			if (
				window.sessionStorage.menu_alias &&
				this.dataViewFlag == 'false' &&
				this.$route.query.isNew != 'true'
			) {
				this.$router.push(
					`/${sessionStorage.menu_alias}/template/form/${row.tempAlias}/editDraft/true?draftId=${row.id}`
				);
			} else if (this.$route.query.isNew == 'true') {
				this.$router.push(
					`/statement/template/form/${row.tempAlias}/editDraft/true/new?draftId=${row.id}`
				);
			} else {
				this.$router.push(
					`/statement/template/form/${row.tempAlias}/editDraft/true?draftId=${row.id}`
				);
			}
		},
		//重置
		reset() {
			this.title = '';
			this.loadData();
		},
		handleSizeChange: function (size) {
			this.pageBean.pageSize = size;
			this.loadData();
		},
		handleCurrentChange: function (currentPage) {
			this.pageBean.page = currentPage;
			this.loadData();
		},
		loadData() {
			let queryFilter = {
				pageBean: this.pageBean,
				querys: [],
			};
			if (this.tempAlias) {
				let query = {
					property: 'tempAlias',
					value: this.tempAlias,
					group: 'main',
					operation: 'EQUAL',
					relation: 'AND',
				};
				queryFilter.querys.push(query);
			}
			if (this.title) {
				let query = {
					property: 'title',
					value: this.title,
					group: 'main',
					operation: 'LIKE',
					relation: 'AND',
				};
				queryFilter.querys.push(query);
			}
			form.getMyTemplateDraftList(queryFilter).then(resp => {
				this.pageBean.page = resp.page;
				this.pageBean.pageSize = resp.pageSize;
				this.pageBean.total = resp.total;
				this.data = resp.rows;
				this.fullscreenLoading = false;
			});
		},
	},
	created() {
		// this.tempAlias = this.$route.query.tempAlias;
		this.loadData();
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-table /deep/ th.todo-header-row {
	background-color: #fafafa;
	font-size: 13px;
}

.el-table /deep/ tr.todo-row {
	font-size: 13px;
	color: $--color-text-regular;
}

.el-container {
	background-color: #fff;
}

.el-row {
	margin-bottom: 20px;
}

.el-header {
	border-bottom: 1.5px solid #ededed;
}

.todo-subject {
	cursor: pointer;
}

.todo-subject {
	color: $--theme-color;
}

.el-dropdown {
	vertical-align: top;
}

.el-dropdown + .el-dropdown {
	margin-left: 15px;
}

.el-icon-arrow-down {
	font-size: 12px;
}
</style>
