<template>
	<div style="text-align: center;">
		<div style="width:600px;float: left; margin: 10px;">

			<el-input v-model="queryAssingee" placeholder="请输入处理人" style="width :300px;float: left;"></el-input>
			<el-button type="primary" @click="handleSearch">查询</el-button>

		</div>

		<el-table :data="tableData" border   highlight-current-row  >

			  <el-table-column  show-overflow-tooltip prop="name" label="流程名称" >
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="startUserId" label="流程发起人">
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="startTime" label="开始时间"  width='180'>
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="duration" label="耗时">
			</el-table-column>

			  <el-table-column  show-overflow-tooltip prop="assignee" label="当前任务处理人">
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="id" label="id" v-if="isShow">
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="key" label="key" v-if="isShow">
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="processDefinitionId" label="流程定义ID">
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="processInstanceId" label="流程实例ID">
			</el-table-column>
			  <el-table-column  show-overflow-tooltip prop="isSuspended" label="状态">
			</el-table-column>

 
			
			
			  <el-table-column  show-overflow-tooltip label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="success" @click="openDialog(scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
		</el-pagination>





		<el-dialog title="审批意见" :visible.sync="dialogVisible" width="500px">
			<el-form :model="form" label-width="80px">
				<el-form-item label="审批意见">
					<el-input v-model="form.id"></el-input>
				</el-form-item>
				<el-button type="success" @click="handleComplete">通过</el-button>
				<el-button type="danger" @click="handleBack">驳回</el-button>
				<el-button type="primary" @click="handleCancel">取消</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>

	</div>
</template>

<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				//表格初始化参数
				tableData: [],
				mi: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				//查询条件
				queryAssingee: 'zhangsan',
				//录入框
				dialogVisible: false,
				form: {
					processName: '',
					processKey: '',
					processDescription: ''
				},
				isShow: true,
				//activitiModeler: 'http://172.16.7.211:8080/thdemo/modeler.html?modelId='
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			//this.getTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'ProcessTask/find.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					assignee: this.queryAssingee,
					userId: sessionStorage.getItem("userId")
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.list
					this.totalRows = response.data.total

				});
			},

			handleSearch() {
				this.getTableData()
			},
			openDialog(row) {
				this.$store.commit('setProcessInstanceId', row.processInstanceId)
				this.$router.push({
					path: '/process/mytaskdeal',
					query: {
						instanceId: row.processInstanceId,
						processKey: row.key,
						processDefinitionId: row.processDefinitionId,
						taskId: row.id
					},
					meta: {
						keepAlive: false
					}
				})
			},
			handleComplete(row) {
				var url = 'ProcessTask/complete.do'
				var param = {
					taskId: row.id,
					userId: sessionStorage.getItem("userId")

				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '操作成功!',
						});
						this.getTableData()
					} else {
						this.$message({
							type: 'error',
							message: '操作失败' + response.data
						});
					}
				});

			},

			handleCancel() {
				this.dialogVisible = false

			},
			handleBack(row) {
				var url = 'ProcessTask/complete.do'
				var param = {
					taskId: row.id,
					userId: sessionStorage.getItem("userId")

				}
				axios.post(url, param).then(response => {
					if (response.data === 'success') {
						this.$message({
							type: 'success',
							message: '操作成功!',
						});
						this.getTableData()
					} else {
						this.$message({
							type: 'error',
							message: '操作失败' + response.data
						});
					}
				});

			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},

		},
		beforeRouteLeave(to, from, next) {
			console.log("beforeRouteLeave")
			to.meta.keepAlive = false;
			next();
		}
	}
</script>
