<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.spaceNo}}</view>
				<text class="report" @click="handlepopupShow">异常上报</text>
			</view>
			<view class="base-info-item">
				<view class=""><b>设备编号：</b>{{pageData.deviceNo}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>电量值：</b>{{pageData.deviceBattery}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>信号值：</b>{{pageData.deviceSignal}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>车牌号：</b>{{pageData.vehicleNo}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>入场时间：</b>{{pageData.inTime}}</view>
			</view>
			<view class="base-info-item">
				<view class=""><b>停车时长：</b>{{pageData.parkingTime}}</view>
			</view>
		</view>
		<view class="device-log">
			<u-divider
			ref="divider"
			bg-color="#F1F8FF" 
			color="#010101" 
			border-color="#6d6d6d">设备心跳</u-divider>
			<mescroll-uni ref="mescrollRef01" @init="mescrollInit" :top="config.platform=='h5'?677:677" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
				<view class="device-list u-text-center ">
					<view v-if="dataList.length>=1" class="list-header u-flex u-row-around">
						<view class="u-flex-2">时间</view>
						<view class="u-flex-1">事件类型</view>
						<view class="u-flex-1">是否有车</view>
					</view>
					<view class="device-list-item u-flex u-row-around" v-for="item in dataList" :key="item.id">
						<view class="u-flex-2">{{item.createTime}}</view>
						<view class="u-flex-1">{{item.msgType|deviceLogMsgType}}</view>
						<view class="u-flex-1">{{filterPlaceStatus(item.msgType)}}</view>
					</view>
				</view>
			</mescroll-uni>
		</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-item label="处理状态" :label-width="labelWidth" prop="status" :required="true">
					<u-input @click="oneSelectOpen('status')" placeholder="请选择" v-model="form.status"
						disabled />
					<u-icon @click="oneSelectOpen('status')" color="#42494F" name="arrow-right"></u-icon>
				</u-form-item>
			</u-form>
			<u-button type="primary" @click="submit" style="margin-top: 20vh;">提交</u-button>
			</view>
		</u-popup>
		<!-- 单列下拉选择 -->
		<u-select v-model="selectShow" :list="selectData" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default{
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data(){
			return{
				roadName:'',
				roadNo:'',
				deviceType:'',
				title:'设备详情',
				pageData:[],
				id:'',
				deviceId:'',
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					page: {
						size: 10 // 每页数据的数量
					},
					auto:true,
					// use:false,
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						// btnText: '去看看'
					}
				},
				dataList:[],
				dividerBottom:0,
				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:[],
				selectTag: '',
				selectShow: false,
				selectData: [],
				listMap: {
					status: [{
						value: '0',
						label: '未处理'
					}, {
						value: '1',
						label: '部分处理'
					}, {
						value: '2',
						label: '已处理'
					}],
				}
			}
		},
		onLoad(page){
			this.id = page.id;
			this.deviceId = 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.findRoadSpaceVoById();
		},
		mounted() {
			let divider = this.$refs.divider.$el.getBoundingClientRect();
			this.dividerBottom = divider.bottom*2;
		},
		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/deviceListType1/deviceListType1',
				  type:'redirect',
					params:{
						roadNo:this.roadNo,
						roadName:this.roadName,
						deviceType:this.deviceType,
					}
				})
			},
			// 单列下拉选择框打开事件
			oneSelectOpen(key) {
				this.selectTag = key;
				this.selectData = this.listMap[key];
				this.selectShow = true
				
			},
			selectConfirm(e) {
				// console.log('selectConfirm',e);
				// console.log('selectTag', this.selectTag);
				switch (this.selectTag) {
				 case 'status': //处理状态
						console.log('处理状态',e);
						this.form.status = e[0].label;
						break;
					case 'payWay': //结账方式
						this.payWayLabel = e[0].label;
						this.form.payWay = e[0].value;
						this.$u.vuex('orderMap.payWay', e[0].value)
						break;
					case 'isInvoice': //是否开票
						this.isInvoiceLabel = e[0].label;
						this.form.isInvoice = e[0].value;
						this.$u.vuex('orderMap.isInvoice', e[0].value)
						break;
					default:
						// console.log('3', e);
				}
			},
			findRoadSpaceVoById(){
				this.$u.api.findRoadSpaceVoById({id:this.id}).then(res=>{
					if(res.code==200){
						this.pageData = res.data;
						this.form.deviceId = res.data.deviceId;
						// console.log('findRoadSpaceVoById',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// console.log('page',page);
				let params ={
					deviceId:this.deviceId,
					pageNum:page.num,
					pageSize:page.size
				};
				this.$u.api.deviceLog(params).then(curPageData=>{
					// console.log('word',word);
					 console.log('curPageData',curPageData);
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					// this.mescroll.endSuccess(curPageData.data.total);
					this.mescroll.endBySize(curPageData.data.rows.length, curPageData.data.total);
					//设置列表数据
					if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList=this.dataList.concat(curPageData.data.rows); //追加新数据
					console.log('this.dataList',this.dataList);
				}).catch(()=>{
					console.log('catch');
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			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();
				})
			}
		}
	}
</script>
<style>
	page{background: #F1F8FF;}
</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>
