<template>
	<view>
		<u-navbar
		 :title="title" 
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
		<view class="base-info">
			<view class="base-info-item u-flex u-row-between">
				<view class=""><b>所属停车场：</b>{{pageData.roadName}}</view>
				<text class="report" @click="handlepopupShow">异常上报</text>
			</view>
			<view class="base-info-item">
				<view class=""><b>所属出入口：</b>{{pageData.entranceName}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>所属车道：</b>{{pageData.roadwayName}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>车道编码：</b>{{pageData.roadwayNo}}</view>
			</view>
		</view>
		<view class="u-flex u-row-center">
			<u-button type="primary" shape="circle" :custom-style="buttonStyle" @click="controlDevice(0)">关闸</u-button>
			<u-button type="warning" shape="circle" :custom-style="buttonStyle" @click="controlDevice(1)">开闸</u-button>
		</view>
		<u-popup v-model="popupShow" mode="bottom">
			<view class="form-content">
			<u-form :model="form" ref="uForm" >
				<u-form-item label="问题描述" prop="exceprionDes" required :label-width="labelWidth">
					<u-input type="textarea" :border="true" maxlength="200" v-model="form.exceprionDes" />
				</u-form-item>
				<u-form-item label="图片说明" :label-width="labelWidth" :border-bottom="false">
					<u-upload ref="uploadRef" :action="action" max-count="3"></u-upload>
				</u-form-item>
			</u-form>
			<u-button type="primary" @click="submit" style="margin-top: 20vh;">提交</u-button>
			</view>
		</u-popup>
		<u-modal v-model="modalShow" :content="modalContent" @confirm="modalConfirm" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				roadName:'',
				roadNo:'',
				deviceType:'',
				title:'设备详情',
				pageData:[],
				id:'',
				popupShow:false,
				labelWidth:190,
				action:this.config.upFileUrl,
				form:{
					deviceId:'',
					deviceType:'',
					exceprionDes:'',
					imgList:[]
				},
				rules:{
					roadName: [
						{ 
							required: true, 
							message: '请选择路段', 
							trigger: ['change','blur'],
						}
					],
					exceprionDes: [
						{ 
							required: true, 
							message: '请输入内容', 
							trigger: ['change','blur'],
						}
					],
				},
				placeStatus:[],
				buttonStyle:{
					padding:'0 50px'
				},
				modalShow:false,
				modalContent:'',
				command:'',
			}
		},
		onLoad(page){
			this.id = page.id;
			if(page.roadName){
				this.roadName = page.roadName;
				this.title = page.roadName;
			}
			if(page.roadNo){
				this.roadNo = page.roadNo
			}
			if(page.deviceType){
				this.deviceType = page.deviceType;
				this.form.deviceType = page.deviceType;
			}
			this.getPlaceStatus();
		},
		onShow(){
			this.findParkDeviceById();
		},
		mounted() {
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		computed:{
			filterPlaceStatus(){
				return function(value){
					let v = '';
					for (let i = 0; i < this.placeStatus.length; i++){
						console.log('value',value);
						console.log('item',this.placeStatus[i]);
						let item = this.placeStatus[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			}
		},
		methods:{
			customBack(){
				this.$u.route({
				  url: '/pages/deviceList/deviceListType3/deviceListType3',
				  type:'redirect',
					params:{
						roadNo:this.roadNo,
						roadName:this.roadName,
						deviceType:this.deviceType,
					}
				})
			},
			findParkDeviceById(){
				this.$u.api.findParkDeviceById({id:this.id}).then(res=>{
					if(res.code==200){
						this.pageData = res.data;
						this.form.deviceId = res.data.deviceId;
						// console.log('findParkDeviceById',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			handlepopupShow(){
				this.$u.route({
				  url: 'pages/report/report',
					params:{
						id:this.id,
						deviceId:this.pageData.deviceId,
						roadNo:this.pageData.roadNo,
						roadName:this.pageData.roadName,
						deviceType:this.pageData.deviceType,
					}
				})
				// 页面内上报
				// this.popupShow = true;
				// this.$nextTick(() => {
				// 	this.$refs.uForm.setRules(this.rules)
				// })
			},
			submit(){
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						// delete this.dealForm.selectedUserList;
						let files = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files = this.$refs.uploadRef.lists.filter(val => {
							return val.progress == 100;
						})
						console.log('files',files);
						// 如果您不需要进行太多的处理，直接如下即可
						// files = this.$refs.uUpload.lists;
						files.forEach(function(item){
							if(item.response.data){that.form.imgList.push(item.response.data.url)}
						});
						console.log('this.form',this.form);
						this.$u.api.deviceexcptionprocess(this.form).then(res=>{
							console.log('res',res);
							this.form = {};
							uni.showToast({
								icon:'none',
								title:res.msg,
								duration:1500,
							});
							this.popupShow = false;
						}).catch(err=>{
							uni.showToast({
								icon:'none',
								title:err.msg
							})
							console.log('err',err);
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			getPlaceStatus(){
				this.$u.api.placeStatus().then(res=>{
					let that = this;
					console.log('getPlaceStatus',res.data.data);
					res.data.data.map(function(currentValue){
					    that.placeStatus.push({value:currentValue.dictValue,label:currentValue.dictLabel})
					    // console.log('currentValue',currentValue);
					})
					
				}).catch(()=>{
					console.log('catch');
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			modalConfirm(){
				this.$u.api.controlDevice({roadwayNo:this.pageData.roadwayNo,command:this.command}).then(res=>{
					uni.showToast({
						icon:'none',
						title:res.msg
					})
				}).catch(()=>{
					console.log('catch');
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			controlDevice(command){
				if(command==0){
					this.modalContent = '是否对此车道进行关闸操作？'
				}else if(command==1){
					this.modalContent = '是否对此车道进行开闸操作？'
				}
				this.command = command;
				this.modalShow = true;
			}
		}
	}
</script>
<style>
	page{background: #fff;}
</style>
<style lang="scss" scoped>
// @import  './login.scss'
.base-info{
	background-color: #fff;
	padding: 30rpx 30rpx 40rpx;
	.base-info-item{
		font-size: 28rpx;
		font-weight: 400;
		color: #6E6E6E;
		line-height: 40rpx;
		letter-spacing: 1rpx;
		margin-bottom: 26rpx;
	}
	.report{
		font-size: 28rpx;
		font-weight: 400;
		color: #0082FF;
		line-height: 40rpx;
		letter-spacing: 1rpx;
	}
}
.device-log{
	background-color: #F1F8FF;
	padding-top: 50rpx;
	.list-header{
		margin-bottom: 24rpx;
	}
	.device-list-item{
		font-size: 24rpx;
		font-weight: 400;
		color: #7D7D7D;
		line-height: 33rpx;
		letter-spacing: 1rpx;
		margin-bottom: 20rpx;
	}
}
.form-content{
	padding: 24rpx;
}
</style>
