<template>
	<view class="container">
		<view class='info_container'>
			<view class="item item_line">
				<view class="itemname redMi">设备编号</view>
				<view class="itemtext" @click="chooseDevice()">
					<input class="iteminput InputRightMargin" disabled placeholder="请选择设备" :value='recordInfo.serialno' />
					<uni-icons type="arrowdown" class="myarrowright" style="right: 0px;"></uni-icons>
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname">设备名称</view>
				<view class="itemtext">
					<input class="iteminput" disabled="" placeholder="自动携带" v-model="recordInfo.deviceName" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname redMi">任务等级</view>
				<view class="itemtext">
					<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="recordInfo.levelName" />
					<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
					<picker class="picker_" @change="bindPickerLevel($event)" :range="arrayLevel"> </picker>
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname redMi">故障描述</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入" v-model="recordInfo.content" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname redMi">责任人</view>
				<view class="itemtext" @click="selectPeople1()">
					<input class="iteminput InputRightMargin" disabled placeholder="请选择责任人" :value='recordInfo.engineerName' />
					<img src="../../static/img/personlistIcon.png" class="dateIcon" />
				</view>
			</view>
			<view class="item item_line" @click="onShowDatePicker">
				<view class="itemname">要求完成时间</view>
				<view class="itemtext">
					<view>
						<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value='recordInfo.planTime' />
						<img src="../../static/img/dateIcon.png" class="dateIcon" />
					</view>
				</view>
			</view>
			<!-- <view class="item item_line" @click="onShowDatePicker1">
				<view class="itemname">维修完工日期</view>
				<view class="itemtext">
					<view>
						<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value='recordInfo.endTime' />
						<img src="../../static/img/dateIcon.png" class="dateIcon" />
					</view>
				</view>
			</view> -->
			<view class="item item_line">
				<view class="itemname">抄送人</view>
				<view class="itemtext" @click="selectPeopleAll()">
					<input class="iteminput InputRightMargin" disabled placeholder="请选择抄送人" :value='recordInfo.allName' />
					<img src="../../static/img/personlistIcon.png" class="dateIcon" />
				</view>
			</view>
			<!-- <view class="item item_line">
				<view class="itemname redMi">故障类型</view>
				<view class="itemtext">
					<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="recordInfo.typeName" />
					<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
					<picker class="picker_" @change="bindPickerType($event)" :range="arrayType"> </picker>
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname">停机时长</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入" v-model="recordInfo.offHour" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname">故障原因</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入" v-model="recordInfo.cause" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname">维修方案</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入" v-model="recordInfo.solution" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname">维修工时（小时）</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入" v-model="recordInfo.manHour" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname">工时费（元）</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入" v-model="recordInfo.manHourCost" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname">维修费（元）</view>
				<view class="itemtext">
					<input class="iteminput" placeholder="请输入" v-model="recordInfo.cost" @change='dataChange' />
				</view>
			</view>
			<view class="item item_line">
				<view class="itemname redMi">使用状况</view>
				<view class="itemtext">
					<input class="iteminput InputRightMargin" disabled placeholder="请选择" :value="recordInfo.usageName" />
					<uni-icons type="arrowright" class="myarrowright" style="right: 0px;"></uni-icons>
					<picker class="picker_" @change="bindPickerUsage($event)" :range="arrayUsage"> </picker>
				</view>
			</view> -->

		
			<view class="fixMargin"></view>
			<view class="bottom_btn_container">
				<view class="bottom_btn_out">
					<view class="bottom_btn" @click="toBack">取消</view>
					<view class="bottom_btn" @click="goAddRepair">提交</view>
				</view>
			</view>
			<mx-datepicker type="datetime" :value="recordInfo.planTime" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
			<chooseUserSingle v-if="show_search_user1" @change="getUser"></chooseUserSingle>
			<!-- 选择抄送人员 -->
			<chooseUserMulti v-if="show_search_user_all" @change="getUserAll"></chooseUserMulti>
			<!-- 选择设备 -->
			<chooseDeviceSingle v-if="chooseDeviceVisible" @change="getDevice" :device_type='device_type'></chooseDeviceSingle>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '../../request/js/config.js'
	import chooseUserSingle from '@/components/system/chooseUserSingle.vue'
	import chooseUserMulti from '@/components/system/chooseUserMulti.vue'//人员多选(抄送人)
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import chooseDeviceSingle from '@/components/system/chooseDeviceSingle.vue'
	export default {
		components: {
			mxDatepicker,
			uniIcons,
			chooseUserSingle,
			chooseDeviceSingle,
			chooseUserMulti
		},
		data() {
			return {
				device_type:'',
				arrayLevel:[],
				arrayType:[],
				arrayUsage:[],
				
				taskType_list: [],
				arrayTaskType: [],
				taskLevel_list: [],
				arrayTaskLevel: [],
				chooseUserVisible: false,
				chooseDeviceVisible: false,
				config: config,
				record_level: [],
				record_type: [],
				record_usage:[],
				showPicker: false,
				showPicker1: false,
				deepLength: 1,
				recordInfo: {
					planTime: '',
					serialno: '',
					level: '',
					deviceName:'',
					deviceId:'',
					content:'',
					engineerName:'',
					usageName:'',
					engineerId:'',
					type:'10048',
					levelName:'',
					typeName:'',
					offHour:'',
					cause:'',
					solution:'',
					manHour:'',
					manHourCost:'',
					cost:'',
					usage:'',
					allName:''
				},
				date:'',
				time:'',
				userInfo:'',
				zrr: {},
				csr: [],
				id: '',
				targetList: [],
				show_search_user1: false,
				show_search_user_all: false
			}
		},
		onShow() {
			let _this=this;
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					_this.userInfo=res.data
					_this.$set(_this.recordInfo, "engineerId", _this.userInfo.userId)
					_this.$set(_this.recordInfo, "engineerName", _this.userInfo.name)
					},
			});
		    _this.getTime();
			//   let this_=this;
			// setInterval(function () {
			// 	this_.getTime();
			// },1000)
		},
		
		onLoad(option) {
			var _this = this;
			//初始化获取 任务等级数据字典。
			this.$http.request({
				url: '/apis/dict/getDictsByType',
				method: 'post',
				params: {
					type: "task_level"
				},
			}).then(res => {
				if (res) {
					if (res.data.code == 0) {
						this.record_level = res.data.datas;
						this.record_level.forEach(item => {
							this.arrayLevel.push(item.name);

						})
					}
				}
			});
			//初始化获取 使用状况数据字典。
			this.$http.request({
				url: '/apis/dict/getDictsByType',
				method: 'post',
				params: {
					type: "device_status"
				},
			}).then(res => {
				if (res) {
					if (res.data.code == 0) {
						this.record_usage = res.data.datas;
						this.record_usage.forEach(item => {
							this.arrayUsage.push(item.name);
						})
					}
				}
			});
			//初始化获取 设备故障类型数据字典。
			this.$http.request({
				url: '/apis/dict/getDictsByType',
				params: {
					type: 'device_malfunction'
				},
			}).then(res => {
				if (res) {
					if (res.data.code == 0) {
						this.record_type = res.data.datas;
						this.record_type.forEach(item => {
							this.arrayType.push(item.name);

						})
					}
				}
			}).catch(err => {
				console.log(err);
			});
		},
		watch: {

		},
		methods: {
			formatDate(n){
				if(n.toString().length==1){
					return '0'+n
				}else{
					return n
				}
			},
			getTime(){
			    let datatime=new Date();
			    // this.date=datatime.getFullYear()+'-'+this.formatDate(datatime.getMonth()+1)+'-'+this.formatDate(datatime.getDate())+'\xa0'+this.formatDate(datatime.getHours())+":"+this.formatDate(datatime.getMinutes())+":"+this.formatDate(datatime.getSeconds())
				this.date=datatime.getFullYear()+'-'+this.formatDate(datatime.getMonth()+1)+'-'+this.formatDate(datatime.getDate())
				this.recordInfo.planTime = this.date
			 //    this.time=this.formatDate(datatime.getHours())+":"+this.formatDate(datatime.getMinutes())+":"+this.formatDate(datatime.getSeconds())
				// console.log(this.time)
			    // let a = ["日", "一", "二", "三", "四", "五", "六"];
			    // this.weekday=a[datatime.getDay()]
			},
			
			bindPickerLevel: function(e) {
				this.recordInfo.levelName = this.record_level[e.target.value].name
				this.recordInfo.level = this.record_level[e.target.value].id
			},
			bindPickerType: function(e) {
				this.recordInfo.typeName = this.record_type[e.target.value].name
				this.recordInfo.type = this.record_type[e.target.value].id
			},
			bindPickerUsage: function(e) {
				this.recordInfo.usageName = this.record_usage[e.target.value].name
				this.recordInfo.usage = this.record_usage[e.target.value].id
			},
			getUser(val) {
				this.show_search_user1 = false
				if (val) {
					this.$set(this.recordInfo, "engineerId", val.userId)
					this.$set(this.recordInfo, "engineerName", val.NAME)
				}
			},
			getUserAll(val) {
				this.show_search_user_all = false
				if (val) {
					let nameArr = []
					let idArr = []
					val.forEach(item => {
						nameArr.push(item.NAME)
						idArr.push(item.userId)
					})
					console.log(nameArr)
					this.$set(this.recordInfo, "allName", nameArr.toString())//人名
					this.$set(this.recordInfo, "carbonCopyRecipients", idArr)
				}
			},
			selectPeople1() {
				this.show_search_user1 = true;
			},
			selectPeopleAll() {
				this.show_search_user_all = true;
			},
			chooseDevice() {
				this.chooseDeviceVisible = true;
			},
			getDevice(val) {
				this.chooseDeviceVisible = false;
				if (val) {
					this.$set(this.recordInfo, "serialno", val.serialno)
					this.$set(this.recordInfo, "deviceName", val.name)
					this.$set(this.recordInfo, "deviceId", val.id)
				}
			
			},
			formatCsrName(data) {
				var returnName = '';
				for (var i = 0; i < data.length; i++) {
					if (i == 3) {
						returnName += data[i].name + '等等';
						break;
					} else {
						returnName += data[i].name + ','
					}
				}
				returnName = returnName.substring(0, returnName.length - 1);
				return returnName;
			},
			onShowDatePicker() { //显示
				this.showPicker = true;
			},
			onShowDatePicker1() { //显示
				this.showPicker1 = true;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				var _this = this;
				if (e) {
					this.recordInfo.planTime = e.value + ':00';
				}
			},
			dataChange: function() {},


			//点击暂存和确认提交 需要进行的操作。
			goAddRepair() {
				var url = '/apis/repairEvent/addRepairEvent'
				var _this = this;
				if (!(this.recordInfo && this.recordInfo.serialno)) {
					uni.showToast({
						title: '请选择设备',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				if (!(this.recordInfo && this.recordInfo.level)) {
					uni.showToast({
						title: '请选择任务等级',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				if (!(this.recordInfo && this.recordInfo.content)) {
					uni.showToast({
						title: '请输入故障描述',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				if (!(this.recordInfo && this.recordInfo.engineerId)) {
					uni.showToast({
						title: '请选择责任人',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				// if (!(this.recordInfo && this.recordInfo.type)) {
				// 	uni.showToast({
				// 		title: '请选择故障类型',
				// 		duration: 2000,
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				// if (!(this.recordInfo && this.recordInfo.usage)) {
				// 	uni.showToast({
				// 		title: '请选择使用状况',
				// 		duration: 2000,
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				//调取接口进行保存。
				this.$http.request({
					url: url,
					params:
						_this.recordInfo

				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateTo({
								url: "../index/index"
							});
						}, 500)
					}
				}).catch(err => {
					uni.showToast({
						title: '操作失败',
						duration: 2000,
						icon: "none"
					});
				});
			},
			toBack() {
				uni.navigateTo({
					url: "../index/index"
				});
			}
		},
		onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面，删除本地缓存的巡检操作
			uni.navigateTo({
				url: "../index/index"
			});
			return true;

		},
	}
</script>
<style scoped>
	>>>.select-tab .select-tab-item uni-text, >>>.select-tab-fixed-top .select-tab-item uni-text {
	    font-size: 16px !important;
	}
	.container {
		position: relative;
		padding-bottom: 80px;
		overflow: auto;
		background-color: #f3f3f3;
		box-sizing: border-box;
	}

	.info_container {
		position: relative;
		justify-content: center;
		flex-wrap: wrap;
		width: calc(100% - 40px);
		margin: auto;
		font-size: 15px;
	}

	.redMi:before {
		position: absolute;
		content: '*';
		color: #FF0000;
		left: 0px;
	}

	.redMi {
		padding-left: 15px;
	}

	.bottom_btn_container {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 70px;
		background-color: #dadada;
	}

	.bottom_btn_out {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom_btn {
		position: relative;
		margin: 0 10px;
		/* width: 30%; */
		width: 30%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 25px;
		color: #333;
		top: 5px;
		letter-spacing: 4px;
		border-radius: 4px;
	}

	.bottom_btn:nth-child(1) {
		background-color: #fff;
		border: 2px solid #007AFF;
		color: #007AFF;
		box-sizing: border-box;
		/* box-shadow: 3px 3px 10px rgba(160, 160, 159,0.2) inset,-3px -3px 10px rgba(160, 160, 159,0.2) inset; */
	}

	.bottom_btn:nth-child(2) {
		color: #fff;
		background-color: #007AFF;
		/* box-shadow: 3px 3px 10px rgba(16, 36, 177,0.2) inset,-3px -3px 10px rgba(16, 36, 177,0.2) inset; */
	}

	.InputRightMargin {
		padding-right: 25px;
	}

	.myarrowright {
		font-size: 16px !important;
		position: absolute;
		right: 10px;
		line-height: 50px !important;
		top: 0;
	}

	.picker_ {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	/*设备维修填写信息模块 公共样式  开始*/
	.item {
		position: relative;
		left: 25%;
		box-sizing: border-box;
		overflow: auto;
		width: 50%;
		min-height: 50px;
		background-color: #9bb9e2;
		border-bottom: 1px solid #EDEDED;
	}

	.item_line {
		margin-bottom: 10px;
		border-bottom: none;
	}

	.item_textarea {
		height: 143px;
	}

	.itemname {
		position: absolute;
		font-size: 15px;
		left: 15px;
		top: 0;
		height: 50px;
		line-height: 50px;
		color: #333333;
	}

	.itemtext {
		position: relative;
		float: right;
		right: 15px;
		width: 50%;
		min-height: 50px;
		line-height: 20px;
		color: #333;
		padding-top: 15px;
		padding-bottom: 15px;
		box-sizing: border-box;
		text-align: right;
	}

	.iteminput {
		width: 100%;
		text-align: right;
		font-size: 13px;
		box-sizing: border-box;
	}

	.InputRightMargin {
		padding-right: 25px;
	}

	.timeRightMargin {
		padding-right: 30px;
	}

	.dateIcon {
		position: absolute;
		right: 0px;
		top: 14px;
		width: 20px;
		height: 20px;
	}

	.textarea {
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: 15px;
		top: 46px;
		height: auto;
		width: auto;
		font-size: 13px;
	}

	.picke_item {
		right: 30px;
		position: absolute;
		line-height: 44px;
		top: 0;
		color: #333;
		font-size: 13px;
	}


	/*上传图片*/
	.photo_container {
		position: relative;
		margin-top: 10px;
		background-color: #fff;
		overflow: auto;
	}

	.pzqd {
		font-size: 16px;
		color: #333;
		padding-left: 15px;
		padding-top: 10px;
		box-sizing: border-box;
	}

	.photo_out {
		position: relative;
	}

	.imgwrap {
		position: relative;
		background-color: #fff;
		float: left;
		/* width: 27%; */
		width: 148px;
		margin: 3%;
	}

	.myimgBox {
		width: 100%;
		padding-bottom: 100%;
		overflow: hidden;
		margin: 0;
		position: relative;
	}

	.myimgBox .img {
		position: absolute;
		width: 100%;
		height: 100%;
		/* background-color: red; */
	}

	.upload_btn {
		border: 1px solid #dadada;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.upload_btn img {
		display: block;
		width: 32%;
		height: 30%;
		margin: 0 auto 5px auto;
	}

	.sctp {
		text-align: center;
		font-size: 15px;
		color: #ababab;
	}

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

	.cxsc {
		position: absolute;
		width: 100%;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.8);
		bottom: 0;
		left: 0;
		text-align: center;
		line-height: 30;
		font-size: 14px;
		color: #fff;
	}

	.deleteimg {
		position: absolute;
		width: 18px;
		height: 18px;
		right: -9px;
		top: -9px;
		background-color: #fff;
		border-radius: 18px;
	}




	/*设备维修填写信息模块 公共样式  结束*/
</style>
