<template>
	<view class="container">
		<view class="banner-box">
			<image v-if="currentTabIndex == 0" src="/static/imgs/check.jpg" mode=""></image>
			<image v-if="currentTabIndex == 1" src="/static/imgs/check.jpg" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">外包考核</view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">检查记录</view>
			</view>
		</view>
		<view class="content" v-if="currentTabIndex == 0">
			<view class="interviewee">
				<view class="radio">
					<view class="r-div">
						<text class="input_left">外包项目</text>
						<!-- <text class="input_right" @click="navTo('/pages/repair-record/repair-record')"><image class="right-img" src="../../static/imgs/liebiao.png"></image></text> -->
					</view>
					<view class="radiolist" style="border-top:0.5px solid #eeeeee">
						<view style="border-top: none;border-bottom: 0.5px solid #eeeeee;" class="" @click="showradio(index)" v-for="(item, index) in firstRepairItems" :key="index" :class="[firstIndex == index ? 'showcolor' : '']">
							<p class="item_title">{{ item.name }}</p>
							<span class="item_more">{{ item.sub_name }}</span>
							<image src="/static/imgs/handel.png" v-if="firstIndex == index" />
						</view>
					</view>
				</view>

				<view class="form-box">
					<view class="form-item">
						<text class="label">外包小项:</text>
						<view class="ipt-box select">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<picker class="picker" v-if="secondRepairItems.length > 0" :range="secondRepairItems" @change="changeSecondRepairItems" range-key="name">
								<view>{{ secondRepairItems[secondIndex].name }}</view>
							</picker>
						</view>
					</view>
					
					<view class="form-item">
						<text class="label">考核区域:</text>
						<view class="ipt-box select">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<picker class="picker" v-if="places.length > 0" :range="places" @change="changePlace" range-key="name">
								<view>{{ places[placeIndex].name }}</view>
							</picker>
						</view>
					</view>
					<view class="form-item">
						<text class="label">楼层:</text>
						<view class="ipt-box"><input class="top-t" v-model="repairFloor" placeholder="请输入楼层"  maxlength="50" /></view>
					</view>
					<view class="form-item">
						<text class="label">房号:</text>
						<view class="ipt-box"><input class="top-t" v-model="repairRoomNo" placeholder="请输入房号(选填)"  maxlength="50" /></view>
					</view>
					<view class="form-item">
						<text class="label">考核描述:</text>
						<view class="ipt-box">
							<input class="top-t" v-model="formDesc" placeholder="请输入考核描述" type="text" maxlength="50" />
						</view>
					</view>
					
					<view class="form-item">
						<text class="label">考核建议:</text>
						<view class="ipt-box">
							<input class="top-t" v-model="faultProposal" placeholder="请输入考核建议" type="text" maxlength="50" />
						</view>
					</view>
					<view class="form-item">
						<text class="label">考核评价:</text>
						<view class="ipt-box">
							<input class="top-t" v-model="faultEvaluate" placeholder="请输入考核评价" type="text" maxlength="50" />
						</view>
					</view>
					<view class="form-item">
						<text class="label">考核分数:</text>
						<view class="ipt-box">
							<view class="">
								<!-- <uni-number-box :min="-50" :max="50" :value="checkFraction" @change="unbChange($event, index)" /> -->
								<input class="top-t" v-model="checkFraction" placeholder="请输入考核分数" type="text" maxlength="50" />
							</view>
						</view>
					</view>
					
				</view>
				<view style="margin: 20upx;"><text class="input_left">考核图片（最多上传3张）</text></view>
				<view class="pic">
					<view class="img-box">
						<view class="img-item" v-for="(item, index) in imgs" :key="index">
							<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
							<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
						</view>
						<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 3"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
					</view>
				</view>
				<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
			</view>
			<view class="occupied"></view>
			<view class="footer-btn" @click="submit"><view class="btn">提交</view></view>
		</view>
		<!-- 检查列表 -->
		<view v-else>
			<view class="list-content" v-if="repair.length > 0">
				<view class="details" v-for="(item, i) in repair" :key="i" @click="details(item)">
					<view class="detail_header">
						<text class="blueSign"></text>
						<text class="font-tilte">外包考核</text>
						<text v-if="item.reply_flag =='0'" class="statusred"  >未回复</text><!-- statusred -->
						<text v-if="item.reply_flag =='1'" class="statusred" style="color: #ff9000;">已回复</text>
						<text v-if="item.reply_flag =='2'" class="statusred" style="color: green;">已办结</text>
					</view>

					<view class="detail_msg">
						<!-- <view class="info-item">
							<text>巡检人：</text>
							<text class="infoSpan">{{ item.userName }}</text>
						</view> -->
						<view class="info-item">
							<text>外包选项：</text>
							<text class="infoSpan">{{ item.repair_option_name }}</text>
						</view>
						<view v-if="item.repair_option_sub" class="info-item" >
							<text>外包小项：</text>
							<text class="infoSpan">{{ item.repair_option_sub_name}}</text>
						</view>
						
						<view class="info-item">
							<text>考核位置：</text>
							<text class="infoSpan">{{item.repair_place+" "+(item.repair_floor||'')+""+(item.repair_room_no?"-"+item.repair_room_no+'':'')}}</text>
						</view>
						<view v-if="item.repair_option_sub" class="info-item" >
							<text>考核描述：</text>
							<text class="infoSpan">{{ item.fault_detail}}</text>
						</view>
						
						<view v-if="item.fault_detail" class="info-item">
							<text>考核建议：</text>
							<text class="infoSpan">{{ item.fault_proposal }}</text>
						</view>
						<view  class="info-item" >
							<text>考核评价：</text>
							<text class="infoSpan">{{ item.fault_evaluate}}</text>
						</view>
						<view class="info-item">
							<text>考核分数：</text>
							<text class="infoSpan">{{item.check_fraction+"分"}}</text>
						</view>
						<view class="info-item">
							<text>考核时间：</text>
							<text class="infoSpan">{{ item.repair_time}}</text>
						</view>
						<view v-if="item.accept_date" class="info-item" >
							<text>受理时间：</text>
							<text class="infoSpan">{{ formatDate(item.accept_date,'dateTime')}}</text>
						</view>
						<view v-if="item.finish_date" class="info-item" >
							<text>处理时间：</text>
							<text class="infoSpan">{{ formatDate(item.finish_date,'dateTime')}}</text>
						</view>
						<!-- <view class="comment-btn" v-if="item.conmentStatus == 0" @click="goEvaluatePage(item.detailId)">评价</view> -->
						<!-- <view class="comment-btn bg-ccc" v-if="item.conmentStatus == 1">已评价</view> -->
					</view>
				</view>
			</view>
			<content-none v-else :padTop="20"></content-none>
		</view>
		<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
		<!-- <view class="common-shade box box-center box-align-center" v-if="showAlert" @click="showAlert=false" >
			<view  style="background: white;height: 160upx;width: 100%;border-radius: 10upx 10upx 0upx 0upx;position: absolute;bottom: 0upx;">
				<view @click="photo" style="border-bottom: 1px solid #000000; border-radius: 10upx 10upx 0upx 0upx; height: 80upx;line-height: 80upx;text-align: center;">
					拍摄
				</view>
				<view @click="getImage" style="height: 80upx;line-height: 80upx;text-align: center;">
					从相册选择
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import {  saveFaultRepairInfo, getMyFaultRepairList ,getFaultRepairByParentCode  } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, convertImgToBase64, formatDate,wxSdk,uploadImg } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js';
export default {
	components: {
		loadMore,
		contentNone,
		uniNumberBox
	},
	data() {
		return {
			formatDate: formatDate,
			//分页
			page: 1,
			pageSize: 10,
			loadingType: 0, //0-loading前；1-loading中；2-没有更多了
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			places: [{ id: '1', name: '科技楼' }, { id: '2', name: '调度楼' }, { id: '3', name: '后勤楼' }, { id: '4', name: '会议中心' }],//, { id: '5', name: '其它' }
			placeIndex: 0,
			userInfo: getStorage('userInfo'),
			entryOrderPic: [],
			showIndex: 0,
			currentTabIndex: 0,
			repair: [],
			formBxwz: '',
			formDesc: '',
			formName: getStorage('userInfo').userName,
			formTelp:getStorage('userInfo').telnumber,
			faultProposal:"",
			faultEvaluate:"",
			imgs: [],
			imgsId: [],
			index: 0,
			firstRepairItems:[],
			firstIndex:0,
			secondRepairItems:[],
			secondIndex:0,
			repairFloor:'',
			repairRoomNo:'',
			urgents:['不紧急','紧急'],
			urgentIndex:0,
			checkFraction:'0',
			showAlert:false,
		};
	},
	watch: {
		currentTabIndex: function(newVal, oldVal) {
			if (newVal ==1) {
				this.page = 1;
				this.loadingType = 0;
				this.dataList();
			}else{
			}
		},
		checkFraction:function(newVal, oldVal){
			// if(newVal==null||newVal==''){
			// 	this.checkFraction = '';
			// 	return;
			// }
			// var oneReg = new RegExp(/^[1-9\-][0-9]*/);
			// if(oneReg.test(newVal)){
			// 	this.checkFraction = newVal.substring(0,newVal.length-2);
			// 	console.log(this.checkFraction)
			// }
			var l = newVal.length;
			if(l==1){
				var oneReg = new RegExp("^[0-9\-]");
				if(!oneReg.test(newVal)) {
					newVal = newVal.slice(0,-1);
					setTimeout(() => { this.checkFraction = newVal }, 100);
				}
			}else{
				let num = newVal.charAt(newVal.length-1)
				var reg=new RegExp("[0-9]")
				if(!reg.test(num)) {
					newVal =  newVal.slice(0,-1);
					setTimeout(() => { this.checkFraction = newVal }, 100);
				}
			}
			
			// var ss = newVal.match(oneReg);
			// this.changeCheckFraction(ss||'');
			// this.checkFraction = ss||'';
			// console.log(this.checkFraction);
		}
	},
	onLoad(option) {
		this.currentTabIndex = option.currentTabIndex || 0;
		// 部门
		
		if (this.currentTabIndex == 1) {
			this.page = 1;
			this.loadingType = 0;
			this.dataList();
		}else{
			this.getFirstRepairItems();
		}
	},
	onReachBottom() {
		if (this.loadingType !== 0 || this.currentTabIndex == 0) {
			return;
		}
		this.loadingType = 1;
		this.page = this.page + 1;
		this.dataList();
	},
	methods: {
		changeSecondRepairItems(e) {
			this.secondIndex = e.detail.value;
		},
		unbChange(value, index) {
			this.checkFraction = value;
		},
		getFirstRepairItems(){
			let params = {
				method: getFaultRepairByParentCode,
				data: {
					parentCode:'0',
					itemType:2
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					this.firstRepairItems = res.returnData;
					this.getSecondRepairItems();
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		getSecondRepairItems(){
			this.secondIndex=0;
			var parentCode = this.firstRepairItems[this.firstIndex].code;
			let params = {
				method: getFaultRepairByParentCode,
				data: {
					parentCode:parentCode,
					itemType:2
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					if(res.returnData.length>0){
						this.secondRepairItems = res.returnData;
					}else{
						this.secondRepairItems = [{id:'',name:'暂无'}]
					}
					
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		changePlace(e) {
			this.placeIndex = e.detail.value;
		},
		details: function(item) {
			uni.navigateTo({
				url: '/pages/malfunc-check/check-details-my?id=' + item.id
			});
		},
		dataList() {
			let params = {
				method: getMyFaultRepairList,
				data: {
					userId: this.userInfo.id,
					pageNum: this.page,
					pageSize: this.pageSize,
					isInspection:1
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					if (this.page == 1) {
						this.repair = res.returnData || [];
					} else {
						if (res.returnData.length > 0) {
							this.repair = this.repair.concat(res.returnData);
							this.loadingType = 0;
						} else {
							this.loadingType = 2;
						}
					}
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},

		submit() {
			var regPhone = /^1[3|4|5|6|7|8|9]\d{9}$/;
			// if (!regPhone.test(this.formTelp)) {
			// 	alertTip('请输入正确的手机号');
			// 	return false;
			// }
			
			if (!this.repairFloor) {
				alertTip('请输入楼层');
				return false;
			}
			if (!this.formDesc) {
				alertTip('请输入考核描述');
				return false;
			} 
			if (!this.faultEvaluate) {
				alertTip('请输入考核评价');
				return false;
			} 
			if (!this.faultProposal) {
				alertTip('请输入考核建议');
				return false;
			} 
			// if (!this.formDesc) {
			// 	alertTip('请输入问题描述');
			// 	return false;
			// }
			let params = {
				method: saveFaultRepairInfo,
				data: {
					userId: this.userInfo.id,
					// repairDeptId:this.userInfo.deptId,//this.deptList[this.departmentIndex].id,
					// repairDeptName:this.userInfo.deptName,//this.deptList[this.departmentIndex].name,
					repairPersonId:this.userInfo.id,
					repairPersonName:this.formName,
					repairOption: this.firstRepairItems[this.firstIndex].code,
					repairOptionSub: this.secondRepairItems[this.secondIndex].code,
					repairAddr: this.formBxwz,//详细地址
					faultDetail: this.formDesc,
					faultPic1: this.imgsId[0],
					faultPic2: this.imgsId[1],
					faultPic3: this.imgsId[2],
					repairPlace:this.places[this.placeIndex].name,
					repairPersonPhone:this.formTelp,
					isInspection:1,
					urgent:this.urgentIndex,
					repairFloor:this.repairFloor,
					repairRoomNo:this.repairRoomNo,
					checkFraction:this.checkFraction,
					faultProposal:this.faultProposal,
					faultEvaluate:this.faultEvaluate,
				}
			};
			callbackRequest(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
					alertTip(res.returnMsg);
					setTimeout(_ => {
						this.repair = [];
						this.imgs = [];
						this.imgsId = []
						this.showIndex = 0;
						this.currentTabIndex = 1;
						this.formBxwz = '';
						this.formDesc = '';
					}, 2000);
				} else {
					alertTip(res.returnMsg);
				}
			});
		},
		showradio: function(index) {
			var self = this;
			self.firstIndex = index;
			this.getSecondRepairItems();
		},
		async chooseImg() {
			let chec = 0;
			let sty = [];
			let _this = this;
			uni.showActionSheet({
				itemList:['拍照','相册'],
				success:function(resp){
					chec = resp.tapIndex;
					if (chec == 0) {
						sty = ['camera']; //从相册相机选择 
					} else {
						sty = ['album']; //从相册相机选择
					}
					uni.chooseImage({
						count:3,
						sizeType: ['compressed'],
						sourceType: sty, 
						quality: 1,
						success: async function(res){
							let resData = res.tempFilePaths;
							for(let i=0;i<resData.length;i++){
								if(_this.imgs.length>3){
									break;
								}
								uni.getImageInfo({
									src: resData[i],
									success:async (path) => {
										convertImgToBase64(path.path, async function(base64) {
											if(_this.imgs.length<3){
												// _this.imgs.push(base64);
												uni.showLoading({
													title: '图片上传中'
												})
												let blength = base64.length;
												let glength = 7500;
												if(blength<=glength){
													let uploadParam = {
														base64: base64,
														userId:  getStorage('userInfo').userId+i,
														groupEnd: '1'
													}
													await uploadImg(uploadParam).then(resu => {
														resu = resu.data ;
														uni.hideLoading();
														if (resu.returnCode != 1) {
															alertTip(resu.returnMsg);
														}else{
															_this.imgs.push(base64);
															_this.imgsId.push(resu.returnData+".jpg");
														}
													});
												}else{
													let fnum = parseInt(blength/glength);
													for(let j=1;j<fnum+1;j++){
														if(j==fnum){
															let groupBase = base64.slice((j-1)*glength);
															console.log(groupBase.length,"groupBaselength");
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '1'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																	_this.imgs.push(base64);
																	_this.imgsId.push(resu.returnData+".jpg");
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}else{
															let groupBase = base64.slice((j-1)*glength,glength*j);
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '0'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}
														
													}
													uni.hideLoading();
												}
												
												
											}
											
										});
									},
								});
							}
							
						}
					});
				},
				fail:function(resp){
					console.log(resp.errMsg);
				}
			});
		},
		//删除图片
		removeImg(index) {
			this.imgs.splice(index, 1);
			this.imgsId.splice(index, 1);
		},
	}
};
</script>

<style lang="scss">
@import url('../../static/css/repair/malfunction-repair.css');
@import '@/static/css/common.scss';

.nolist {
	font-size: 30upx;
	color: #797979;
	text-align: center;
	margin-top: 20upx;
}

.container {
	position: relative;
	overflow: hidden;

	.banner-box {
		width: 100%;
		height: 240upx;
		position: absolute;
		top: 0;
		left: 0;

		image {
			width: 100%;
			height: 100%;
		}

		border-radius: 30upx;
	}

	.main {
		margin: 172upx 40upx 0;
		position: relative;
		z-index: 10;

		.tab-box {
			overflow: hidden;
			border-radius: 10upx 10upx 0 0;
			background: rgba(132, 149, 167, 0.8);
			height: 70upx;

			.tab-item {
				float: left;
				height: 70upx;
				width: 50%;
				font-size: 30upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 70upx;
			}

			.active {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	}
}

.list-content {
	font-size: 28upx;
	margin: 0 40rpx;
	.details {
		background: white;
		padding: 0 15upx 15upx;
		// border-radius: 15upx;
		margin-bottom: 10rpx;
		.detail_header {
			border-bottom: #f8f8f8 5upx solid;
			height: 90upx;
			line-height: 90upx;
			// margin: 0;
			// border-radius: 10upx;

			.blueSign {
				height: 28upx;
				width: 5upx;
				background: #00c277;
				display: inline-block;
				margin-left: 20upx;
				vertical-align: middle;
			}

			.font-tilte {
				font-weight: bold;
				margin-left: 20upx;
				vertical-align: middle;
			}
		}

		.detail_msg {
			margin-left: 20upx;
			border-radius: 10upx;
			overflow: hidden;
			view {
				height: 60upx;
				line-height: 60upx;
			}

			.status {
				position: absolute;
				color: red;
				margin-left: 580upx;
				margin-top: -15upx;
			}
		}
	}
}

.statusgr {
	float: right;
	margin-right: 30upx;
	color: #00c277;
}

.statusred {
	float: right;
	margin-right: 30upx;
	color: red;
}

.img-box {
	overflow: hidden;
	padding-top: 20rpx;
	padding-bottom: 10rpx;

	.img-item {
		float: left;
		width: 200upx;
		height: 200upx;
		border: 1px solid #ddd;
		margin: 0 22rpx 20upx 0upx;
		position: relative;
		box-sizing: border-box;

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.remove-btn {
			position: absolute;
			top: -18upx;
			right: -18upx;
			width: 44upx;
			height: 44upx;
			z-index: 2;
		}
	}

	.upload-btn {
		.img {
			width: 60upx;
			height: 60upx;
			margin: 70upx auto 0;
		}
	}
}
.detail_msg .info-item {
	font-size: 28upx;
	margin-right: 30upx;
	text {
		display: inline-block;
		width: 140upx;
	}

	.infoSpan {
		width: auto;
		font-size: 28upx;
		color: #666;
		float: right;
	}
}
.form-box {
	background: #fff;
	.form-item {
		overflow: hidden;
		border-bottom: 1px solid #eee;
		padding: 30upx 20upx;
		.label {
			float: left;
			width: 150upx;
			font-size: 28upx;
			color: #333;
			font-weight: bold;
			line-height: 50upx;
		}
		.ipt-box {
			margin-left: 160upx;
			input {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
			}
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}
			.picker {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
				margin-left: 10upx;
			}
		}
	}
}

.comment-btn {
	float: right;
	font-size: 24upx;
	border-radius: 10upx;
	color: #fff;
	// line-height: 30upx;
	text-align: center;
	min-width: 120upx;
	margin-right: 30upx;
	background-color: #00c277;
}

.common-shade{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		background: rgba(0,0,0,0.7);
		z-index:9999;
	}
	
	.box {
		display: flex;
		display: -webkit-flex;
	}
	
	.box-row-reverse {
		flex-direction: row;
	}
	
	/*上下排列*/
	.box-column {
		flex-direction: column;
	}
	
	/*上下排列*/
	.box-left {
		justify-content: flex-start;
	}
	
	/*居右*/
	.box-right {
		justify-content: flex-end;
	}
	
	/*居左*/
	.box-center {
		justify-content: center;
	}
	
	/*居中*/
	.box-between {
		justify-content: space-between;
	}
	
	/*两端对齐*/
	.box-align-center {
		align-items: center;
	}
	
	.box-wrap {
		flex-wrap: wrap;
	}
</style>
