<template>
  <div class="summary">
    <div class="title">
	  <span>您办理的是【{{projectName}}】</span>
    </div>
	<div>
		<div class="content">
		    <div class="code">事项编码</div>
		    <div class="codeMsg">{{transactcode}}</div>
		</div>
		<div class="content">
		    <div class="code">事项名称</div>
		    <div class="codeMsg">{{projectName}}</div>
		</div>
		<div class="content">
		    <div class="code">事项部门</div>
		    <div class="codeMsg">{{dept.name}}</div>
		</div>
		<div class="content">
		    <div class="code">详情地址</div>
		    <div class="codeMsg">{{taskUrl}}</div>
		</div>
		<div class="content">
			<div class="code">申请材料</div>
			<div class="codeMsg">
				<span style="margin-right: 15px;color: #07EDFE;" v-for="material in materials">{{material.name}}</span>
			</div>
		</div>
		<div class="content">
		    <div class="code">办理流程</div>
		    <div class="codeMsg">{{process}}</div>
		</div>
		<div class="content">
		    <div class="code">受理条件</div>
		    <div class="codeMsg">{{acceptCondition}}</div>
		</div>
	</div>
	<div class="button">
		<div class="cancel" @click="cancel"></div>
		<div class="nextStep" @click="nextStep"></div>
	</div>

  </div>
</template>
<script>
import { layer } from "@layui/layer-vue";
export default{
	data() {
	  return {
		projectId: '',
		projectName:'',
		transactcode:'',
		taskUrl:'',
		materials: [],
		process:'',
		acceptCondition:'',
		dept: {},
		properties: [],
		msg: '',
		serviceId:''
	  }
	},
	created() {
		this.projectId = this.$route.query.projectId;
		this.serviceId = this.$LocalStorage.SessionGet("serviceId");
		this.getProjectGuide();
	},
	methods:{
		getProjectGuide() {
			this.$axios.get(window.config.api + 'lilo/chat/getProjectGuide', {
				params: {
					projectId: this.projectId,
					serviceId: this.serviceId
				}
			}).then(item => {
				if (item.data.success) {
					this.projectName = item.data.obj.name;
					this.materials = item.data.obj.materials;
					this.dept = item.data.obj.dept;
					this.properties = item.data.obj.properties;
					if(this.properties){
						for (var i = 0, t=this.properties.length; i < t; i++) {
							var code = this.properties[i].code;
							if("transactcode" == code){
								this.transactcode = this.properties[i].value;
								continue;
							}
							if("name" == code){
								this.name = this.properties[i].value;
								continue;
							}
							if("taskUrl" == code){
								this.taskUrl = this.properties[i].value;
								continue;
							}
							if("process" == code){
								this.process = this.properties[i].value;
								continue;
							}
							if("acceptCondition" == code){
								this.acceptCondition = this.properties[i].value;
								continue;
							}
						}
					}
				}

			}).catch(err => {
				this.msg = '错误';
			})
		},
		cancel() {
			alert("111");
		},
		nextStep() {
			alert("222");
		}
	}
}
</script>

<style scoped>
	.button{
		display: inline-flex;
		position: fixed;
 		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
	}
	
	.cancel{
		width: 300px;
		height: 85px;
		margin-right: 20px;
		background-image: url('../assets/images/btn/btnCancel.png');
		background-repeat:no-repeat;
	}
	
	.nextStep{
		width: 300px;
		height: 85px;
		background-image: url('../assets/images/btn/btnNext.png');
		background-repeat:no-repeat;
	}
	
	
	.summary{
		background-image: url('../assets/images/projectDetail.png');
		background-repeat: no-repeat;
		background-size: cover;
		overflow:auto;
		height:100%;
		padding: 0 70px;
	}
	
	.title{
		color: #ffffff;
		font-size: 40px;
		text-align: left;
		margin-left: 2%;
		margin-top: 15px;
	}
	
	.content{
		margin-top:1%;
		display:flex;
		flex-direction:row;
	}
	
	.content  div{
		color: #ffffff;
		font-size: 24px;
	}
	
	.code{
/* 		width: 171px; */
		height: 57px;
		width: 15%;
		line-height: 57px;
		text-align:center;
		background-image: url('../assets/images/title4.png');
		background-repeat:no-repeat;
	}
	
	.codeMsg{
		width: 85%;
		text-align:left;
		padding-top: 8px;
		padding-bottom: 8px;
	}

</style>