<template>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span>我的待办
				<el-badge class="mark" v-if="backlogCount !== 0" :value="backlogCount" :max="99" style="line-height: 0;margin-top: 8px"/>
				</span>
				<div style="float:right;">
					<el-button type="text" @click="refreshList()">刷新</el-button>
					<el-button type="text" @click="toPendingList()">更多>></el-button>
				</div>
			</div>
		</template>
		<div style="height: 250px;margin-top: 5px">
			<vxe-table
				border="inner"
				:loading="loading"
				size="small"
				ref="todoTable"
				show-header-overflow
				show-overflow
				highlight-hover-row
				:menu-config="{}"
				:print-config="{}"
				:import-config="{}"
				:export-config="{}"
				:data="dataList"
				header-align="center"
				:checkbox-config="{}">
				<vxe-column title="实例标题"  field="vars.title">
				</vxe-column>
				<vxe-column title="流程名称" field="processDefinitionName"></vxe-column>
				<vxe-column title="当前环节" field="task.name">
					<template #default="scope">
						<el-tag>{{scope.row.task.name}}</el-tag>
					</template>
				</vxe-column>
				<vxe-column title="流程发起人" field="vars.userName"></vxe-column>
				<vxe-column
					field="task.createTime"
					title="发起时间">
				</vxe-column>
				<vxe-column title="操作" width="100px" fixed="right" align="center">
					<template #default="scope">
						<div>
							<el-button text type="primary" @click="todo(scope.row)">办理</el-button>
							<el-button  text type="primary" @click="trace(scope.row)">进度</el-button>
						</div>
					</template>
				</vxe-column>
			</vxe-table>
			<vxe-pager
				background
				style="margin-top: 5px"
				size="small"
				:current-page="tablePage.currentPage"
				:page-size="tablePage.pageSize"
				:total="tablePage.total"
				:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
				:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
				@page-change="currentChangeHandle">
			</vxe-pager>
		</div>
	</el-card>
	<v-dialog
		title="查看进度"
		:close-on-click-modal="true"
		append-to-body
		v-model="visible"
		width="70%"
		height="600px"
	>
		<flow-chart
			ref="preview"
			:processInstanceId="processInstanceId"
		></flow-chart>
	</v-dialog>

	<UpdatePassword ref="updatePassword" :innerVisible="innerVisible" v-on:innerDialog="getInnerStatus($event)"></UpdatePassword>
</template>

<script>
	// import FlowChart from '../modeler/FlowChart'
	import pick from "lodash.pick";
	import UserSelect from "@/components/userSelect/UserSelectDialog";
	import taskService from "@/api/flowable/taskService";
	import userService from "@/api/sys/UserService";
	import UpdatePassword from "@/views/layout/UpdatePassword2.vue";
	export default {
		// title: "我的待办",
		// icon: "wodedaiban",
		// description: "我的待办任务",
		// layout: {
		// 	w: 6,
		// 	h: 15,
		// },
		data() {
			return {
				dataList: [],
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: [],
				},
				loading: false,
				visible: false,
				currentTask: null,
				processInstanceId: "",
				timer: null,
			};
		},
		computed:{
			backlogCount(){
				return this.$store.state.global.backlogCount
			},
		},
		mounted() {
			// 页面加载后
			// 1.在执行定时器前先执行一次获取接口数据的操作函数, 否则接口会1秒钟后才调用
			// 2.为了避免退出当前页面后,在其他页面也继续调用接口,退出前需要清除定时器.
			this.refreshList();
			this.timer = setInterval(() => {
				setTimeout(this.refreshList, 0)
			}, 60000)
			// 判断当前用户是否为管理员
			userService.is().then((data) => {
				if (!data) {
					// 如果当前用户不是管理员，则判断是否修改过密码
					userService.isUpdatePassword().then((data) => {
						if (!data) {
							// 如果没有修改过密码，则弹出密码修改窗口
							this.innerVisible = true
							this.$refs.updatePassword.init(!data)
						//
						}
					})
				}
			})

		},
		beforeDestroy () {
			clearInterval(this.timer)
			this.timer = null
		},
		components: {
			UserSelect,
			UpdatePassword
			// FlowChart
		},
		methods: {
			getInnerStatus(status){
				this.innerVisible = status
			},
			// 获取数据列表
			refreshList() {
				this.loading = true;
				taskService
					.todoList({
						current: this.tablePage.currentPage,
						size: this.tablePage.pageSize,
						orders: this.tablePage.orders,
						...this.searchForm,
					})
					.then((data) => {
						this.dataList = data.records;
						this.tablePage.total = data.total;
						this.loading = false;
						this.$store.state.global.backlogCount = data.total
					});
			},
			// 当前页
			currentChangeHandle({ currentPage, pageSize }) {
				this.tablePage.currentPage = currentPage;
				this.tablePage.pageSize = pageSize;
				this.refreshList();
			},
			todo(row) {
				taskService
					.getTaskDef({
						taskId: row.task.id,
						taskName: row.task.name,
						taskDefKey: row.task.taskDefinitionKey,
						procInsId: row.task.processInstanceId,
						procDefId: row.task.processDefinitionId,
						procDefKey: row.task.processDefKey,
						status: row.status,
					})
					.then((data) => {
						var cs = "cs2"
						this.$router.push({
							path: "/flowable/task/TaskForm",
							query: {
								wareHouseId: row.processDefinitionName === '物资管理-入库修改' ? data.businessId : '',
								returnId: row.processDefinitionName === '物资管理-领用退回申请' ? data.businessId : '',
								formTitle: `${row.vars.title}`,
								title: `审批【${row.task.name || ""}】`,
								cs: cs,
								...pick(
									data,
									"formType",
									"formReadOnly",
									"formUrl",
									"procDefKey",
									"taskDefKey",
									"procInsId",
									"procDefId",
									"taskId",
									"status",
									"title",
									"businessId"
								),
							},
						});
					});
			},
			toPendingList () {
				// this.$router.push('./PendingList')
				this.$router.push({
					path: '/sys/dashboard/workBench/PendingList',
					query: {
						num: 3
					}
				})
			},
			trace(row) {
				this.processInstanceId = row.task.processInstanceId;
				this.visible = true;
				this.$nextTick(() => {
					this.$refs.preview.init();
				});
			},
		},
	};
</script>
<style scoped>
	.box-card {
		height: 100%;
	}
</style>
