<template>
	<div id="app">
		<router-view v-if="isRouterAlive" />
		<div class="loading" v-show="isShow">
			<div class="content">
				<i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="color:#0081FF"></i>
				<span>{{ tips }}</span>
			</div>
		</div>
		<!-- 审核 -->
		<el-dialog
			v-dialogDrag
			:modal="false"
			:close-on-click-modal="false"
			title="审核"
			:visible.sync="shVisible"
			width="600px"
			class="sh-dialog"
		>
			<div class="sh-wrap">
				<el-row :gutter="20">
					<el-col :span="24">
						<span class="label">不动产单元号：</span>
						<span class="value">{{shData.bdcdyh}}</span>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<span class="label">坐落：</span>
						<span class="value">{{shData.zl}}</span>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<span class="label">审核意见：</span>
						<el-input
							class="value"
							type="textarea"
							:rows="2"
							placeholder="请输入内容"
							v-model="shData.shyj">
						</el-input>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<span class="label">审核人：</span>
						<span class="value">{{shData.shr}}</span>
					</el-col>
					<el-col :span="12">
						<span class="label">审核时间：</span>
						<span class="value">{{shData.shsj}}</span>
					</el-col>
				</el-row>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm('sh')">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</span>
		</el-dialog>
		<!-- 提交 -->
		<el-dialog
			v-dialogDrag
			:close-on-click-modal="false"
			title="选择审批人"
			:visible.sync="tjVisible"
			width="500px"
			@close="visible = false"
			:modal-append-to-body="false"
		>
		<div class="spr">
			<el-radio
				v-model="spr"
				:label="item.accountNo"
				v-for="item in sprList"
				:key="item.accountNo"
				border
				>{{ item.name }}</el-radio
			>
		</div>
		<div class="dialog-footer">
			<el-button type="primary" @click="confirm('tj')">确 定</el-button>
			<el-button @click="tjVisible = false">取 消</el-button>
		</div>
		</el-dialog>
	</div>
</template>

<script>
import { rollbackProcess, transitProcess,pretransitProcess } from "@api/user";
export default {
	provide() {
		return {
			reload: this.reload,
		};
	},
	data() {
		return {
			isRouterAlive: true,
			isShow: false,
			tips: "正在努力加载中...",
			shVisible:false,
			shData:{},
			tjVisible:false,
			sprList:[],
			spr:''
		};
	},
	mounted() {
		window.addEventListener("unload", this.saveState);
		window.vm = this;
	},
	methods: {
		saveState() {
			sessionStorage.setItem("state", JSON.stringify(this.$store.state));
		},
		reload() {
			this.isRouterAlive = false;
			this.$nextTick(function() {
				this.isRouterAlive = true;
			});
		},
		loadingShow(tips) {
			this.isShow = true;
			this.tips = tips + "...";
		},
		loadingHide() {
			this.isShow = false;
		},
		//审核内容弹框
		setShDialog(flag,data){
			this.shVisible = flag;
			this.shData = data;
			console.log(data,'data');
		},
		//提交流程弹框
		setTjDialog(flag){
			this.tjVisible = flag;
		},
		//获取提交的审批人
		getSpr() {
			let params = {
				params: {},
				workitemInstanceId: this.$route.query.workitemInstanceId,
			};
			pretransitProcess(params).then((res) => {
				this.sprList = res[0].masterActors;
				this.spr = res[0].masterActors[0].accountNo;
			});
		},
		cancel(){
			this.shVisible = false;
		},
		confirm(type){
			if (type == 'sh') {
				let params = {
					executeActors: this.sprList.filter(i => i.activityInstance == this.spr),
					message: "",
					params: {
						shyj:this.shData.shyj
					},
					targetNodes: [],
					workitemInstanceId:this.$route.query.workitemInstanceId
				};
				transitProcess(params).then((res) => {
					this.$message({
						type:'success',
						message:'审核通过'
					})
				});
			}else{
				let params = {
					executeActors: this.sprList.filter(i => i.activityInstance == this.spr),
					message: "",
					params: {},
					targetNodes: [],
					workitemInstanceId:this.$route.query.workitemInstanceId
				};
				transitProcess(params).then((res) => {
					this.$message.success("提交成功！")
				});
			}
		},
		// 退回
		rollback(data){
			rollbackProcess(data).then((res) => {
				this.sprList = res[0].masterActors;
				this.spr = res[0].masterActors[0].accountNo;
			});
		}
	},
	watch: {
		tjVisible: {
			handler(val) {
				if (val) {
					this.getSpr();
				}
			},
			immediate: true,
		},
	},
};
</script>

<style lang="less">
#app {
	position: relative;

	.loading {
		width: 100%;
		height: 100%;
		// background-color: rgba(255, 255, 255, .3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		.content {
			width: 240px;
			height: 160px;
			background: #ffffff;
			box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.24);
			border-radius: 4px;
			border: 1px solid #e6e6e6;
			box-sizing: border-box;
			padding: 32px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -80px;
			margin-top: -120px;
			i,
			span {
				display: block;
				margin: 0 auto;
				text-align: center;
			}
			span {
				margin-top: 26px;
				color: #6d7278;
				font-size: 14px;
			}
		}
	}
	.sh-dialog{
		/deep/.el-dialog__body{
			padding-bottom: 0!important;
		}
		
		.sh-wrap{
			margin-top: 10px;
			.el-row{
				margin: 20px 0;
				font-size: 16px;
				.label{
					display: inline-block;
					width: 114px;
					text-align: right;
					vertical-align: top;
				}
				.value{
					display: inline-block;
					width: calc(100% - 114px);
					vertical-align: top;
				}
			}
		}
	}
	.spr {
		margin: 20px 0;
	}
	.dialog-footer {
		text-align: center;
	}
}
.popper-zxx {
	padding: 0 !important;
	/deep/ .el-tabs__header {
		margin-bottom: 10px;
	}
	ul {
		margin-bottom: 10px;
		li {
			cursor: pointer;
			padding: 8px 16px;
			position: relative;
			i {
				position: absolute;
				right: 20px;
				top: 11px;
				color: #4eb2ff;
				display: none;
			}
		}
		li:hover {
			background: #f0f9ff;
		}
		.cantClick {
			color: #bbb !important;
			cursor: not-allowed !important;
		}
		.cantClick:hover {
			background: #ffffff !important;
		}
		.choosed {
			i {
				display: inline-block;
			}
		}
	}
}
</style>