<template>
	<view class="deetailPage">
		<headers :showBack="true">
			<view class="headerName">
				整改通知单
			</view>
		</headers>
		<view class="tab flex2">
			<view class="tabType" @click="changeTab(1)" :class="checkedTab==1?'checkedTab':'noCheckTab'">巡查详细</view>
			<view class="tabType" @click="changeTab(2)" :class="checkedTab==2?'checkedTab':'noCheckTab'">整改记录</view>
		</view>
		<view class="content" v-if="checkedTab==1">
			<view class="type flex2">
				<view>检查人：</view>
				<view>{{basicInfo.inspectorName}}</view>
			</view>
			<view class="type">
				<view>检查内容：</view>
				<pre class="pre">{{basicInfo.inspectContent}}</pre>
			</view>
			<view class="type">
				<view>检查位置：</view>
				<pre class="pre">{{basicInfo.inspectPlace}}</pre>
			</view>
			<view class="type">
				<view>附件：</view>
				<view class="accessory">
					<image  class="accessoryImg" v-if="fileList.length>0" v-for="(item,index) in fileList" :key="index" :src="url_config+'image/'+item.url" 
					@click="bigImg(url_config+'image/'+item.url,index)"></image>
				</view>
			</view>
			<view class="type flex2">
				<view>整改人：</view>
				<view>{{basicInfo.rectifyPeopleName}}</view>
			</view>
			<view class="type flex2">
				<view>整改结束时间：</view>
				<view>{{toTime(basicInfo.rectificationEndDate)}}</view>
			</view>
		</view>
		<view class="content record" v-if="checkedTab==2">
			<view class="item flex3" v-if="issueInfoList.length>0" v-for="(item,index) in issueInfoList" :key="index" style="margin-bottom:20px">
				<image src="../../../static/profile_photo.png" class="userImg"></image>
				<view class="bubble">
					<view class="bubble_content">
						<view class="flex2">
							<view class="name"><text class="item_title">整改人：</text>{{item.rectifyPeopleName}}</view>
							<view class="time">{{item.replyTime}}</view>
						</view>
						<view class="item_title">回复内容</view>
						<pre class="pre">{{item.replyContent}}</pre>
						<view class="item_title">附件</view>
						<view>
							<image v-for="(imgItem,imgIndex) in item.fileList" :key="imgIndex" :src="url_config+'image/'+imgItem.url" style="width:50px;height: 50px;"
							@click="bigImg(url_config+'image/'+imgItem.url,imgIndex)"></image>
						</view>

						<view class="audit_content" v-if="item.status!=1">
							<view class="item_title">复核内容</view>
							<pre class="pre">{{item.auditReplyContent}}</pre>
							<view class="item_title">复核附件</view>
							<view>
								<image v-for="(imgItem,imgIndex) in JSON.parse(item.auditReplyImg)" :key="imgIndex" :src="url_config+'image/'+imgItem.url"
								 style="width:50px;height: 50px;" @click="bigImg(url_config+'image/'+imgItem.url,imgIndex)"></image>
							</view>
						</view>

						<view class="pass_wrap">
							<image v-if="item.status==2" class="pass_icon" src="../../../static/icon_pass.png"></image>
							<image v-if="item.status==3" class="pass_icon" src="../../../static/icon_unpass.png"></image>
						</view>

					</view>
				</view>

			</view>
			<view class="noData" v-if="issueInfoList.length==0">
				<image class="noDataImg" src="../../../static/noData.png"></image>
				<view>暂无数据</view>
			</view>
			<view class="approveBtn">
				<view class="btn" v-if="
          userInfo.userId == basicInfo.rectifyPeople &&  
          issueInfoList.length>0 && issueInfoList[issueInfoList.length-1].status==3 ||
          userInfo.userId == basicInfo.rectifyPeople && issueInfoList.length<=0
        "
				 @click="replyBtn(1)">整改回复</view>
			</view>
			<view class="approveBtn">
				<view class="btn" v-if="userInfo.userId==basicInfo.inspector&&issueInfoList.length>0&&issueInfoList[issueInfoList.length-1].status==1"
				 @click="replyBtn(2)">审核回复</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "@/common/utils.js"
	export default {
		data() {
			return {
				checkedTab: 1,
				fileList: [],
				basicInfo: {},
				issueInfoList: [],
				userInfo: {},
				id:''
			}
		},
		filters:{
			
		},
		onLoad(option) {
			this.id = option.id;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			
			
		},
		onShow() {
			this.getBasicInfo();
			this.getIssueInfo();
		},
		methods: {
			toTime(v){
				if(v){
					return utils.formatDate(v).f1
				}else{
					return ''
				}
				
			},
			//切换tab
			changeTab(type) {
				this.checkedTab = type;
				if (type == 1) {
					this.getBasicInfo();
				} else {
					this.getIssueInfo();
				}
			},
			//获取基本信息
			getBasicInfo() {
				let that = this;
				this.sendRequest({
					url: 'xmgl/inspectionRecord/getProjectInspectionDetails',
					method: 'post',
					data: {
						id: String(that.id)
					},
					success: res => {
						that.basicInfo = res.result;
						if (res.result.imgUrl) {
							that.fileList = JSON.parse(res.result.imgUrl);
						}
					}
				})
			},
			//获取整改信息
			getIssueInfo() {
				let that = this;
				this.sendRequest({
					url: 'xmgl/inspectionRectifyRecord/selectInspectionRectifyRecord',
					method: 'post',
					data: {
						inspectId: String(that.id)
					},
					success: res => {
						that.issueInfoList = res.result.dataList;
						that.issueInfoList.forEach((item, index) => {
							if (item.replyImg) {
								item.fileList = JSON.parse(item.replyImg)
							}
						})
					}
				})
			},

			//新增回复
			replyBtn(type) {
				let stateId = this.issueInfoList.length > 0 ? this.issueInfoList[this.issueInfoList.length - 1].id : '';
				console.log(this.id,"this.idtt")
				uni.navigateTo({
					url:`./reply?id=${this.id.toString()}&type=${type}&stateId=${stateId}` 
				})
			},
			//点击预览
			bigImg(img,index){
				 console.log('val',img)
				 let arr =[]
				 arr.push(img)
				uni.previewImage({
					current:index,
					urls:arr
				})
			  }
			}
	}
</script>

<style>
	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex3 {
		display: flex;
	}

	.deetailPage {
		width: 100%;
		height: 100%;
	}

	.tab {
		width: 100%;
		height: 45px;
		text-align: center;
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
	}

	.tabType {
		width: 50%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);

	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 2px solid #4181FE;

	}

	.noCheckTab {
		padding-bottom: 2px;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20px 30rpx 0;
	}

	.type {
		font-size: 30rpx;
		line-height: 40px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);
	}

	.pre {
		padding: 10px 30rpx;
		background-color: rgba(194, 194, 194, 0.2);
		min-height: 50px;
		width: 100%;
		white-space: pre-wrap;
		word-wrap: break-word;
		box-sizing: border-box;
		line-height: initial;
	}

	.accessory {
		width: 100%;
		height: 70px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.accessoryImg {
		width: 110rpx;
		height: 60px;
		margin-right: 8px;
	}

	.userImg {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		box-shadow: 0px 0 15px rgba(194, 194, 194, 0.5);
		margin-top: 5px;
	}

	.bubble {
		margin-left: 18px;
		width: 90%;
		box-sizing: border-box;
	}

	.bubble .bubble_content {
		width: 90%;
		background-color: #fff;
		padding: 10px 15px;
		display: inline-block;
		border-radius: 6px;
		position: relative;
		box-shadow: -2px 0 15px rgba(194, 194, 194, 0.5);
		position: relative;

	}

	.bubble .bubble_content::after {
		content: '';
		border: 8px solid #ffffff00;
		border-right: 8px solid #fff;
		position: absolute;
		top: 10px;
		left: -16px;
	}

	.record {
		/* background-color: rgba(234, 234, 234, 0.4); */
		padding-bottom: 60px;
	}

	.bubble_content .name {
		font-size: 30rpx;
		margin: 10px 0;
	}

	.time {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;

	}

	.item_title {
		margin: 10px 0;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		opacity: 0.8;
	}

	.approveBtn {
		position: fixed;
		bottom: 15px;
		width: calc(100% - 30px);
		box-sizing: border-box;
		z-index: 99;
	}

	.approveBtn .btn {
		width: 70%;
		line-height: 40px;
		background-color: #4181FE;
		color: #fff;
		text-align: center;
		border-radius: 30px;
		margin: 0 auto;
		box-shadow: 0 5px 5px rgba(65, 129, 254, 0.3);
	}

	.approveBtn .btn:active {
		background-color: rgba(65, 129, 254, 0.8);
	}

	.pass_wrap {
		position: absolute;
		top: 100px;
		right: 20px;
		z-index: 10;
	}

	.pass_icon {
		width: 80px;
		height: 80px;
	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}

	.noDataImg {
		width: 125px;
		height: 98px;
	}
</style>
