<style lang='scss' scoped>
.maintenanceRecord{
	width: 100%;
	&-search{
		padding: $paddingTB $paddingLR;
		background-color: #fff;
	}
	&-record-list{
		padding: $paddingTB $paddingLR;
	}
	&-record-box{
		width: 100%;
		padding: 20rpx;
		box-shadow: $box-shadow;
		border-radius: 8rpx;
		&-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			&-name{
				color: #1C9AFF;
				display: flex;
				align-items: center;
			}
		}
		.header-name-icon{
			width: 50rpx;
			height: 50rpx;
			background-color: #1C9AFF;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.header-name-text{
			color: #1C9AFF;
			font-size: 36rpx;
		}
	}
	.image-style {
		margin-top: 16upx;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
}
</style>
<template>
	<view class="maintenanceRecord">
		<headerSelect @onDateChangeFn="onDateChangeFn" :defaultDate="dateVal"></headerSelect>
		<view class="maintenanceRecord-search">
			<u-search placeholder="输入设备号搜索" v-model="deviceKey" @search="search"></u-search>
		</view>
		<mescroll-body top="0" height="600rpx" ref="mescrollRef" bottom="80" @init="mescrollInit" @down="downCallback" @up="upCallback" >
			<view class="maintenanceRecord-record-list">
				<view class="maintenanceRecord-record-box mb30" v-for="(item, index) in maintenanceList" :key="item.maintenanceId">
					<view class="maintenanceRecord-record-box-header">
						<view class="maintenanceRecord-record-box-header-name">
							<view class="header-name-icon">
								<tuiIcon name="wode1" color="#fff"></tuiIcon>
							</view>
							<text class="header-name-text pl20">{{ item.handlerName || '' }}</text>
						</view>
						<view class="">{{ item.phoneNumber || '' }}</view>
					</view>
					<view class="pt20">
						<view class="pb10">
							<text class="text--base--grey">项目：</text>
							<text>{{ item.projectName || ''  }}</text>
						</view>
						<view class="pb10">
							<text class="text--base--grey">设备号：</text>
							<text>{{ item.deviceKey || ''  }}</text>
						</view>
						<view class="pb10">
							<text class="text--base--grey">设备名称：</text>
							<text>{{ item.deviceName || ''  }}</text>
						</view>
						<!-- <view class="pb10">
							<text class="text--base--grey">地点：</text>
							<text>福州市闽侯县高新区海西园二期18号</text>
						</view> -->
						<view class="pb10">
							<text class="text--base--grey">时间：</text>
							<text>{{ item.handleTime || ''  }}</text>
						</view>
						<view :class="(item.scenePictures && item.scenePictures !== '') ? 'pb10' : ''">
							<text class="text--base--grey">内容：</text>
							<text>{{ item.maintenanceContext || ''  }}</text>
						</view>
						<view v-if="item.scenePictures && item.scenePictures !== ''">
							<text class="text--base--grey">现场图片：</text>
							<view class="image-style">
								<u-image
									v-for="(img, key) in item.scenePictures.split(',')"
									:key="key"
									:src="img"
									width="300rpx"
									height="300rpx"
								></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	import headerSelect from "@/components/electricalSafe/headerSelect.vue";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				dateVal:"",
				deviceKey:'',
				maintenanceList: [],
				where: {},
			}
		},
		mixins:[MescrollMixin],
		components:{headerSelect},
		onLoad() {
			this.dateVal = this.$u.timeFormat(new Date().getTime(),'yyyy-mm');
		},
		methods: {
			onDateChangeFn(val){
				this.dateVal = val;
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				const _this = this;
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.where['pageNum'] = pageNum;
				this.where['pageSize'] = pageSize;
				this.where['handleDate'] = this.dateVal;
				this.where['deviceKey'] = this.deviceKey;
				this.where['maintenanceStatus'] = '5';
				
				this.$get('/app/maintenance/table', this.where).then(res => {
					if(res.code === 200){
						if(res.rows && res.rows.length > 0){
							let curPageData = res.rows;
							let curPageLen = curPageData.length;
							let totalSize = res.total;
							
							_this.$nextTick(()=>{
							 	// 隐藏下拉刷新和上拉加载的状态;
								_this.mescroll.endBySize(curPageLen, totalSize);
							})
							if(pageNum == 1) this.maintenanceList = []; //如果是第一页需手动置空列表
							_this.maintenanceList = this.maintenanceList.concat(curPageData); //追加新数据
							_this.mescroll.endBySize(curPageLen, totalSize); // 推荐
						} else {
							_this.maintenanceList = [];
							_this.mescroll.endErr();
							_this.mescroll.showEmpty();
						}
					}
				})
			},
			search() {
				this.mescroll.resetUpScroll();
			},
		}
	}
</script>
