<template>
	<view>
		<!-- 顶部 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">日志上报</block>
			<block slot="content"></block>
			<block slot="right">
				<view class="flex justify-center">
					<button @click="save()"  class="margin-top-ssm cu-btn round line-blue text-white">确定</button>
				</view>
			</block>
		</cu-custom>
		<!-- 标题 -->
		<view class="cu-bar bg-white solid-bottom padding-tb-sm padding-lr" style="min-height: 44px;height: auto;">
			<text  class="text-black text-bold" style="text-align:justify; text-justify:inter-ideograph;">{{title}}</text>
		</view>
		<!-- 内容 -->
		<form>
			<!-- <view class="cu-form-group_1 margin-top" @click="showdialog()"> -->
			<view class="cu-form-group_1 margin-top">
				<view class="title">上报流程</view>
				<!-- <view style="flex: 1;display: flex;">
					<input placeholder="请选择" disabled="true" placeholder-style="color:#AEAEAE;font-size:30rpx" v-model="flowName" name="input"></input>
					<text class='cuIcon-right text-gray' style="margin-left: 100px;"></text>
				</view> -->
				<picker @change="bindPickerChange" :value="flowName" :range="workflow" range-key="name" style="flex: 1;">
					<view style="display: flex;justify-content: space-between;">
						<view style="flex: 1;">
							<text v-if="flowName" style="font-size: 30rpx;">{{flowName}}</text>
							<text v-else style="color:#AEAEAE;font-size:30rpx">请选择</text>
						</view>
						<text class='cuIcon-right text-gray'></text>
					</view>
				</picker>
			</view>
			<!-- <view class="cu-form-group_3">
				<view class="title">限定日期</view>
				<view style="flex: 1;display: flex;">
					<datetime-picker v-model="data.blackoutDate" placeholder="请选择日期" style="color:#AEAEAE;font-size:30rpx;flex: 1;" fields="minute"
					 @change="changeStartTime">
						<text class='cuIcon-right text-gray'></text>
					 </datetime-picker>
				</view>
			</view> -->
			<view class="cu-form-group_2">
				<view class="title">上报说明</view>
				<view style="flex: 1;display: flex;">
					<textarea  v-model="data.remarks" maxlength="-1" placeholder="请输入" placeholder-style="color:#AEAEAE;font-size:30rpx" ></textarea>
				</view>
			</view>
			<view class="cu-form-group_2">
				<view class="title">上报批次</view>
				<view style="flex: 1;display: flex;">
					<input placeholder="请输入正整数" placeholder-style="color:#AEAEAE;font-size:30rpx" v-model="data.reportTime" name="input" style="font-size:30rpx"></input>
				</view>
			</view>
			
			<view class="cu-form-group_2" @click="navToPer()" v-if="radio==0 || radio==-1">
				<view class="title">下一审批人</view>
				<view style="flex: 1;display: flex;justify-content: space-between;">
					<input placeholder="请选择" disabled="true" placeholder-style="color:#AEAEAE;font-size:30rpx" v-model="approver" name="input" style="font-size:30rpx"></input>
					<text class='cuIcon-right text-gray'  ></text>
				</view>
			</view>
			<template v-else>
				<view class="cu-form-group_1">
					<view class="title">任务人</view>
				</view>
				<view class="cu-list_1 bg-white padding-sm" style="border-bottom: 1px solid #E3E1E1;">
					<view class="cu-list_item" style="margin-right: 0;" v-for="(item,index) in principal" :key="item.id">
						<view class="cu-capsule round">
							<view class="cu-tag bg-gray-secondary padding-sm">
								{{item.user_name}}
							</view>
						</view>
						<text class="padding-lr-sm" v-if="index != principal.length-1"> >> </text>
					</view>
				</view>
			</template>
			<view class="cu-form-group_1">
				<view class="title">抄送人</view>
			</view>
			<view class="cu-list_b">
				<view class="cu-list_1">
					<view class="cu-list_item" v-for="(item) in copyList" :key="item.id">
						<view class="cu-capsule round">
							<!-- <view v-if="item.type==1" class='cu-tag bg-gray-secondary '>
								施工方
							</view>
							<view v-if="item.type==2" class='cu-tag bg-gray-secondary '>
								监理方
							</view>
							<view v-if="item.type==3" class='cu-tag bg-gray-secondary '>
								业主方
							</view> -->
							<!-- <view class="cu-tag bg-gray-secondary">
								<text class="cuIcon-titles text-gray"></text>
							</view> -->
							<view class="cu-tag bg-gray-secondary">
								{{item.user_name}}
							</view>
							<view class="cu-tag bg-gray-secondary" @tap="delprincipal(item,'copy')">
								<image src="/static/index/delete-blue.png" class="login-img"></image>
							</view>
						</view>
					</view>
				</view>
				<view>
					<button @click="addPrincipal('copy')" class="cu-btn round bg-blue-secondary"><text class="cuIcon-add text-blue">新增</text></button>
				</view>
			</view>
			<view class="cu-form-group_3 flex">
				<view class="title">每人限定时间</view>
				<picker class="flex-sub text-right" @change="timeLimitChange" :value="data.timeLimit" :range="timeLimitList">
					<view class="picker">
						{{timeLimitList[data.timeLimit]}}天
						<text class='cuIcon-right text-gray'></text>
					</view>
				</picker>
			</view>
			
		</form>
		<!--流程弹窗 -->
		<view class="cu-modal bottom-modal" :class="modalShow?'show':''" >
			<view class="cu-dialog" style="background-color: white;border-radius: 20rpx 20rpx 0 0;">
				<view class="cu-bar bg-white">
					<view class="action text-gray"></view>
					<view class="action text-black text-bold" style="color: #101010;">选择上报流程</view>
					<view class="action text-gray" @tap="showdialog()">取消</view>
				</view>
				<view class="">
					<radio-group class="block" @change="RadioChange">
						<view class="cu-list menu text-left"  v-for="(item,index) in workflow" :key="index">
							<view class="cu-item">
								<label  class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{item.name}}</view>
									<radio class="round" :class="radio==item.value?'checked':''" :checked="radio==item.value ? true:false"
									 :value="item.value"></radio>
								</label>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					name:'',
					blackoutDate: "",
					remarks:"",
					formDataId:"",
					userIDs:"",
					flow:"",
					processId:null,
					timeLimit:0,//每人限定时间在timeLimitList的索引
					reportTime:'',//上报批次
				},
				flowName:"",
				title:"",
				approver:"",
				approverList:[],
				workflow:[{id:1,name:"自定义流程"}],
				modalShow:false,
				radio: -1,
				
				timeLimitList:[1,2,3,4,5,6,7,10,15,20,25,30],
				principal:[],
				copyList:[],
				contractId : uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).contractId,
				project:uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id),
				diary:{},
				urlName:'',
				isZJ:0,
				
				tableName:'',
			}
		},
		onLoad(e) {
			//console.log(e)
			this.diary = getApp().globalData.diary;
			this.urlName = e.urlName;
			this.isZJ = e.isZJ;
			
			this.getReportedName();
			this.findWorkflow();
		},
		methods: {
			save(){
				if(this.radio==-1){
					this.$prompt.none("请选择上报流程");
					return;
				}
				if(this.data.flow==0){
					if(this.data.userIDs==''){
						this.$prompt.none("请选择审批人");
						return;
					}
				}

				var userId = uni.getStorageSync("userInfo").id;
				
				let copyUserIds = [];
				for(let i=0;i<this.copyList.length;i++){
					copyUserIds.push(this.copyList[i].id)
				}
				
				let cs,contractId;
				// if(this.project.contract_type == 1 || this.project.contract_type == 2){
				// 	//监理抽检
				// 	contractId = uni.getStorageSync("curContractId");
				// 	cs = 1;
				// }else{
				// 	//施工质检
				// 	contractId = this.contractId;
				// 	cs = 0;
				// }
				
				contractId = this.contractId;
				//PC的日志上报cs是0
				cs = 0;
				
				
				//上报批次检验
				if (!this.data.reportTime) {
					this.$prompt.none("上报批次必须是大于0的正整数");
					return false;
				}
				else if (!(/(^[1-9]\d*$)/.test(this.data.reportTime))) {
					this.$prompt.none("上报批次必须是大于0的正整数");
					return false;
				}
				
				var that=this;
				let entityVoList = [];
                    entityVoList.push(this.diary);
				let reportVo = {
					type: 1,
					tableName:this.tableName,
					entityVoList:entityVoList,
					taskVo: {
						name: this.data.name,
						blackout_days: this.timeLimitList[this.data.timeLimit],
						remarks: this.data.remark,
						reportTime: this.data.reportTime,
						userIds: this.data.userIDs,
						flow: this.data.flow,
						processId: null,
						formDataId: null,
						testDataId: null,
						cs: cs,
						copyUserIds: copyUserIds.join(','),
						type: 2
					}
				}
				
				this.http.request("/app/"+this.urlName + '/report',{
					"voStr":JSON.stringify([reportVo]),
					userId:userId,
					contractId:contractId
				}).then((res)=>{
					if(res.result=="1"){
						that.$prompt.none("上报成功");
						uni.$emit('report',"");
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},2000)
					}else{
						//that.$prompt.none(res.msg)
						uni.showToast({
							title:res.msg,
							duration:3000,
						  icon:"none"
						})
					}
					//console.log(res)
				})
			},
			navToPer(){
				 getApp().globalData.principal = this.approverList;
				 uni.navigateTo({
				 	url:"/pages/constructionLog/personnel/personnel?name=选择审批人"
				 })
			},
			changeStartTime(date) {
				this.data.blackoutDate = date.fmt1 + " " + date.fmt8;
			},
			showdialog(){
				this.modalShow= !this.modalShow;
			},
			RadioChange(e) {
				this.radio = e.detail.value;
				this.flowName = this.workflow[this.radio].name;
				this.data.flow = this.workflow[this.radio].id;
				this.showdialog();
			},
			bindPickerChange(e){
				//console.log(e)
				this.radio = e.detail.value;
				this.flowName = this.workflow[this.radio].name;
				this.data.flow = this.workflow[this.radio].id;
				
				if(this.data.flow != 0){
					this.http.request("/app/getLinks",{id:this.data.flow}).then((res)=>{
						//console.log(res)
						if(res.datas && res.datas.length > 0){
							res.datas.forEach((item)=>{
								item.user_name = item.userName
							})
							this.principal = res.datas;
						}
					})
				}else{
					this.principal = [];
				}
				
			},
			/**
			 * 查询固定流程
			 */
			findWorkflow(){		
				let contractId=this.contractId;
				
				this.http.request("/app/workflowlist",{type:'0',contractId:contractId}).then((res)=>{
					res.datas.forEach((item)=>{
						this.workflow.push(item);
					});
					this.workflow.forEach((item,index)=>{
						item.value =''+index+'';
					})
				})
			},
			
			timeLimitChange(e){
				this.data.timeLimit = e.detail.value;
			},
			addPrincipal(type) {
				//console.log(this.principal);
				let list = [];
				let name = '';
				
				if(type == 'task'){
					list = this.principal;
					name = '选择任务人'
				}else if(type == 'copy'){
					list = this.copyList;
					name = '选择抄送人'
				}
				//把已选值储存到全局变量
				getApp().globalData.principal = list;
				uni.navigateTo({
					url: "/pages/constructionLog/personnel/personnel?name=" + name
				})
			},
			delprincipal(value,type) {
				let list = []
				if(type == 'task'){
					list = this.principal;
				}else if(type == 'copy'){
					list = this.copyList;
				}
				
				list.forEach((item, index, arry) => {
					if (item.id == value.id) {
						list.splice(index, 1);
						return;
					}
				})
			},
			
			getReportedName(){
				this.http.request("/app/"+this.urlName + "/getReportedName",{
					isZj: this.isZJ,
					contractId:this.contractId,
				}).then((res)=>{
					//console.log(res)
					if(res.result == '1' && res.datas){
						this.tableName = res.datas[0].name;
						let dateStr =  this.diary.date;
						let arr = dateStr.split('-');
						if(arr.length == 3){
							dateStr = arr[0]+'年'+arr[1]+'月'+arr[2]+'日';
						}
						this.title=dateStr + "  " + this.tableName;
						this.data.name =this.title;
					}
				})
			}
		},
		onShow() {
			/* 监听选择施工人员页面的handleFun方法 */
			uni.$on("approve", res => {
				 this.approverList = res;
			     this.approver=res[0].user_name;
				 this.data.userIDs=res[0].id;
			})
			uni.$on("copyPerson", res => {
				this.copyList = res;
				//console.log(this.principal)
			})
		}
	}
</script>

<style>
   .cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 4px;
		color: #101010;
		font-size: 14px;
		line-height: 17px;
   }
   
   .boderbo {
      	border-bottom: 1px solid #F7F7F7;
   }
   
   .cu-form-group_1 {
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #E3E1E1;
		height: 88rpx;
		background-color: #fff;
   }
   
   .cu-form-group_1 .title {
		width: 180rpx;
		font-size: 30rpx;
		color: #101010;
   }
   
   /* .cu-form-group_1 input {
		width: 560rpx;
		color: #8a8a8a;
		font-size: 30rpx;
   } */
   
   .cu-form-group_2 {
		display: flex;
		padding: 22rpx 24rpx;
		background-color: #fff;
		margin-bottom: 2rpx;
   }
   
   .cu-form-group_2 .title {
		width: 180rpx;
		font-size: 30rpx;
		color: #101010;
   }
   
   .cu-form-group_2 textarea {
		/*font-size: 30rpx;
		 color: #8a8a8a; */
		width: 100%;
		height: 130rpx;
   }
   
   .cu-form-group_3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #E3E1E1;
		height: 45px;
		background-color: #fff;
   }
   
   .cu-form-group_3:last-child {
		border-bottom: none;
		margin-bottom: 22rpx;
   }
   
   .cu-form-group_3 .title {
		width: 180rpx;
		font-size: 30rpx;
		color: #101010;
   }
   
   .cu-form-group_3 .picker {
		color: #8a8a8a;
		font-size: 30rpx;
   }
   .cu-list_b{background-color: #fff;padding: 22rpx 24rpx;margin-bottom: 22rpx;}
   .cu-list_1{display: flex;flex-wrap: wrap;}
   .cu-list_item{margin-bottom: 26rpx;margin-right: 20rpx;}
   .text-black{color: #101010;font-size: 14px;}
   .uni-input-placeholder {
       /* left: 10px!important; */
	}
	.uni-textarea-compute, .uni-textarea-line, .uni-textarea-placeholder, .uni-textarea-textarea {
	    /* left: 10px!important; */
     }
	 .cu-form-group_1 .title{
	     /* width: 100px!important; */
     }
	 .cu-form-group_2 .title{
		   /* width: 100px!important; */
	 } 
	 .cu-modal.show {
	 	overflow-y: auto;
	 	pointer-events: auto; 
	 }
	 uni-textarea{
		 font-size: 30rpx;
	 }
</style>
