<template>
	<div class="_box">
	<!-- 下拉选择公司 -->
		<!-- <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>
			<div class="_title">我的已办事项<span></span></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="finishedTaskTable"
					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>
						<template slot-scope="scope">
	                        <span v-for="item in taskStatus" :key="item.value" :class="item.class" v-if="scope.column.property === 'status' && scope.row.status === item.value">
	                            {{item.label}}
	                        </span>
	                        <span v-if="scope.column.property !== 'status'">
	                            {{scope.row[scope.column.property]}}
	                        </span>
	                    </template>
					</el-table-column>
					<el-table-column
						label="操作"
						align="center"
						width="180">
						<template slot-scope="scope">
							<el-button
								type="text"
								size="small"
								@click="goDeal(scope.row, 'cancel')"
								v-privilege="activeMenu + 'CANCEL'"
							>撤回</el-button>
							<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>
						</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>
		</div>
		<icore-individual :uiId="activeMenu" indexClass="individual-index"></icore-individual>
	</div>
</template>

<script>
	import {  getCookie } from '@/utils/util.js';
	import store from '@/store/index.js';
	export default {
		data () {
			return {
				store,
				activeMenu: '',
				individualInfo: {},
				tableHeight: 0,
				tableLoading: false,// 表格加载
				tableKeys: [],
				userId: '',
				tableData: [],
				pageSize: 20, // 默认每页显示条数
				pageIndex: 1, // 默认当前页
				total: 0, //数据总数
				userMap: {}, // 用户详情
				companys: [], // 公司数组
				companyId: '',
				companyName: '',
				taskStatus: [
	                {
	                    value: '1',
	                    label: '已提交，待审批',
	                    class: 'yellow'
	                },{
	                    value: '2',
	                    label: '审核中',
	                    class: 'yellowgreen'
	                },{
	                    value: '3',
	                    label: '已完成',
	                    class: 'green'
	                }
	            ],
				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['finishedTaskTable'].$el) - 80;
			});
		},
		// 操作成功刷新列表
		activated() {
			// 滚动条保持
			this.$nextTick(() => {
				setTimeout(() => {
					this.$refs.finishedTaskTable.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'
					},
					{
						key: 'endTime',
						label: '结束时间',
						width: 'auto'
					},
					{
						key: 'status',
						label: '审批状态',
						width: 'auto'
					}
				]
				this.tableLoading = true;
				this.axios.get('pass/v1/sysusers/?pageSize=1000000' + '&companyId=' + this.companyId).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);
        			}
				});
			},
			// 获取已完成任务
			getTableData () {
				let that = this;
				this.axios.get('pass/act/v1/actusertasks/myCompleteTask?userId=' + this.userId + '&companyId=' + this.companyId + '&pageNum=' + this.pageIndex + '&pageSize=' + this.pageSize).then((res) => {
					let data = [];
					if (res.code === '0') {
						if (res.data.list.length >= 1) {
							for (let i = 0; i < res.data.list.length; i++) {
								let item = {};
								item.name = res.data.list[i].procDefName;
								item.type = res.data.list[i].type;
								item.userId = res.data.list[i].assignee;
								item.startTime = res.data.list[i].startTime;
								item.endTime = res.data.list[i].endTime;
								if (that.userMap[item.userId]) {
									item.userName = that.userMap[item.userId].userName;
								}
								item.reason = res.data.list[i].businessMap.memo;
								item.taskId = res.data.list[i].id;
								item.instanceId = res.data.list[i].procInstId;
								item.status = res.data.list[i].businessMap.status;
								// switch (res.data.list[i].status) {
								// 	case '0':
								// 		item.status = '未执行';
								// 		break
								// 	case '1':
								// 		item.status = '已执行';
								// 		break
								// }
								data.push(item);
							}
						}
						this.tableData = data;
						// this.tableData = data.slice((this.pageIndex - 1) * this.pageSize, (this.pageIndex) * this.pageSize);
						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.axios.get('pass/act/v1/act/callTack/?userId=' + this.userId + '&taskId=' + row.taskId).then((res) => {
						if (res.code === '0') {
							this.$message.success('撤回成功');
							this.getTableData();
						} else {
							this.$message.error(res.message);
						}
					}).catch((err) => {
						console.log(err)
					})
				} else {
					// 记住当前页面table滚动条位置
					let wrapperScrollTop = this.$refs.finishedTaskTable.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}});
				}
			},
			// 清空表单
			cleraForm: function () {
				let that = this;
				that.title = '';
				that.label = '';
				that.instanceId = '';
				that.remark = '';
			},
			// 当前页
			handleCurrentChange (pageIndex) {
				this.pageIndex = pageIndex
				this.getTableData();
			},
			// 每页条数
			handleSizeChange (pageSize) {
				this.pageIndex = 1
				this.pageSize = pageSize;
				this.getTableData();
			},
			// 下拉选择公司
			selectComPany (command) {
				this.companyId = command.id;
				this.companyName = command.companyName;
				// 下拉选择了公司以后需要再重新调用下查询接口，重新获取数据
				this.getTableData();
			}
		}
	}
</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;
		    }
		}
		.green {
			color: #67C23A;
		}
		.yellow {
			color: #f36716;
		}
		yellowgreen {
			color: yellowgreen;
		}
		.tableArea {
			/deep/.el-table--scrollable-y .el-table__body-wrapper {
			    overflow-y: scroll !important;
			}
		}
		.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>
