<style lang="scss" scoped>
.maintenanceRecord{
	width: 100%;
	:not(not) {
		box-sizing: border-box;
	}
	.maintenanceRecord-header{
		display: flex;
		background: #fff;
		border-bottom: 1px solid #dcdcdc;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 88rpx;
		&-picker{
			display: flex;
			justify-content: center;
			align-items: center;
			border-left: 1px solid #dcdcdc;
		}
		/deep/ .u-dropdown__content{
			overflow: visible;
		}
	}
	.maintenanceRecord-record-list{
		padding: $paddingTB $paddingLR;
	}
	.maintenanceRecord-record-box{
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
		box-shadow: $box-shadow;
		padding: 30rpx;
		.header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-name{
				display: flex;
				align-items: center;
			}
			&-name-icon{
				padding: 10rpx;
				background-color: $main-color;
				border-radius: $uni-border-radius-circle;
			}
			&-name-text{
				font-size: 40rpx;
				color: $main-color;
				padding-left: 30rpx;
			}
		}
	}
	.bottom-btn{
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: $paddingTB $paddingLR;
		width: 100%;
		height: 132rpx;
		box-sizing: border-box;
	}
	.dropdown-bl {
		border-left: 1px solid #dcdcdc;
	}
	.orange-color {
		color: orange;
	}
	.blue-color {
		color: #0099ff;
	}
}
</style>
<template>
	<view class="maintenanceRecord">
		<mescroll-body top="88" ref="mescrollRef" bottom="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="maintenanceRecord-header">
				<u-dropdown class="flex1">
					<u-dropdown-item v-model="value1" :title="value1==1?'日':'月'" :options="options1"></u-dropdown-item>
				</u-dropdown>
				<picker class="maintenanceRecord-header-picker flex1" mode="date" :value="dateVal" :fields="value1==1?'day':'month'"  @change="bindDateChange">
				    <!-- <view class="maintenanceRecord-header-picker-text"> -->
						<text class="pr10">{{dateVal}}</text>
						<u-icon name="arrow-down" color="#c0c4cc"></u-icon>
					<!-- </view> -->
				</picker>
				<u-dropdown class="flex1 dropdown-bl">
					<u-dropdown-item v-model="status" :title="statusName" :options="statusList" @change="changeStatus"></u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="maintenanceRecord-record-list">
				<view class="maintenanceRecord-record-box mt20" v-for="(item,index) in maintenanceList" :key="index" @click="goDetailFn(item)">
					<view class="header pb20">
						<view class="header-name">
							<tuiIcon class="header-name-icon" color="#fff" name="wode1" size="42"></tuiIcon>
							<text class="header-name-text">{{item.handlerName || '' }}</text>
						</view>
						<view class="header-phonenumber">{{item.phoneNumber || '' }}</view>
					</view>
					<view class="pb10">
						<text class="text--base--grey">维保日期：</text>
						<text>{{item.createTime || ''}}</text>
					</view>
					<view class="pb10">
						<text class="text--base--grey">维保内容：</text>
						<text>{{item.maintenanceContext || ''}}</text>
					</view>
					<view class="pb10">
						<text class="text--base--grey">维保状态：</text>
						<text
							:class="{
								'blue-color': item.maintenanceStatus=='0',
								'orange-color': (item.maintenanceStatus!='5' && item.maintenanceStatus!='0')
							}"
						>{{item.maintenanceStatus | hanlderStatus}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="bottom-btn">
				<u-button type="primary" @click="goAddRecordFn">添加维保信息</u-button>
			</view> -->
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				dateVal:"",
				value1: 2,
				options1: [{
						label: '日',
						value: 1,
					},
					{
						label: '月',
						value: 2,
					}
				],
				maintenanceList:[],
				deviceInfo: {},
				status: '',
				statusName: '维保状态',
				statusList: [
					{
						value: '',
						label: '全部',
					},
					{
						value: '-1',
						label: '已生成',
					},
					{
						value: '0',
						label: '已创建',
					},
					{
						value: '1,2,3,4',
						label: '处理中',
					},
					{
						value: '5',
						label: '处理完成',
					},
				]
			};
		},
		mixins:[MescrollMixin],
		onLoad(param) {
			console.log(param)
			this.deviceInfo = param
			this.dateVal = this.$u.timeFormat(new Date().getTime(), this.value1==1?'yyyy-mm-dd':'yyyy-mm')
		},
		onShow() {
			this.mescroll.resetUpScroll()
		},
		methods:{
			goDetailFn(item){
				let id = encodeURIComponent(item.maintenanceId);
				uni.navigateTo({
					url:`./maintenanceDetail?id=${id}`
				})
			},
			/*上拉加载的回调*/
			upCallback(page) {
				console.log(page,"page");
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let obj = {
					pageSize: pageSize,
					pageNum: pageNum,
					createDate: this.dateVal,
					maintenanceStatus: this.status,
					// projectId:this.projectIdVal,
					// deviceState:this.screeningValue,
					// deviceName:this.searchValue
				}
				let userType = uni.getStorageSync("userType");
				let url = userType === "企业用户" ? "/app/maintenance/table" : "/iot/maintenance/list"; ;
				this.$get(url, obj).then((res)=>{
					console.log(res,"ressssssssssss");
					if (res.rows && res.rows.length>0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows; 
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length; 
						//设置列表数据
						if(pageNum == 1) this.maintenanceList = []; //如果是第一页需手动置空列表
						this.maintenanceList = this.maintenanceList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.maintenanceList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.mescroll.showEmpty();
				})
			},
			goAddRecordFn(){
				let str = JSON.stringify(this.deviceInfo)
				uni.navigateTo({
					url: `./addRecord?deviceInfo=${str}`
				})
			},
			bindDateChange(e){
				console.log(e,"e");
				this.dateVal = e.detail.value;
				this.mescroll.resetUpScroll()
			},
			changeStatus(val) {
				let res = this.statusList.find(item => item.value === val);
				if (res) {
					this.statusName = res.label;
				} else {
					this.statusName = '全部';
				}
				this.mescroll.resetUpScroll()
			},
			
		},
		filters: {
			hanlderStatus(val) {
				
				if(val == '-1'){
					return '已生成';
				}else if(val == '0'){
					return '已创建';
				} 
				// else if (val == '1') {
				// 	return '驳回上报人工单';
				// } else if (val == '2') {
				// 	return '处理人确认工单';
				// } else if (val == '3') {
				// 	return '处理人完成工单';
				// } else if (val == '4') {
				// 	return '驳回处理人工单';
				// } 
				else if (val == '5') {
					return '流程结束';
				} else {
					return '处理中';
				}
			}
		}
	}
</script>
