<template>
    <view class="container">
		<view class="interviewee">
			<!-- <view>
				<text class="input_left">到访地点</text>
				<input type="text" placeholder="无到访地点名" :value="place" disabled="true">
			</view> -->
			<view>
				<text class="input_left">申请状态</text>
				<input type="text" placeholder="无申请状态" :value="status" disabled="true">
			</view>
			<view>
				<text class="input_left">被访人部门</text>
				<input type="text" placeholder="无申请部门" :value="dpnameCover || ''" disabled="true">
			</view>
			<view>
				<text class="input_left">被访人姓名</text>
				<input type="text"  placeholder="无被访人姓名" :value="person" disabled="true">
			</view>
			<view>
				<text class="input_left">手机号码</text>
				<input type="tel"  placeholder="无被访人手机号码" :value="visited_person_tel" disabled="true">
			</view>
			<view>
				<text class="input_left">来访时间</text>
				<input type="tel"  placeholder="无来访时间" :value="start" disabled="true">
			</view>
			<view>
				<text class="input_left">离开时间</text>
				<input type="tel"  placeholder="无离开时间" :value="end" disabled="true">
			</view>
			<view>
				<text class="input_left">来访类型</text>
				<input type="text"  placeholder="无来访事由" :value="appointmentTypeList[appointmentType]" disabled="true">
			</view>
			<view>
				<text class="input_left">来访事由</text>
				<input type="text"  placeholder="无来访事由" :value="reason" disabled="true">
			</view>
		</view>

		<view class="visitor_2">
			<view class="visitor_2_text mar-none">
				<view><text>姓&nbsp;&nbsp;&nbsp;名:</text>{{person2}}</view>
				<view><text>单&nbsp;&nbsp;&nbsp;位:</text>{{orgName}}</view>
				<view><text>手机号:</text>{{tel}}</view>
				<view><text>身份证:</text>{{idcard}}{{identityAuth=='1'?'（身份已认证）':'（身份认证中）'}}</view>
				<view v-if="licensePlate!=''"><text>车牌号:</text>{{licensePlate}}</view>
			</view>
			<view class="pic" v-if="picture0 || picture1 || picture2">
				<image :src="picture0" mode="" @tap="previewImage(picture0)" v-if="picture0"></image>
				<image :src="picture1" mode="" @tap="previewImage(picture1)" v-if="picture1"></image>
				<image :src="picture2" mode="" @tap="previewImage(picture2)" v-if="picture2"></image>
			</view>
			<!-- <view class="pic" v-if="picture0 || picture1 || picture2">
				<image :src="picture0" mode="" v-if="picture0"></image>
				<image :src="picture1" mode="" v-if="picture1"></image>
				<image :src="picture2" mode="" v-if="picture2"></image>
			</view> -->
		</view>
		
		<view v-if="retinueList.length > 0">
			<view class="visitor_2" v-for="(item,index) in retinueList" :key="index" >
				<view class="visitor_2_text mar-none">
					<view><text>姓&nbsp;&nbsp;&nbsp;名:</text>{{item.retinue_name}}</view>
					<view><text>手机号:</text>{{item.visitor_tel}}</view>
					<view><text>身份证:</text>{{item.idcard}}</view>
				</view>
			</view>
		</view>
		
		<!-- <view id="result">
			<view class="ing">
				<i></i>
				<text>被拜访人：已同意 2019-11-28 19:36:24</text>
			</view>
		</view> -->
		<view style="clear: both;"></view>
		<view class="occupied"></view>
		<view class="footer-btn" @click="submit(id,0)" v-if="role=='1' && first_status=='0'">
			<view class="btn">{{button_text}}</view>
		</view>
		<!-- <view class="footer-btn footer-btn-two" 
		 v-if="role==2 && first_status=='0'">
			<view class="btn btn-col" @click="submit(id,1)">拒绝</view>
			<view class="btn btn-col1" @click="submit(id,2)">同意</view>
		</view> -->
		<!-- userLevel=0专责权限 -->
		<view v-if="userLevel=='0' && appointmentType!='1'">
			<view class="footer-btn footer-btn-two" v-if="first_status==0">
				<view class="btn btn-col" @click="submit(id,1)">拒绝</view>
				<view class="btn btn-col1" @click="circulation()">同意</view>
			</view>
			<!-- <view class="footer-btn footer-btn-two" v-if=" first_status!=0">
				<view style="width: 100%;" class="btn btn-col1" @click="circulation()">流转</view>
			</view> -->
		</view>
		<view v-if="userLevel=='0' && appointmentType=='1'">
			<view class="footer-btn footer-btn-two" v-if="first_status==0">
				<view class="btn btn-col" @click="submit(id,1)">拒绝</view>
				<view class="btn btn-col1" @click="submit(id,2)">同意</view>
			</view>
		</view>
		<view v-if="userLevel=='1'">
			<view class="footer-btn footer-btn-two" v-if="second_status==0">
				<view style="width: 33%;" class="btn btn-col" @click="submit(id,1)">拒绝</view>
				<view style="width: 34%;" class="btn btn-col1" @click="submit(id,2)">同意</view>
				<view style="width: 33%;background: #348CF2;" class="btn btn-col1" @click="circulation()">流转</view>
			</view>
		</view>
		<view v-if="userLevel=='2'">
			<view class="footer-btn footer-btn-two" v-if="third_status==0">
				<view  class="btn btn-col" @click="submit(id,1)">拒绝</view>
				<view  class="btn btn-col1" @click="submit(id,2)">同意</view>
				<!-- <view style="width: 33%;background: #348CF2;" class="btn btn-col1" @click="circulation()">流转</view> -->
			</view>
		</view>
		<view v-if="userLevel=='8'">
			<view class="footer-btn footer-btn-two" v-if="current_status.charAt(current_status.length-1)==0">
				<view  class="btn btn-col" @click="submit(id,1)">拒绝</view>
				<view  class="btn btn-col1" @click="submit(id,2)">同意</view>
				<!-- <view style="width: 33%;background: #348CF2;" class="btn btn-col1" @click="circulation()">流转</view> -->
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" style="">
			<view style="background: white;width: 80%;height: 840upx;width: 600upx;position: relative;border-radius: 10upx;padding: 14upx;">
				<view class="tab_rig visitorshow-box"  ><!-- uinfo.orgName -->
					<xfl-select 
					            :list="finalList"
					            :clearable="true"
					            :listShow="showList"
					            :isCanInput="true"  
								:focusShowList = "true"
					            :style_Container="' font-size: 28upx;border-radius:10upx;border:1px solid #e5e5e5;width:95%'"
					            :placeholder = "'请输入姓名、手机号、部门搜索'"
								@change="changeSel"
								@input="inputSel"
								@clear="clearSel"
								
					            :selectHideType="'hideAll'"
					        >
					        </xfl-select>
				</view>
				<view class="footer-btn footer-btn-two" style="position: absolute;margin-bottom: 20upx;">
					<view class="btn btn-col" style="width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;" @click="closeCirculation()">取消</view>
					<view class="btn btn-col1" style="width:40%;border-radius: 10upx" @click="submitCirculation()">确定</view>
				</view>
			</view>
		</uni-popup>
    </view>
	
</template>

<script>
	import {getApplyInfo,greenVisitorInfo,getCirculationList,submitCirculation} from '@/common/api.js';
	import {callbackRequest,alertTip,getStorage} from '@/common/util.js';
	import UniPopup from "@/components/uni-popup/uni-popup.vue"
	import xflSelect from '../../components/xfl-select/xfl-select1.vue'
	export default {
		components: {
			UniPopup,
			xflSelect 
		},
		data() {
			return {
				button_class:"submit_button",
				button_text:"取消",
				status:"未审批",
				picture0:'../../static/IDpic1.png',
				picture1:'../../static/IDpic1.png',
				picture2:'../../static/IDpic1.png',
				stateList: ['待审核', '已通过','已拒绝','待本人确认','已取消','','已流转'],
				role:'',
				userId:'',
				id:'',//记录的id
				person:'',
				person2:'',
				place:'',
				tel:'',
				visited_person_tel:'',
				start:'',
				end:'',
				dpnameCover:'',
				orgName:'',
				reason:'',
				idcard:'',
				retinueList:[],
				first_status:"",
				second_status:"",
				third_status:'',
				current_status:'',
				userLevel:getStorage('userInfo').userLevel,
				identityAuth:0,//1.身份已认真 0身份认真中,
				list: [],
				finalList: [],
				showList:true,
				circulationId:"",
				applyId:"",
				appointmentTypeList:['普通访客','参会人员'],
				appointmentType:"",
			}
		},
		onLoad(options){
			this.id = options.id;
			this.role = options.role;
			this.userId = options.userId;
			this.reFresh(this.userId,this.id,"02");//必须是‘02’
			this.getCirculationList();
		},
		methods: {
			previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			reFresh(userId,id,type){
				var data = {userId:this.userId,id:id,applyType:type};
				let params = {
					"method": getApplyInfo,//根据id和申请类型查询申请详情
					"data": data
				};
				console.log(params);
				callbackRequest(params)
				.then(res =>{
					console.log(res);
					this.person = res.data.returnData[0].visited_person_name;
					this.person2 = res.data.returnData[0].visitor_name;
					this.place = res.data.returnData[0].visit_place;
					this.tel = res.data.returnData[0].visitor_tel;
					this.visited_person_tel = res.data.returnData[0].visited_person_tel;
					this.start = res.data.returnData[0].visit_start_time;
					this.end = res.data.returnData[0].visit_end_time;
					this.dpnameCover = res.data.returnData[0].dpnameCover||res.data.returnData[0].orgNameCover;
					this.orgName = res.data.returnData[0].orgName
					this.reason = res.data.returnData[0].visit_reason;
					this.idcard = res.data.returnData[0].idcard;
					this.first_status = res.data.returnData[0].first_status;
					this.second_status = res.data.returnData[0].second_status;
					this.third_status = res.data.returnData[0].third_status;
					this.current_status = res.data.returnData[0].current_status;
					if(this.userLevel==0){
						this.status = this.stateList[this.first_status];
					}else if(this.userLevel==1){
						this.status = this.stateList[this.second_status];
					}else if(this.userLevel==2){
						this.status = this.stateList[this.third_status];
					}else{
						this.status = this.stateList[this.current_status.charAt(this.current_status.length-1)];
					}
					this.picture0 = res.data.returnData[0].face_pic1;
					this.picture1 = res.data.returnData[0].picture1;
					this.picture2 = res.data.returnData[0].picture2;
					this.retinueList = res.data.returnData[1].greenRetinueInfoList || [];
					this.identityAuth = res.data.returnData[0].identityAuth;
					this.applyId = res.data.returnData[0].id;
					this.appointmentType = res.data.returnData[0].appointmentType;
					this.licensePlate = res.data.returnData[0].licensePlate==null?"":res.data.returnData[0].licensePlate;
				})
			},
			submit(id,type){
				let params = {
					"method": greenVisitorInfo,// 申请的审批
					"data": {userId:this.userId,applyId:this.id,applyType:type,userLevel:this.userLevel,appointmentType:this.appointmentType,}//分三种情况
				};
				var self = this;
				var content="是否确认拒绝";
				if(type==2){
					content="是否确认同意";
				}
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res){
						if (res.confirm) {
							callbackRequest(params)
							.then(res =>{
								const url = '/pages/invite2/invite2?type=2';
								alertTip(res.data.returnMsg);
								setTimeout(function() {
									uni.redirectTo({
										url
									});
								}, 10);
							})
						}
					}
				})
				
			},
			getCirculationList(){
				let params = {
					"method": getCirculationList,
					"data": {userLevel:this.userLevel,deptName:getStorage("userInfo").deptName}
				};
				callbackRequest(params)
				.then(res =>{
					var resList = [];
					resList = res.data.returnData;
					var list = [];
					for(var i=0;i<resList.length;i++){
						var listObj = resList[i];
						var obj={};
						obj.value = listObj.real_name+"/"+listObj.mobile+"/"+listObj.department_name;
						obj.id = listObj.id;
						list.push(obj);
					}
					this.list = list;
					this.finalList = list;
				})
			},
			circulation(){
				this.$refs.popup.open()
			},
			closeCirculation(){
				this.$refs.popup.close()
			},
			inputSel(e){
				this.circulationId="";
				if(e.detail.value == ""){
					this.finalList = this.list;
					this.showList = true;
					return
				}
				var finalList = [];
				for (var i = 0; i < this.list.length; i++) {
					let ite = this.list[i].value;
					// 包含某一字符串
					if(ite.indexOf(e.detail.value) !== -1){
						finalList = finalList.concat(ite);
					}
				}
				this.finalList = finalList;
				this.showList = true;
			},
			changeSel(newVal){
				//console.log(newVal);
				this.circulationId = newVal.orignItem.id;
				//this.uinfo.orgName = newVal.newVal;
			},
			clearSel(){
				this.circulationId="";
				this.finalList = this.list;
				this.showList = true;
			},
			submitCirculation(){
				if(this.circulationId==""){
					alertTip("请选择流转人员");
					return
				}
				let params={
					method:submitCirculation,
					data:{id:this.circulationId,applyId:this.applyId,userLevel:this.userLevel}
				}
				callbackRequest(params)
				.then(res =>{
					const url = '/pages/invite2/invite2?type=2';
					alertTip(res.data.returnMsg);
					setTimeout(function() {
						uni.redirectTo({
							url
						});
					}, 10);
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
.container{
	min-height:100vh;
    background: #f5f5f5;
	overflow:hidden;
}
.interviewee{
	padding: 0upx 30upx 0;
	background: #fff;
	margin:30rpx 30rpx 0;
	border-radius: 10rpx;
	.input_left{
		width: 150rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
	}
}
.interviewee view{
    line-height: 40rpx;
	padding:20rpx 0;
    color: #333333;
    font-size: 28rpx;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    position: relative;
}
.interviewee view:last-child{
	border-bottom:0px;
}
.interviewee view input{
    font-size: 28rpx;
	margin-left: 20rpx;
}
.visitor_2{
    margin:20rpx 30rpx 20rpx;
    background: #ffffff;
   border-radius:10upx;
}
.visitor_2{
	border-radius: 15upx;
	padding:30rpx 30rpx;
	overflow:hidden;
}
.visitor_2 .pic{
	padding-top:20rpx;
}
.visitor_2 image{
	width: 180rpx;
	height:180rpx;
	vertical-align:top;
	margin-right:20rpx;
}
.visitor_2_text{
	margin-left: 170upx;
	padding:0rpx 0;
	view{
		font-size: 28upx;
		color:#666;
		line-height:40rpx;
		text{
			font-weight:bold;
			display: inline-block;
			width:110rpx;
			text-align:right;
			padding-right:10rpx;
			color:#333;
		}
	}
}
.visitor_2 .mar-none{
	margin-left:0;
}
/* 已同意 */

#result .ing {
    background: #ffffff;
    height: 2.2rem;
    line-height: 1.2rem;
    border-radius: .133333rem;
}

#result .ing i {
    width: .566667rem;
    height: .566667rem;
    border: .033333rem solid #00c277;
    display: inline-block;
    margin-left: .8rem;
    margin-right: .24rem;
    border-radius: 50%;
	margin-top: .9rem;
}

#result .ing text {
    color: #00c277;
    font-size: .745333rem;
}

.submit{
	width: 100%;
	position: fixed;
	bottom: 20upx;
	/* bottom: 0upx; */
	height:80upx;
	display: inline;
	background-color: #00C277;
}
button{
	font-size: 38upx;
	font_weight: bold;
	height:80upx;
}
.submit_button{
	width: 100%;
	color: #FFFFFF;
	background-color: #00C277;
	margin: 0;
}
	
.btn_refuse{
	width: 50%;
	color: #FFFFFF;
	background-color: red;
	margin: 0;
}
.btn_agree{
	width: 50%;
	color: #FFFFFF;
	background-color: #00C277;
	margin-left: 50%;
	margin-top: -80upx;
}
.visitorshow-box{
	.show-box{
	    text-align: left;
	    -webkit-appearance: none;
	    background-color: #fff;
	    background-image: none;
	    border-radius: 4px;
	    border: 1px solid #c0c4cc;
	    box-sizing: border-box;
	    color: #606266;
	    display: inline-block;
	    font-size: inherit;
	    height: 3em;
	    line-height: inherit;
	    outline: none;
	    padding: 0 12% 0 2%;
	    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	    width: 100%;
	    position: relative;
	    width: 100%!important;
	}
}

</style>
