<template>
	<view class="contain">
		<view class="main" style="padding: 0;">
			<u-cell-group>
				<u-cell title="报修时间" :value="details.shijian">
				</u-cell>
				<u-cell title="报修位置" :value="details.weizhi">
				</u-cell>
				<u-cell title="报修区域" :value="details.quyu">
				</u-cell>
				<u-cell title="报修类型" :value="details.leixing">
				</u-cell>
				<u-cell title="联系人" :value="details.lxr">
				</u-cell>
				<u-cell title="联系电话" :value="details.lxdh">
				</u-cell>
				<u--form labelPosition="left" >
				<u-form-item labelWidth='180' style="padding:0 32rpx;" label="故障描述:">
				</u-form-item>
				<u-form-item labelWidth='180' borderBottom style="padding:0 32rpx;">
					<view style="width:100%;padding: 0 20rpx;height:80px">{{details.gzms}}</view>
				</u-form-item>
				<u-form-item labelWidth='180' label="故障照片" style="padding:0 32rpx;">
				</u-form-item>
				<u-form-item labelWidth='180' borderBottom style="padding:0 32rpx;">
					<view class="uploadPart">
						<view class="allimg" v-for="img in details.gzimg">
							<image :src="img" mode="aspectFill" class="newimg"></image>
						</view>
					</view>
				</u-form-item>
				</u--form>
			</u-cell-group>
			<view class="tijiao">
				<view class="" v-if="$has('app:AssignmaintenancePersonnel')">
					<u-button type="primary" text="指派维修人员" @click="Maintenancepersonnel"></u-button>
				</view>
			</view>
			<!--指派维修人员弹窗-->
			<u-popup :show="showweixiu" :round="10" @close="closewx" @open="openwx" mode="bottom">
				<view class="weixiudc">
					<view class="tit">工单指派</view>
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
						<u-form-item labelWidth="150" label="维修人员" prop="userInfo.repairPersonId" borderBottom
							@click="showSex = true;" ref="item1">
							<u--input v-model="model1.userInfo.repairPersonId" disabled disabledColor="#ffffff"
								placeholder="请选择维修人员" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

						<u-form-item labelWidth="150" label="紧急程度" prop="userInfo.urgency" borderBottom
							@click="showjinji = true;" ref="item1">
							<u--input v-model="model1.userInfo.urgency" disabled disabledColor="#ffffff"
								placeholder="请选择紧急程度" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u--form>


					<u-picker :show="showSex" keyName="realName" @cancel="showSex=false" :itemHeight="80"
						@confirm="confirmry" :columns="columnsrenyuan"></u-picker>

					<u-picker :show="showjinji" keyName="dictLabel" @cancel="showjinji=false" :itemHeight="80"
						@confirm="confirmjinji" :columns="columnsrenjinji"></u-picker>

					<view class="guidang">
						<view class="queding">
							<u-button type="primary" :plain="true" text="取消" @click="quxiao"></u-button>
						</view>
						<view class="queding">
							<u-button type="primary" text="确定" @click="queding"></u-button>
						</view>
					</view>
				</view>
			</u-popup>
			<u-notify ref="uNotify" message=""></u-notify>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				columnsrenyuan: [],
				columnsrenjinji: [],
				model1: {
					userInfo: {
						repairPersonId: '',
						urgency: '',
					},
				},

				rules: {
					'userInfo.repairPersonId': {
						type: 'string',
						required: true,
						message: '请选择维修人员',
						trigger: ['blur', 'change']
					},
					'userInfo.urgency': {
						type: 'string',
						required: true,
						message: '请选择紧急程度',
						trigger: ['blur', 'change']
					},
				},

				showjinji: false,
				showSex: false,
				showqd: false,
				showweixiu: false,
				companyOrgId: '',
				renyuanid: '',
				jjcd: '',

				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				details: {
					shijian: '',
					weizhi: '',
					quyu: '',
					leixing: '',
					lxr: '',
					lxdh: '',
					gzms: '',
					gzimg: [],
				},
				albumWidth: 0,
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			//this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.companyOrgId = options.id;
			//  console.log(options.id);
			let getDictDataList = uni.getStorageSync('getDictDataList');


			for (let i = 0; i < getDictDataList.length; i++) {
				if (getDictDataList[i].dictType == 'UrgencyType') {
					this.columnsrenjinji = [getDictDataList[i].dataList]
				}
			}

			this.getdata();
			this.getUserList();
		},
		methods: {
			getUserList() {
				this.$api.get('/user/list', {
						page: 1,
						limit: 100,
					})
					.then(res => {

						this.columnsrenyuan = [res.data.data]
					})
			},
			getdata() {
				this.$api.get('/repairorder/' + this.companyOrgId, {})
					.then(res => {

						this.details.shijian = res.data.data.createDate;
						this.details.weizhi = res.data.data.repairPosition;
						this.details.lxr = res.data.data.contactPerson;
						this.details.lxdh = res.data.data.contactPhone;
						this.details.gzms = res.data.data.faultDes;
						res.data.data.faultPics = res.data.data.faultPics.split(",");

						this.details.gzimg = res.data.data.faultPics;
						//  console.log('111111111111111111', this.details.gzimg)

						if (res.data.data.repairRegion == 1) {
							this.details.quyu = '公共区域';
						} else if (res.data.data.repairRegion == 2) {
							this.details.quyu = '室内';
						}

						if (res.data.data.repairType == 1) {
							this.details.leixing = '水';
						} else if (res.data.data.repairType == 2) {
							this.details.leixing = '电';
						} else if (res.data.data.repairType == 3) {
							this.details.leixing = '其他';
						}



					})
			},
			quxiao() {
				this.showweixiu = false;
			},
			queding() {
				this.$refs.uForm.validate().then(res => {
					//	uni.$u.toast('校验通过')
					//  jjcd  renyuanid  companyOrgId
					//console.log('111111111111111111',this.jjcd,this.renyuanid,this.companyOrgId)
					this.$api.put('/repairorder', {
							id: this.companyOrgId,
							repairPersonId: this.renyuanid,
							urgency: this.jjcd,
						})
						.then(res => {
							//console.log('111111111111111111',res)
							if (res.data.code == 0) {
								this.$refs.uNotify.success('指派成功')

								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/index/Workordertodone/Workordertodone'
									})
								}, 1000);

							} else {
								this.$refs.uNotify.error(res.data.msg)
								// uni.navigateBack({
								// 	delta: 1
								// });
							}
						})

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},

			weixiuyes() {
				this.$api.post('/repairorder/finish/' + this.companyOrgId, {})
					.then(res => {
						//console.log('111111111111111111',res)
						if (res.data.code == 0) {
							this.$refs.uNotify.success('维修成功')
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/index/Workordertodone/Workordertodone'
								})
							}, 1000);
						} else {
							this.$refs.uNotify.error(res.data.msg)
						}
					})
				this.showqd = false;
			},
			weixiuno() {
				this.showqd = false;
			},
			Maintenancepersonnel() {
				this.showweixiu = true;
			},
			openwx() {
				// console.log('open');
			},
			closewx() {
				this.showweixiu = false
				// console.log('close');
			},

			confirmry(e) {
				console.log('confirm', e.value[0])
				this.model1.userInfo.repairPersonId = e.value[0].realName;
				this.renyuanid = e.value[0].id;
				this.showSex = false
			},
			confirmjinji(e) {
				console.log('confirm', e.value[0])
				this.model1.userInfo.urgency = e.value[0].dictLabel;
				this.jjcd = e.value[0].dictValue;
				this.showjinji = false
			},


		}
	}
</script>

<style lang="scss">
	.baoxiu {
		padding: 18rpx 32rpx;
		font-size: 36rpx;
	
		span {
			display: inline-block;
			margin-right: 16rpx;
			width: 8rpx;
			height: 32rpx;
			background-color: #5776E6;
			border-radius: 5rpx;
		}
	}
	
	.uploadPart {
		display: flex;
		justify-content: center;
		width: 100%;
	
		.uploadBtn {
			width: 160rpx;
			height: 160rpx;
			background-color: #ECF0FF;
			text-align: center;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.allimg {
			position: relative;
		}
	
		.newimg {
			width: 160rpx;
			height: 160rpx;
			margin-right: 10rpx;
			border: 1px solid #eee;
		}
	}
	.guidang {
		display: flex;
		    align-items: center;
		    justify-content: space-around;
		    border-top: 24rpx solid #f8f8f8;
		    padding: 16rpx 0;
		.queding {
			width: 300rpx;
			height: 88rpx;
		
		}
	}
	.weixiudc {
		width: 750rpx;
		height: 450rpx;

		.tit {
			    font-size: 18px;
			    text-align: center;
			    padding: 12px 0;
			    border-bottom: 1px solid #eee;
		}
		.u-form{
			padding: 0 32rpx;
		}
	}
</style>