<template>
	<view class="bodyContainer">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="许可证详情"
			leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="wrap-view wrap-top">
			<view class="item title"> <text class="blueLine"></text>{{formData.cate_name}}作业许可证信息：</view>
			<view class="item">
				<view class="title">编号</view>
				<view class="content">
					<text>{{formData.number}}</text>
				</view>
			</view>
			<view class="item" v-if="formData.level">
				<view class="title">作业级别</view>
				<view class="content">
					<text>{{formData.level}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">预计开始</view>
				<view class="content">
					<text>{{formData.start_time}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">预计结束</view>
				<view class="content">
					<text>{{formData.end_time}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">节点</view>
				<view class="content">
					<text v-if="formData.ticket_ && formData.ticket_.state_">{{formData.ticket_.state_.name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">作业部门</view>
				<view class="content">
					<text>{{formData.dept_do_.name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">作业负责人</view>
				<view class="content">
					<text>{{formData.charger_.name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">作业监护人</view>
				<view class="content">
					<text>{{formData.monitor_.name}}</text>
				</view>
			</view>
			<!-- <view class="item"  v-if="formData.participant_&&formData.participant_.length>0">
				<view class="title">可处理人</view>
				<view class="content">
					<text v-for="(val,index) in formData.participant_">{{val.name}} <text v-if="index!==formData.participant_.length-1">、</text></text> 
				</view>
			</view> -->
			<view class="item">
				<view class="title">风险分析</view>
				<view class="content">
					<text v-for="item in formData.risks_checked_" :key="item.id">
					{{item.name}}|
					</text>
				</view>
			</view>
			<view class="item">
				<view class="title">控制措施</view>
				<view class="content">
					<text v-for="item in formData.measures_checked_" :key="item.id">
					{{item.name}}|
					</text>
				</view>
			</view>
			<view class="item">
				<view class="title">现场照片</view>
				<view class="content">
					<u-upload :custom-btn="true" :file-list="create_imgs_list" :show-progress="false" :auto-upload="false" :deletable="false"></u-upload>
				</view>
			</view>
			<view class="item">
				<view class="title">关闭照片</view>
				<view class="content">
					<u-upload :custom-btn="true" :file-list="close_imgs_list" :show-progress="false" :auto-upload="false" :deletable="false"></u-upload>
				</view>
			</view>
			<view class="item">
				<view class="title">监控状态</view>
				<view class="content contentFlex">
					<text v-if="formData.mtask_uid" style="width: 200upx;">进行中</text>
					<text v-else style="width: 200upx;">未进行</text>
					<text class="bindBtn" @click="mtaskStateChange('start')">开始</text>
					<text class="bindBtn2" @click="mtaskStateChange('end')">停止</text>
				</view>
			</view>
		</view>
		<view class="wrap-view wrap-top">
			<view class="item title"> <text class="blueLine"></text>作业人员：</view>
			<view class="workersWrap">
				<view class="workersItem itemTitle">
					<text class="workerCell">姓名</text>
					<text class="workerCell">职责</text>
					<text class="workerCell">证书</text>
					<text class="workerCell">操作</text>
				</view>
				<view class="workersItem" v-for="item in workerList" :key="item.id">
					<text class="workerCell" @click="viewWorker(item)" style="color:blue">{{item.worker_name}}</text>
					<text class="workerCell">{{item.duty}}</text>
					<!-- <text class="workerCell">{{item.certificates.length}}张</text> -->
					<view class="workerCell">
						<view class="certificate" @click="preView(cert.file)" style="color:blue" v-for="cert in item.certificates_" :key="cert.id">{{cert.number}}</view>
					</view>
					<view class="workerCell">
						<text class="bindBtn" @click="bindBtl(item,10)" v-if="item.worker_.blt_===null||item.worker_.blt_===undefined">绑卡</text>
						<text class="bindBtn" @click="bindBtl(item,20)" v-else>解绑</text>
					</view>
				</view>
			</view>
		</view>
		<view class="wrap-view wrap-top">
			<view class="item title"> <text class="blueLine"></text>气体检测记录：</view>
			<view class="workersWrap">
				<view class="workersItem itemTitle">
					<text class="workerCell">检测部位</text>
					<text class="workerCell">可燃气体(V%LEL)</text>
					<text class="workerCell">检验结论</text>
				</view>
				<view class="workersItem" v-for="item1 in gasList" :key="item1.id">
					<text class="workerCell">{{item1.check_place}}</text>
					<text class="workerCell"></text>
					<text class="workerCell">
						<span v-if="item1.is_ok">正常</span>
						<span v-else>异常</span>
					</text>
				</view>
			</view>
		</view>
		<view id="workerWrap" v-if="detailLimited">
			<view class="workerContainer">
				<view class="workerInfo">
					<view class="infoTitle">姓名：</view><view>{{workerItem.worker_.name}}</view>
				</view>
				<view class="workerInfo">
					<view class="infoTitle">手机：</view><view>{{workerItem.worker_.phone}}</view>
				</view>
				<view class="workerInfo">
					<view class="infoTitle">工作职责：</view><view>{{workerItem.duty}}</view>
				</view>
				<view class="workerInfo">
					<view class="infoTitle">证书编号：</view>
					<view>
						<view v-for="item in workerItem.certificates_" 
						style="color: blue;"
						@click="preView(item.file)" 
						>{{item.number}}</view>
					</view>
				</view>
			</view>
			<icon class="closeDetailIcon" type="cancel" size="36" color="#fefefe" @click="closeWorkerDetail"/>
		</view>
		<view class="preBigImgWrap" v-if="preImg" @click="cancelPreImg">
			<image class="bigImg" :src="preImgSrc" mode="widthFix"></image>
		</view>
		<!-- <img-view ref="imgPreView" :imgSrc="preImgSrc" @cancelPreView="cancelPreView"></img-view> -->
	</view>
</template>

<script>
	export default {
		name: "oplDetail",
		data() {
			return {
				formData:{
					number:'',
					level:'',
					start_time:'',
					end_time:'',
					ticket_:{},
					dept_do_:{},
					charger_:{},
					monitor_:{},
					risks_checked_:{},
					measures_checked_:{},
					mtask_uid:null
				},
				create_imgs_list: [],
				close_imgs_list: [],
				msOptions:{
					"REVOKED": "已停止",
					"STARTED": "进行中",
					"SUCCESS": "已完成"
				},
				preImgSrc:'',
				workerItem:{},
				preImg:false,
				detailLimited:false,
				workerList:[],
				gasList:[],
				act_states: {
					0: "草稿中",
					1: "进行中",
					2: "被退回",
					3: "被撤回",
					4: "已完成",
					5: "已关闭",
				},
			}
		},
		onLoad(params) {
			this.oplId = params.oplId;
			this.getOpl();
			this.getworkerList();//工作人员
			this.getgasList();//气体检测记录
		},
		onShow() {
		},
		methods: {
			cancelPreImg(){
				this.preImg = false;
			},
			//获取工作operation
			getOpl() {
				//debugger;
				let that = this;
				that.$u.api.oplItem(that.oplId).then((res) => {
					that.formData ={...res} ; 
					res.create_imgs_.forEach(item=>{
						that.create_imgs_list.push({
							url: that.vuex_host+item.path,
							id:item.id,
						})
					})
					res.close_imgs_.forEach(item=>{
						that.close_imgs_list.push({
							url: that.vuex_host+item.path,
							id:item.id,
						})
					})
				});
			},
			//
			//获取工作人员
			getworkerList() {
				let that = this;
				that.$u.api.oplWorker({opl: that.oplId, page: 0}).then(res => {
					that.workerList =res;
				})
			},
			//获取气体检测记录
			getgasList(){
				let that = this;
				that.$u.api.oplGasList({opl: that.oplId, page: 0}).then(res => {
					that.gasList =res;
				})
			},
			mtaskStateChange(type){
				let that = this;
				uni.showLoading({
					mask: true,
					title: '正在处理...'
				})
				if(type==='start'){
					that.$u.api.oplMtartMtask(that.oplId).then(res=>{
						uni.hideLoading()
						that.formData.mtask_uid=res.mtask_uid
					}).catch(e=>uni.hideLoading())
				}else{
					that.$u.api.oplStopMtask(that.oplId).then(res=>{
						uni.hideLoading()
						that.formData.mtask_uid=null
					}).catch(e=>uni.hideLoading())
				}
			},
			//解绑卡
			bindBtl(row,type){
				let that = this;
				let form = {};
				form.type = type;
				form.employee = row.worker_.id;
				if(type==10){
					uni.scanCode({
						 success: function (res) {
							 form.code = res.result;
							 that.$u.api.thirdBltBind(form).then(res=>{
								 //debugger;
								 console.log(res)
								 uni.showToast({
									title: res,
									icon: "none"
								 })
							 })
						 }
					});
				}else{
					that.$u.api.thirdBltBind(form).then(res=>{
						 //debugger;
						 uni.showToast({
							title: res,
							icon: "none"
						 })
					})
				}
				 
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			viewWorker(item) {
				this.workerItem = item;
				this.detailLimited = true;
			},
			closeWorkerDetail(){
				this.detailLimited = false;
				this.workerItem = null;
			},
			preView(srcImg){
				this.preImg = true;
				if(srcImg=='' || srcImg == null){
					uni.showToast({
						title: '未上传证件照片',
						icon: 'none'
					})
				}
				this.preImgSrc = this.vuex_host+srcImg;
				console.log(this.preImgSrc)
				// this.$refs.imgPreView.open();
			},
			cancelPreView(){
				this.preImgSrc = '';
			},
			viewcertificate(item){
				let vuex_host = this.vuex_host;
				uni.showModal({
					title: '证书',
					content:item.name+'-'+item.number,
					confirmText:'下载',
					success: function (res) {
						if (res.confirm) {
							//下载证书
							console.log('点击下载');
							console.log(item.file);
							//debugger;
							let downloadFileUrl = vuex_host+item.file;
							console.log(vuex_host)
							console.log(downloadFileUrl)
							uni.downloadFile({
								url:downloadFileUrl,
								success:(data)=> {
									console.log(data);
									console.log('下载反馈');
									
									if(data.statusCode==200){
										uni.saveFile({
										  tempFilePath: data.tempFilePath,
										  success: function (ress) {
											  console.log('保存成功')
											  console.log(ress)
											  //debugger;
											  uni.showToast({
											  	title: '文件已保存',
											  	icon: 'none',
												duration:3000,
											  })
											//debugger;
										  },
										  fail(err) {
											console.log(err);
										  }
										})
									}
								},
								fail(err) {
									console.log(err.errMsg)
								}
							});
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	uni-page-body {
	    color: #303133;
	    font-size: 15px;
	    height: 100%;
	    background: #f3fbff;
	}
	.bodyContainer {
	    background-color: #f3fbff;
	}
	>>>.uni-navbar__header,
	>>>.uni-status-bar {
		background-image: linear-gradient(254deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}
>>>uni-image{
	height: 200upx;
	width: 200upx;
}
	.my-data {
		background-color: #f3fbff;
		padding-bottom: 227rpx;
	}

	.nav-bar>>>.uni-navbar-btn-text text {
		font-size: 32rpx !important;
	}

	.wrap-view {
		width: 720rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		line-height: 94rpx;
		font-family: PingFang-SC-Medium;
		font-size: 30rpx;
		padding-bottom: 30upx;
	}
	.wrap-top{
		line-height: 60upx;
		margin-top: 20upx;
	}
	.item {
		margin: 0rpx 32rpx;
		display: flex;
		margin-top: 10rpx;
	}
	.item.title{
		    height: 100upx;
		    line-height: 100upx;
		    border-bottom: 1upx solid #dddddd;
	}
	.item_bottom_border{
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.title {
		color: #212121;
		flex: 1;
	}

	.content {
		flex: 3;
		color: #666666;
	}
	.contentFlex{
		display: flex;
		/* justify-content: space-between; */
	}
	.workersWrap{
		
	}
	
	.workersItem{
		display: flex;
		font-size: 28upx;
		align-items:center;
	}
	
	.itemTitle{
		height: 80upx;
		font-size: 32upx;
		line-height: 40upx;
	}
	.itemTitle>.workerCell{
		color: #212121;
	}
	.workerCell{
		flex: 1;
		color: #666666;
		overflow: hidden;
		text-align: center;
	}
	.blueLine{
		height: 24upx;
		width: 10upx;
		background: #2a8cff;
		margin-top: 39upx;
		margin-right: 12upx;
	}
	.bindBtn{
		    width: 80upx;
		    height: 50upx;
		    line-height: 50upx;
		    background: #2a8cff;
		    display: inline-block;
		    border-radius: 16upx;
		    color: #ffffff;
		    font-size: 25upx;
			text-align: center;
			margin-right: 20upx;
	}
	.bindBtn2{
		    width: 80upx;
		    height: 50upx;
		    line-height: 50upx;
		    background: #ff0000;
		    display: inline-block;
		    border-radius: 16upx;
		    color: #ffffff;
		    font-size: 25upx;
			text-align: center;
	}
	.certificate{
		word-break:keep-all;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	
	#workerWrap{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.6);
	}
	.workerContainer{
		position: relative;
		width: 90%;
		left: 5%;
		background: #ffffff;
		padding: 40upx;
		top: 50%;
		transform: translateY(-50%);
		max-height: 80%;
		overflow-y: scroll;
		border-radius: 20upx;
	}
	.workerInfo{
		display: flex;
		margin: 20upx 0;
	}
	.infoTitle{
		width: 170upx;
	}
	.closeDetailIcon{
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}
	.preBigImgWrap{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			display: block;
			background-color: rgba(0, 0, 0, 0.8);
		}
		.bigImg{
			min-width: 90%;
			max-width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50% ,-50%);
		}
</style>
