<template>
	<div class="main">
		<div
			class="flowContent"
		>
			<flowNode :flowData="flowData" :flowState="flowState" @getCurNode="getCurNode" v-if="flowShow"></flowNode>
			<ul class="legend">
				<li><span class="circle wjh"></span><span class="name">未激活</span></li>
				<li><span class="circle jh"></span><span class="name">激活</span></li>
				<li><span class="circle gq"></span><span class="name">挂起</span></li>
				<li><span class="circle wc"></span><span class="name">完成</span></li>
				<li><span class="circle zz"></span><span class="name">终止</span></li>
			</ul>
		</div>
		<div class="lcInfo">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>流程信息</span>
				</div>
				<ul>
					<li>
						<span>流程标题</span>
						<span>{{lcInfo.processInstance.title}}</span>
					</li>
					<li>
						<span>创建人</span>
						<span>{{lcInfo.processInstance.creatorName}}</span>
					</li>
				</ul>
			</el-card>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>环节信息</span>
				</div>
				<ul>
					<li>
						<span>环节名称</span>
						<span>{{hjInfo.name}}</span>
					</li>
					<li>
						<span>环节状态</span>
						<span>{{hjInfo.activityState | hjztFilter}}</span>
					</li>
				</ul>
			</el-card>
		</div>
	</div>
</template>

<script>
import { getActivityDetail,templateLoad,getProcessOutline } from "@api/user";
import flowNode from "./flownode"
export default {
	name: "",
	components: {flowNode},
	props: {},
	data() {
        return {
			flowData:{},
			flowShow:false,
			flowState:[],
			lcInfo:{},
			hjInfo:{}
        }
	},
	created() {},
	mounted() {
        this.getTemplate();
    },
	methods: {
        getTemplate(){
            let params = {
                "params": {},
                "workflowPeriod": "current",
                "workitemInstanceId": this.$route.query.workitemInstanceId
			}
			vm.loadingShow('数据获取中');
            getActivityDetail(params).then((res) => {
                console.log(res.processInstance.templetId);
				this.lcInfo = res;
                templateLoad(res.processInstance.templetId).then((res1) => {
					console.log(this.$x2js.xml2js(res1).Process,'Process');
					getProcessOutline(res.processInstance.id).then((res2) => {
						vm.loadingHide();
						this.flowData = this.$x2js.xml2js(res1).Process;
						console.log(res2.activityOutlines,'res.activityOutlines');
						this.flowState = res2.activityOutlines;
						this.$nextTick(()=>{
							this.flowData.Nodes.ManualNode.push(this.flowData.Nodes.EndNode);
							this.flowData.Nodes.ManualNode.unshift(this.flowData.Nodes.StartNode);
							this.flowData.Nodes.ManualNode.forEach(item => {
								item.activityState = this.flowState.filter( i => i.activityTemplateId == item.id)[0].activityState;
							});
							this.flowShow = true;
						})
					})
					.catch((error) => {
						vm.loadingHide();
					});
                })
                .catch((error) => {
					vm.loadingHide();
				});
				})
            .catch((error) => {
				vm.loadingHide();
			});
		},
		//获取当前点击节点名称
		getCurNode(name){
			console.log(name);
			this.hjInfo = this.flowState.filter( i=> i.name == name)[0]
		}
	},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
.main {
	position: relative;
	background-color: #F4F9FF;
	.flowContent {
		width: calc(100% - 506px);
		height: 100%;
		position: relative;
		overflow-x: scroll;
		float: left;
	}
	.lcInfo{
		width: 480px;
		height: calc(100% - 6px);
		margin-left: 20px;
		background-color: #ffffff;
		float: left;
		border: 1px solid #D0D4D9;
		box-shadow: 0 2px 15px 1px rgba(49, 132, 245, 0.1);
		box-sizing: border-box;
		padding: 18px;
		.text {
			font-size: 14px;
		}

		.item {
			margin-bottom: 18px;
		}
		.clearfix:before,
		.clearfix:after {
			display: table;
			content: "";
		}
		.clearfix:after {
			clear: both
		}

		.box-card {
			width: 100%;
			margin-bottom: 20px;
			ul{
				border: 1px solid #DCDFE6;
				li{
					border-bottom: 1px solid #DCDFE6;
					line-height: 50px;
					height: 50px;
					span{
						display: inline-block;
					}
					span:first-child{
						font-weight: bold;
						text-indent: 10px;
						float: left;
					}
					span:last-child{
						color: #595959;
						margin-right: 10px;
						float: right;
					}
				}
				li:last-child{
					border-bottom: 0;
				}
			}
		}
	}
	.legend{
		position: absolute;
		top: 20px;
		right: 20px;
		li{
			margin-bottom: 10px;
			.circle{
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 7px;
			}
			.name{
				margin-left: 10px;
				font-weight: bold;
				font-size: 18px;
			}
			.wjh{
			background-color: #A9A9A9;
			}
			.jh{
			background-color: #449D44;
			}
			.gq{
			background-color: #F0AD4E;
			}
			.wc{
			background-color: #5BC0DE;
			}
			.zz{
			background-color: #F13F2F;
			}
		}
	}
}
</style>