<template>
	<el-dialog
		title="催办记录"
		:visible.sync="urgentRecordDialog"
		:close-on-click-modal="false"
	>
		<el-table
			:data="rows"
			style="width: 100%;"
			border
			header-cell-class-name="todo-header-row"
			row-class-name="todo-row"
			size="medium"
			:default-sort="{ prop: 'urgrntDate', order: 'descending' }"
		>
			<el-table-column
				prop="instId"
				width="90"
				label="流程编号"
				align="center"
			></el-table-column>
			<el-table-column
				prop="subject"
				show-overflow-tooltip
				width="150"
				label="流程标题"
				align="center"
			></el-table-column>
			<el-table-column
				prop="nodeName"
				show-overflow-tooltip
				width="100"
				label="任务名称"
				align="center"
			></el-table-column>

			<el-table-column
				prop="content"
				show-overflow-tooltip
				label="催办内容"
				align="center"
			></el-table-column>
			<el-table-column
				prop="urgrntDate"
				width="150"
				label="催办日期"
				align="center"
			></el-table-column>
			<el-table-column
				prop="appointee"
				show-overflow-tooltip
				width="120"
				label="被催办人"
				align="center"
			></el-table-column>
			<el-table-column
				prop="promoter"
				show-overflow-tooltip
				width="90"
				label="催办人"
				align="center"
			></el-table-column>

			<el-table-column width="80" align="center" label="催办类型">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.type == 'mail'" size="small">邮件</el-tag>
					<el-tag v-if="scope.row.type == 'sms'" size="small">短信</el-tag>
					<el-tag v-if="scope.row.type == 'smsApproval'" size="small"
						>短信审批</el-tag
					>
				</template>
			</el-table-column>
		</el-table>
		<el-footer style="padding-top: 10px;" height="45px">
			<el-row type="flex" justify="end">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pagination.page"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pagination.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</el-row>
		</el-footer>
	</el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	name: 'urgentRecord',
	props: ['promoterId', 'instId'],
	components: {},
	data() {
		return {
			urgentRecordDialog: false,
		};
	},
	computed: mapState({
		rows: state => state.storeProcess.rows,
		pagination: state => state.storeProcess.pagination,
		total: state => state.storeProcess.total,
	}),
	methods: {
		//鼠标点击页面其他其他位置不关闭弹框
		handleClose(done) {
			this.urgentRecordDialog = true;
			this.search();
		},
		handleSizeChange: function (size) {
			//每页下拉显示数据
			this.$store.dispatch('storeProcess/setPaginationSize', size);
			this.search();
		},
		handleCurrentChange: function (currentPage) {
			//点击第几页
			this.$store.dispatch('storeProcess/setPaginationPageNum', currentPage);
			this.search();
		},
		search() {
			let pageBean = {
				pageBean: this.pagination,
				querys: [
					{
						property: 'PROMOTER_ID_',
						value: this.promoterId,
						operation: 'EQUAL',
						relation: 'AND',
					},
					{
						property: 'INST_ID_',
						value: this.instId,
						operation: 'EQUAL',
						relation: 'AND',
					},
				],
			};
			this.$store.dispatch('storeProcess/getUrgrntById', pageBean);
		},
	},
};
</script>

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

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

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

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

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

.top-title {
	line-height: 58px;
	margin-left: 20px;
	font-size: 16px;
	color: #a2a2a2;
}
/deep/.el-tree {
	position: relative;
	cursor: default;
	background: #fff;
	color: $--color-text-primary;
	font-size: 13px;
}
/deep/.el-dialog__body {
	padding: 10px 20px;
	color: $--color-text-regular;
	font-size: 14px;
}
</style>
