<template>
	<div class="_box">
		<div>
			<div class="_title">流程跟踪<span></span></div>
			<!-- 下拉选择公司 -->
			<!-- <div class="company-select" v-if="companys !== '' && companys.length > 1">
				<el-dropdown
					trigger="click"
					@command="selectComPany"
				>
					<span class="el-dropdown-link">
							{{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
							<div v-for="item in companys" :key="item.id">
									<el-dropdown-item :command="item">{{item.companyName}}</el-dropdown-item>
							</div>
					</el-dropdown-menu>
				</el-dropdown>
			</div> -->
			<div class="tableArea">
				<el-table
					individual-columns="individual-vue-table-columns"
                    :individual-info="individualInfo"
                    drag-column="individual-vue-table"
					:data="tableData"
					v-loading="tableLoading"
					:height="tableHeight + 'px'"
					style="width: 100%" 
					ref="personalTaskTable"
					border
					class="table"
					highlight-current-row>
					<!-- 序号 -->
					<el-table-column
						width="80px"
						type="index"
						label="序号"
						align="center">
					</el-table-column>
					<!-- tableKey表示为根据获取的tableData设置的header显示值列表 -->
					<el-table-column
						v-for ="(item, index) of tableKeys"
						:key="index"
						:label="item.label"
						:prop="item.key"
						:fixed="item.fixed"
						:width="item.width"
						header-align="center"
						align="center"
						sortable
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column
						label="操作"
						align="center"
						width="150">
						<template slot-scope="scope">
							<el-button
								type="text"
								size="small"
								@click="goDeal(scope.row, 'see')"
								v-privilege="activeMenu + 'LOOK'"
							>详情</el-button>
							<el-button
								type="text"
								size="small"
								@click="goDeal(scope.row, 'track')"
								v-privilege="activeMenu + 'LOOK'"
							>跟踪</el-button>
							<el-button
								type="text"
								size="small"
								@click="goDeal(scope.row, 'cancel')"
								style="color: #f56c6c"
								v-privilege="activeMenu + 'DELETE'"
							>删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="foot-style">
	            <el-pagination
	                @size-change="handleSizeChange"
	                @current-change="handleCurrentChange"
	                :current-page='pageIndex'
	                :page-sizes="[10, 20, 30, 40, 100, 200]"
	                :page-size='pageSize'
	                layout="total, sizes, prev, pager, next, jumper"
	                :total='total'
	            >
	            </el-pagination>
	        </div>
	        <el-dialog
				title="此操作撤回并删除您此条申请"
				:visible.sync="dialogVisible"
				:before-close="handleClose"
				center>
				<div style="margin-bottom: 30px;">
					<el-input
						v-model="deleteReason"
						type="textarea"
						:rows="2"
						placeholder="请输入撤回申请理由"
					>
					</el-input>
				</div>
				<div style="text-align: center;">
					<el-button size="small" type="primary" @click="submit">确 定</el-button>
					<el-button size="small" @click="handleClose">取 消</el-button>
				</div>
				</span>
			</el-dialog>
		</div>
		<icore-individual :uiId="activeMenu" indexClass="individual-index"></icore-individual>
	</div>
</template>

<script>
	import {  getCookie } from '@/utils/util.js';
	export default {
		data () {
			return {
				dialogVisible: false, //任务取消弹窗
				deleteReason: '', //取消任务理由
				dialogData: '', //行数据
				activeMenu: '',
				individualInfo: {},
				tableHeight: 0,
				tableLoading: false, // 表格加载
				tableKeys: [],
				userId: '',
				tableData: [],
				pageSize: 20, // 默认每页显示条数
				pageIndex: 1, // 默认当前页
				total: 0, //数据总数
				userMap: {}, // 用户详情
				companys: [], // 公司数组
				companyId: '',
				companyName: '',
				scroll: 0 // 滚动条位置
			}
		},
		created () {
			this.activeMenu = window.top.localStorage.getItem('activeMenu');
		},
		mounted () {
			// 获取公司信息
			this.companys = JSON.parse(window.top.localStorage.getItem('companys'));
			this.companyId = window.top.localStorage.getItem('companyId');
			if (this.companyId !== '' && this.companyId !== null) {
				this.companyName = this.companys.find((x) => x.id === this.companyId).companyName;
			}
			// 获取当前用户
			this.userId = getCookie('userId');
			this.getUser();
			this.$nextTick(() => {
				this.tableHeight = this.getTreeHeight(this.$refs['personalTaskTable'].$el) - 80;
			});
		},
		// 操作成功刷新列表
		activated() {
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.personalTaskTable.bodyWrapper.scrollTop = this.scroll;
          		}, 13)	
			})
			if (this.$route.params.operate && this.$route.params.operate === 'success') {
				this.getTableData();
			}
		},
		methods: {
			//  计算树区域高度
			getTreeHeight (dom) {
				return window.innerHeight - dom.offsetTop;
			},
			getUser () {
				this.tableKeys = [
					{
						key: 'type',
						label: '流程类型',
						width: 'auto'
					},
					{
						key: 'name',
						label: '流程名称',
						width: 'auto'
					},
					{
						key: 'userName',
						label: '申请人',
						width: 'auto'
					},
					{
						key: 'reason',
						label: '申请理由',
						width: 'auto'
					},
					{
						key: 'startTime',
						label: '申请时间',
						width: 'auto'
					}
				]
				this.axios.get('pass/v1/sysusers/?pageSize=1000000').then((res) => {
        			if (res.code === '0') {
        				res.data.list.forEach((item, index) => {
        					this.userMap[item.id] = item;
        				});
        				this.getTableData();
        			} else {
        				this.$message.error(res.message);
        			}
				});
			},
			// 下拉选择公司
			selectComPany (command) {
				this.companyId = command.id;
				this.companyName = command.companyName;
				this.getTableData();
			},
			// 获取申请历史记录
			getTableData () {
				let that = this;
				that.tableLoading = true;
				this.axios.get('pass/act/v1/actusertasks/mySubmitProcess?userId=' + this.userId + '&companyId=' + this.companyId + '&pageNum=' + this.pageIndex + '&pageSize=' + this.pageSize).then((res) => {
					let data = [];
					if (res.code === '0') {
						let dataList = res.data.list;
						if (dataList.length >= 1) {
							for (let i = 0; i < dataList.length; i++) {
								let item = {};
								item.type = res.data.list[i].type;
								item.name = dataList[i].procDefName;
								item.businessKey = dataList[i].businessMap.businessKey;
								item.userId = dataList[i].businessMap.userId;
								if (that.userMap[item.userId]) {
									item.userName = that.userMap[item.userId].userName;
								}
								item.reason = dataList[i].businessMap.memo;
								item.taskId = dataList[i].businessMap.taskId;
								item.instanceId = dataList[i].procInstId;
								item.startTime = dataList[i].startTime;
								data.push(item);
							}
						}
						this.tableData = data;
						this.total = res.data.total;
						this.tableLoading = false;
					} else {
						this.$message.error(res.message);
						this.tableLoading = false;
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			// 跳转处理页面
			goDeal (row, status) {
				if (status === 'cancel') {
					this.dialogVisible = true;
					this.dialogData = row;
				} else {
					let wrapperScrollTop = this.$refs.personalTaskTable.bodyWrapper.scrollTop;
					this.scroll = wrapperScrollTop;
					let data = row ? JSON.stringify(row) : '';
					let userMap = JSON.stringify(this.userMap);
					this.$router.push({ name: 'approvelDetails', query: { type: status, data: data || '', userId: this.userId, userMap: userMap}});
				}
			},
			// 删除个人申请
			submit () {
				this.axios.get('pass/act/v1/act/endProcess/?userId=' + this.userId + '&formKey=' + this.dialogData.businessKey + '&deleteReason=' + this.deleteReason).then((res) => {
					if (res.code === '0') {
						this.$message.success('撤回成功')
						this.dialogVisible = false;
						this.deleteReason = '';
					} else {
						this.$message.error(res.message);
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			// 当前页
			handleCurrentChange (pageIndex) {
	            this.pageIndex = pageIndex
	            this.getTableData();
	        },
	        // 每页条数
	        handleSizeChange (pageSize) {
	            this.pageIndex = 1
	            this.pageSize = pageSize;
	            this.getTableData();
	        },
	        handleClose() {
				this.$confirm('确认关闭？')
				.then(_ => {
					this.dialogVisible = false;
					this.deleteReason = '';
				})
				.catch(_ => {});
			}
		}
	}
</script>

<style lang="less" scoped>
	._box {
		padding: 15px;
		min-width: 800px;
    	position: relative;
		._title {
		    width: 100%;
		    height: 30px;
		    line-height: 30px;
		    margin-top: 0px;
		    font-size: 18px;
		    padding-left: 15px;
		    position: relative;
			span {
		        display: block;
		        position: absolute;
		        width: 5px;
		        height: 30px;
		        background: #409EFF;
		        left: 0px;
		        top: 0px;
		    }
		}
		.tableArea {
			.el-table__row {
				height: 35px;
			}
		}
		.foot-style {
			margin: 5px 0 0;
			text-align: right;
		}
		.company-select {
		    position: absolute;
	    	right: 20px;
			top: 15px;
		    .el-dropdown {
		        font-weight: bold;
		        font-size: 14px;
		        cursor: pointer;
		    }
		}
	}
</style>
