<template>
	<view class="bodyContainer">
		<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="250rpx" 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>基本信息：</view>
			<view class="item">
				<view class="title">名称</view>
				<view class="content">
					<text>{{formData.name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">项目类型</view>
				<view class="content">
					<text>{{rpj_states[formData.type]}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">合同编号</view>
				<view class="content">
					<text>{{formData.contract_number}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">进厂时间</view>
				<view class="content">
					<text>{{formData.come_time}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">离厂时间</view>
				<view class="content">
					<text>{{formData.leave_time}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">所属部门</view>
				<view class="content">
					<text>{{formData.belong_dept_name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">相关方</view>
				<view class="content">
					<text>{{formData.rparty_name}}</text>
				</view>
			</view>
		</view>
		<view class="wrap-view wrap-top">
			<view class="item title"> <text class="blueLine"></text>资料：</view>
			<view class="filesWrap" v-if="certificateList.length>0">
				<view class="filesItem itemTitle">
					<text class="fileCell leftFileCell">资质内容</text>
					<text class="fileCell">文献资料</text>
				</view>
				<view class="filesItem" v-for="item1 in certificateList" :key="item1.id">
					<view  class="fileCell leftFileCell" style="text-align: left;">
						<text v-if="item1.file_cate_"> {{item1.file_cate_.name}}</text>
					</view>
					<view class="fileCell">
						<view v-if="item1.files.length>0">
						<view v-for="file in item1.files_">{{file.name}}</view>
						</view>
						
						<text v-else>暂无</text>
					</view>
					
				</view>
			</view>
			<view v-else style="text-align: center;">暂无相关资料</view>
		</view>
		<view class="wrap-view wrap-top">
			<view class="item title"> <text class="blueLine"></text>作业人员：</view>
			<view class="visitorsWrap">
				<view class="visitorsItem itemTitle">
					<text class="visitorCell">姓名</text>
					<text class="visitorCell">工作职责</text>
					<text class="visitorCell">操作</text>
				</view>
				<view class="visitorsItem" v-for="item in workerList" :key="item.id">
					<text class="visitorCell">{{item.remployee_.name}}</text>
					<text class="visitorCell">{{item.duty}}</text>
					<view class="visitorCell">
						<text class="bindBtn" @click="bindBtl(item,10)" v-if="item.remployee_.blt_===null||item.worker_.blt_===undefined">绑卡</text>
						<text class="bindBtn" @click="bindBtl(item,20)" v-else>解绑</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "rpjDetail",
		data() {
			return {
				formData:{
					name:'',
					type:'',
					contract_number:'',
					come_time:'',
					leave_time:'',
					belong_dept_name:'',
					rparty_name:'',
				},
				workerList:[],
				certificateList:[],
				stateOptions: {
					10: "创建中",
					20: "审批中",
					30: "待入厂",
					40: "进行中",
					50: "已完成",
					60: "已关闭",
				},
				act_states: {
					0: "草稿中",
					1: "进行中",
					2: "被退回",
					3: "被撤回",
					4: "已完成",
					5: "已关闭",
				},
				rpj_states: {
						10: "建筑施工",
						20: "设备设施检维修",
						30: "保安保洁服务",
						40: "其他",
					},
			}
		},
		onLoad(params) {
			this.rpjId = params.rpjId;
			this.getRpjDetail();
		},
		onShow() {
			this.getworkerList();//工作人员
			this.getcertificateList();//证书
		},
		methods: {
			//获取工作operation
			getRpjDetail() {
				let that = this;
				that.$u.api.rpjItem(that.rpjId).then((res) => {
					that.formData = {...res}; 
				});
			},
			
			//获取工作人员
			getworkerList() {
				let that = this;
				that.$u.api.rpjMembers({rpj: that.rpjId, page: 0}).then(res => {
					that.workerList =res;
				})
			},
			
			//获取证书
			getcertificateList(){
				let that = this;
				that.$u.api.rpjFileList({rpj: that.rpjId, page: 0}).then(res => {
					that.certificateList =res.filter(item=>{
						return item.files.length>0
					});
				})
			},
			
			//解绑卡
			bindBtl(row,type){
				let that = this;
				let form = {};
				form.type = type;
				form.code = res.result;
				form.employee = row.visitor_.employee;
				if(type==10){
					uni.scanCode({
						 success: function (res) {
							 that.$u.api.thirdBltBind(form).then(res=>{
								 debugger;
								 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
				})
			},

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

	}
	.visitorsWrap,.filesWrap{
		padding: 0 10px;
		
	}
	
	.visitorsItem,.filesItem{
		display: flex;
		font-size: 28upx;
		align-items:center;
				border-bottom: 1upx solid #eeeeee;
	}
	.filesItem{
		border-bottom: 1upx solid #eeeeee;
	}
	.itemTitle{
		height: 80upx;
		font-size: 32upx;
		line-height: 40upx;
	}
	.itemTitle>.visitorCell,.itemTitle>.fileCell{
		color: #212121;
	}
	.visitorCell,.fileCell{
		flex: 1;
		color: #666666;
		text-align: center;
	}
	.leftFileCell{
		flex: 2;
		text-align: left;
		line-height: 16px;
		align-items: center;
		padding: 10upx 0;
	}
	.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;
	}
</style>
