<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="stateList[first_status]" disabled="true">
			</view>
			<view>
				<text class="input_left">被访人部门</text>
				<input type="text" placeholder="无申请部门" :value="dp" 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="reason" disabled="true">
			</view>
		</view>
		<!-- 随行人员 -->
		<!-- <view id="visitor">
			<view class="visitor">
				<view>
					<text class="input_left">访客姓名</text>
					<input class="name" confirmtype="text" value="刘斌">
				</view>
				<view>
					<text class="input_left">身份证号</text>
					<input class="name" confirmtype="tel" value="342425990087673243"/>
				</view>
			</view>
		</view> -->
		
		<view id="visitor_2">
			<view class="visitor_2">
				<view class="visitor_2_text">
<!-- 				<input class="name" confirmtype="text" value="刘斌">
					<input class="name" confirmtype="tel" value="342425990087673243"/> -->
					<view><text>姓&nbsp;&nbsp;&nbsp;名:</text>{{person2}}</view>
					<view><text>手机号:</text>{{tel}}</view>
					<view><text>身份证:</text>{{idcard}}</view>
				</view>
				<!-- <view class="pic">
					<image :src="picture" mode=""></image>
				</view> -->
				<view class="img-box">
					<view class="img-item" v-for="(item,index) in imgs" :key="index">
						<image class="remove-btn" v-if="first_status=='3'" @click="removeImg(index)"  src="/static/icons/delete-icon.png" mode=""></image>
						<image class="img" :src="item" mode=""></image>
					</view>
					<view class="img-item upload-btn" @click="chooseImg()"
					 v-if="imgs.length < 2 && first_status=='3'">
						<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
						<view class="text">添加本人照片</view>
					</view>
				</view>
			</view>
		</view>
		
		<view id="visitor_2" v-if="retinueList.length > 0">
			<view class="visitor_2" v-for="(item,index) in retinueList" :key="index" >
				<!-- <view class="pic">
					<img src="../../static/IDpic1.png"></img>
				</view> -->
				<view class="visitor_2_text">
					<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()" v-if="first_status=='3'">
			<view class="btn">确认</view>
		</view>
		<!-- <view class="footer-btn footer-btn-two" 
		 v-if="first_status=='1'">
			<view class="btn btn-col" @click="submit(id,1)">拒绝</view>
			<view class="btn btn-col1" @click="submit(id,2)">同意</view>
		</view> -->
    </view>
</template>

<script>
	import {getApplyInfo,greenVisitorInfo,visitorinvite} from '@/common/api.js';
	import {callbackRequest,alertTip,convertImgToBase64} from '@/common/util.js';
	export default {
		data() {
			return {
				first_status:'',
				picture:'../../static/IDpic1.png',
				stateList: ['待审核', '已通过','已拒绝','待本人确认','已取消'],
				userId:'',
				id:'',//记录的id
				person:'',
				person2:'',
				place:'',
				tel:'',
				visited_person_tel:'',
				start:'',
				end:'',
				dp:'',
				reason:'',
				idcard:'',
				retinueList:[],
				imgs:[],
			}
		},
		onLoad(options){
			this.id = options.id;
			this.userId = options.userId;
			this.reFresh(this.userId,this.id,"02");//必须是‘02’
		},
		methods: {
			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.dp = res.data.returnData[0].name;
					this.dp = res.data.returnData[0].dpid;
					this.reason = res.data.returnData[0].visit_reason;
					this.idcard = res.data.returnData[0].idcard;
					this.first_status = res.data.returnData[0].first_status;
					
					if(res.data.returnData[0].picture1 != null && res.data.returnData[0].picture1 != ""){
						this.imgs[0] = res.data.returnData[0].picture1;
						if(res.data.returnData[0].picture2 != null && res.data.returnData[0].picture2 != ""){
							this.imgs[1] = res.data.returnData[0].picture2;
						}
					}else{
						if(res.data.returnData[0].picture2 != null && res.data.returnData[0].picture2 != ""){
							this.imgs[0] = res.data.returnData[0].picture2;
						}
					}
					this.retinueList = res.data.returnData[1].greenRetinueInfoList;
				})
			},
			submit(){
				var data = {userId:this.userId};
				data.idcardPic1 = this.imgs[0]; data.idcardPic2 = this.imgs[1];
				if(!data.idcardPic1 && !data.idcardPic2){
					alertTip("请至少上传一张图片！");
					return;
				}
				data.id = this.id;
				let params = {
					"method": visitorinvite,
					"data": data
				};
				var self  = this;
				uni.showModal({
					title: '提示',
					content: '是否确认提交',
					success: function(res){
						if (res.confirm) {
							callbackRequest(params)
							.then(res =>{
								console.log(res);
								alertTip(res.data.returnMsg);
								//刷新页面
								self.reFresh(self.userId,self.id,"02");
							})
						}
					}
				})
			},
			//主访客上传图片
			chooseImg(){
				let _this = this;
				uni.chooseImage({
					count:2,
					success:res => {
						let param = "";
						let imgArr =  res.tempFilePaths
						for (var i = 0; i < imgArr.length; i++) {
							param = imgArr[i];
							convertImgToBase64(param, function(base64) {
								_this.imgs.push(base64)
							})
						}
					}
				})
			},
			//删除图片
			removeImg(index){
				this.imgs.splice(index,1);
			},
		}
	}
</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{
			display: inline-block;
			width:110rpx;
			text-align:right;
			padding-right:10rpx;
			font-weight: bold;
			color: #333;
		}
	}
}
.visitor_2 .mar-none{
	margin-left:0;
}
.img-box{
		overflow:hidden;
		padding-top:25upx;
		.img-item{
			float:left;
			width:200upx;
			height:200upx;
			border:1px solid #ddd;
			margin:0 20upx 0upx 0upx;
			position:relative;
			.img{
				display:block;
				width:100%;
				height:100%;
			}
			.remove-btn{
				position:absolute;
				top:-18upx;
				right:-18upx;
				width:44upx;
				height:44upx;
				z-index:2;
				margin:0;
			}
		}
		.upload-btn{
			.img{
				width:60upx;
				height:60upx;
				margin:40upx auto 0;
			}
			.text{
				font-size:28upx;
				color:#999;
				text-align:center;
				line-height:40upx;
				padding-top:10rpx;
			}
		}
	}
/* 已同意 */

#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;
}

</style>
