<template>
	<view>
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				巡检任务
			</view>
			<view class="right">
				<dateTimePiccker :placeholder="'请选择'" :start="startTime" fields="day" :default-value="condition.date"
					@change="bindPickerChange($event,'startTime')" class="dateTimePiccker">
				</dateTimePiccker>
			</view>
		</headers>
		<view class="content" :style="{ 'padding-top': (statusBarHeight+52) + 'px' }">
			<view class="inspectedstay-item" v-for="item in listData" :key="item.id" @click="goDetail(item)">
				<view>
					巡检路线:{{item.xzCheckingRoute.routeName}}
				</view>
				<view class="item-box">
					<view>
						<text>巡检人:</text>
						<text>{{item.xzCheckingRoute.inspectUserNames}}</text>
					</view>
					<view>
						<text>计划执行日期:</text>
						<text>{{item.xzCheckingRoute.startTime}}</text>
					</view>
				</view>
				<view class="item-box">
					<view>
						<text>巡检任务名称:</text>
						<text>{{item.itemName}}</text>
					</view>
					<view>
						<text>巡检点情况:</text>
						<text>{{item.taskToInspectUser ? (item.taskToInspectUser.normalCheckingPointNum + item.taskToInspectUser.abnormalCheckingPointNum) : 0}}/{{item.taskToInspectUser ? item.taskToInspectUser.checkingPointNum : 0}}</text>
					</view>
				</view>
				<view class="item-box">
					<view>
						<text>正常点位:</text>
						<text>{{item.taskToInspectUser ? item.taskToInspectUser.normalCheckingPointNum : 0}}</text>
					</view>
					<view>
						<text>异常点位:</text>
						<text>{{item.taskToInspectUser ? item.taskToInspectUser.abnormalCheckingPointNum : 0}}</text>
					</view>
				</view>
				<view class="status" :style="`background-color: ${item.taskToInspectUser && statusList[item.taskToInspectUser.inspectStatus - 1].color};`">
					{{item.taskToInspectUser && statusList[item.taskToInspectUser.inspectStatus - 1].statusName}}
				</view>
			</view>
		</view>
		<view class="noData" v-if="listData.length==0">
			<image class="noDataImg" src="/static/noData2.png"></image>
		</view>
		<view class="footers_box">
			<ul>
				<li @click="footersChangTab(0)">
					<view class="icon_box">
						<image v-if="tabIndex == 0" class="tabIcon" src="/static/inspecteIcon2.png"></image>
						<image v-else class="tabIcon" src="/static/inspecteIcon1.png"></image>
					</view>
					<view class="icon_box" :class="{ active: tabIndex == 0 }">待巡检</view>
				</li>
				<li @click="footersChangTab(1)">
					<view class="icon_box">
						<image v-if="tabIndex == 1" class="tabIcon" src="/static/inspecteIcon4.png"></image>
						<image v-else class="tabIcon" src="/static/inspecteIcon3.png"></image>
					</view>
					<view class="icon_box" :class="{ active: tabIndex == 1 }">已巡检</view>
				</li>
			</ul>
		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import dateTimePiccker from '@/components/dateTimePicker/index.vue'
	export default {
		components: {
			dateTimePiccker
		},
		data() {
			return {
				tabIndex: 0,

				//------------
				type: 1,
				statusList:[{
					id:1,
					statusName:"未开始",
					color:"#EA3941",
				},{
					id:2,
					statusName:"进行中",
					color:"#5282F6",
				},{
					id:3,
					statusName:"已完成",
					color:"#0DB027",
				},{
					id:4,
					statusName:"已逾期",
					color:"#EA3941",
				}],
				listData: [],
				checkedTab: 0,
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					checkingPointUserId: "",
					date: this.getDate({
						format: true,
					}),
				},
				startTime: this.getDate({
					format: true,
				}),
				finishDate: ',',
				actualFinishDate: '',
				teach: true,
				numberTasks: 0,
				statusBarHeight:0,
			}
		},
		onLoad() {
			this.checkingPointUserId = JSON.parse(uni.getStorageSync('userInfo')).userId
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			console.log(this.checkingPointUserId,JSON.parse(uni.getStorageSync('userInfo')));
		},
		onShow() {
			this.onRefresh();
			this.getListData();
		},
		//上拉触底时间
		onReachBottom() {
			if (this.teach) {
				this.condition.pageNo = this.condition.pageNo + 1;
			}
		},
		methods: {
			//获取进度数据
			getListData() {

				let that = this;
				this.sendRequest({
					url: 'xmgl/xzCheckingRouteTask/page',
					method: 'get',
					data: {
						...that.condition,
						isInspect: that.tabIndex,
					},
					success: res => {
						let arr = JSON.parse(JSON.stringify(this.listData));
						if (res.result.records.length > 0) {
							let newArr = arr.concat(res.result.records);
							if (res.result.records.length < 10) {
								that.teach = false;
							} else {
								that.teach = true;
							}
							that.listData = newArr;
							that.numberTasks = newArr.length;
							console.log('进度数据', that.listData);
						} else {
							that.teach = false;
						}
					}
				})
			},
			//下拉选择回显
			bindPickerChange(e, type, eIndex) {
				console.log(e)
				//type ==1 问题等级;2紧急情况;3检查人;4 检查时间;5整改时限; 6整改人; 7复查人; 8核验人;
				if (type == 'startTime') {
					// this.form.changeLimitTime = e.f3;
					this.condition.date = e.f3;
					this.onRefresh();
					this.getListData();
				}
			},
			onRefresh(){
				this.listData = [];
				this.condition.pageNo = 1;
				this.condition.pageSize = 10;
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/projectEnd/InspectionRoute/inspecteddetail?info=${JSON.stringify(item)}`
				})
			},
			//底部tab切换
			footersChangTab(val) {
				this.onRefresh();

				this.tabIndex = val;
	
				this.getListData();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="less" scoped>
	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/.headerBox {
			background: #2b8df3;
			color: #fff;
		}

		/deep/ .right {
			font-size: 24rpx;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 3;
		}
	}

	.content {
		padding: 0 26rpx 15%;
		box-sizing: border-box;
		width: 100%;
		// margin-top: 3%;

		.inspectedstay-item {
			padding: 22rpx 28rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(198, 220, 255, 0.2) 100%);
			box-shadow: 0 8rpx 32rpx -8rpx rgba(42, 60, 106, 0.24);
			border-radius: 34rpx;
			position: relative;
			margin-top: 36rpx;

			>view {
				display: flex;
				// align-items: center;
				justify-content: space-between;
				line-height: 44rpx;
				font-size: 28rpx;
			}

			.item-box {
				margin-top: 8rpx;

				>view:first-child {
					flex: 1;
					margin-right: 24rpx;
				}
			}

			.status {
				position: absolute;
				top: 16rpx;
				right: 16rpx;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: white;
				padding: 0 20rpx;
			}
		}
	}



	.checkedTab {
		color: #4181FE;
		border-bottom: 2px solid #4181FE;

	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}

	.noDataImg {
		width: 214rpx;
		height: 222rpx;
	}




	.footers_box {
		background-color: white;
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 120rpx;
		z-index: 999;
		border-top: 1px solid rgba(151, 151, 151, 0.15);

		ul {
			display: flex;
			list-style: none;
			padding: 0;
			width: 100%;
			justify-content: space-between;
			align-items: center;


			li {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #9495ad;
				height: 100rpx;
				position: relative;
				list-style: none;

				.tabIcon {
					width: 50rpx;
					height: 50rpx;
					margin-top: 16rpx;
				}

				.icon_box {
					flex: 1;
				}

				.tabIcon_more {
					width: 50rpx;
					height: 50rpx;
					margin-top: 0;
				}

				.active {
					color: #107eee;
				}
			}
		}

	}
</style>