<template>
	<view class="listPage">
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					任务详情
				</view>
			</headers>
			<view class="searchBox">
				<text class="title">{{ curCRoute.xzCheckingRoute && curCRoute.xzCheckingRoute.routeName }}</text>
				<view class="searchItem" @click="openPopup">
					<text class="text">巡检任务</text>
					<u-icon name="list" style="margin-left: 48rpx;" size="48" color="#ffffff"></u-icon>
				</view>
			</view>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 100 + 'px'}">
			<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index"
				@click="goDetails(item)">
				<view class="item_left">
					<view class="card_title">
						<!-- <text class="title">{{item.routeName}}</text> -->
						<text class="value">巡检点名称{{item.routeName}}</text>
					</view>
					<view class="card_title">
						<text class="label">所属区域：{{item.regionName}}</text>
						<!-- <text class="value">{{item.regionName}}</text> -->
					</view>
					<view class="card_title">
						<text class="label">责任单位：{{item.enterpriseName}}</text>
						<!-- <text class="value">{{item.enterpriseName}}</text> -->
					</view>
					<view class="card_title">
						<image class="img" src="@/static/icon/xun_ic.png" alt="" />
						<text class="label">巡检人：{{item.checkingPointUserName || '-'}}</text>
						<!-- <text class="value">{{item.checkingPointUserName}}</text> -->
					</view>
				</view>
				<view class="item_right">
					<view class="text_wrap">
						<view class="d_text">任务已下发</view>
					</view>
					<uni-tag :inverted="true" :text="statusStr[item.status]" :type="statusStyle[item.status]" />
				</view>
			</view>
			<view class="noData" v-if="listData.length==0">
				<image class="noDataImg" src="../../../static/noData.png"></image>
				<view>暂无数据</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-popup ref="crPopup" mode="right" background-color="#fff">
			<view class="popup-content">
				<text class="title">巡检任务</text>
				<radio-group @change="handleChangeRadio" class="popup-radio-group">
					<radio v-for="item in centerModuleList" :key="item.id" :value="item.id" :checked="item.id === curCRouteId">{{ item.itemName }}</radio>
				</radio-group>
			</view>
			<view class="popup-btn">
				<button @click="cancelPopup">取消</button>
				<button @click="successPopup" type="primary">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uPopup from '@/components/u-popup/u-popup.vue'
	export default {
		components: {
			uPopup
		},
		data() {
			return {
				mobileTopHeight: 0,
				listNum: 0,
				curCRoute: {},
				curCRouteId: "",
				centerModuleList: [],
				listData: [],
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					search: '', //搜索字段
				},
				teach: true,
				detailId: '',
				statusStr: ['', '正常', '异常', '未巡检'],
				statusStyle: ['', 'success', 'error', 'primary']
			}
		},
		onLoad(option) {
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.detailId = option.id;
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo',res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight',this.mobileTopHeight)
		},
		onShow() {
			this.listData = [];
			this.condition.pageNo = 1;
			this.condition.pageSize = 10;
			this.getRouteTask()
		},
		//上拉触底时间
		onReachBottom() {
			if (this.teach) {
				this.condition.pageNo = this.condition.pageNo + 1;
				// this.condition.pageNo = this.condition.pageNo;
				// this.getListData();
			}
		},
		methods: {
			getRouteTask() {
				let data = {
					pageNo: 10,
					pageSize: -1,
					projectSn: this.condition.projectSn,
					xzCheckingRouteId: this.detailId
				};
				this.sendRequest({
					url: 'xmgl/xzCheckingRouteTask/list',
					method: 'get',
					data,
					success: res => {
						console.info(res,'res')
						if (res.code == 200) {
							this.centerModuleList = res.result;
							this.curCRoute = this.centerModuleList[0] || {};
							this.curCRouteId = this.curCRoute.id || '';
							if (this.centerModuleList.length) {
								this.getListData()
							}
						}
					}
				})
			},
			getListData(isSearch = false) {
				let that = this;
				let data = {
					pageNo: this.condition.pageNo,
					pageSize: this.condition.pageSize,
					id: this.detailId,
					xzCheckingRouteTaskId: this.curCRoute?.id
				};
				this.sendRequest({
					url: 'xmgl/checkingPoint/getTaskDetailPage',
					method: 'post',
					data,
					success: res => {
						console.info(res,'res')
						if (res.code == 200) {
							that.listNum = res.result.total
							if(isSearch) {
								that.listData = res.result.records;
								that.teach = res.result.records.length > 0 && !(res.result.records.length < that.condition.pageSize);
							} else {
								let arr = JSON.parse(JSON.stringify(that.listData));
								if (res.result.records.length > 0) {
									let newArr = arr.concat(res.result.records);
									if (res.result.records.length < that.condition.pageSize) {
										that.teach = false;
									} else {
										that.teach = true;
									}
									that.listData = newArr;
								} else {
									that.teach = false;
								}
							}
						}
					}
				})
			},
			handleChangeRadio(e) {
				this.curCRouteId = e.detail.value;
			},
			openPopup() {
				this.curCRouteId = this.curCRoute.id;
				this.$refs.crPopup.open()
			},
			cancelPopup() {
				this.$refs.crPopup.close()
			},
			successPopup() {
				this.$refs.crPopup.close()
				this.curCRoute = this.centerModuleList.find(item => item.id === this.curCRouteId);
				this.getListData(true);
			},
			goDetails(data) {
				uni.navigateTo({
					url: `/pages/projectEnd/InspectionRoute/planTaskRecord?detail=${JSON.stringify(data)}`
				})
			},
		}
	}
</script>

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

		.headerName {
			z-index: 1;
		}
		/deep/ .headerBox {
			background-color: #5181F6;
			color: white;
			.uni-icons{
				color: white !important;
			}
		}
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: #ccc;
		margin-top: 3%;
	}

	.searchBox {
		height: 88rpx;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx;
		.title {
			color: rgba(16, 16, 16, 0.99);
			font-size: 28rpx;
			font-weight: 600;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.searchItem {
			height: 70rpx;
			display: flex;
			align-items: center;
			background: #5181F6;
			padding: 16rpx 48rpx;
			border-radius: 0px 2px 2px 0px;
			position: relative;
			margin-left: 60rpx;
			.text {
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				font-weight: 600;
			}
			&::before {
				content: '';
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				left: -60rpx;
				background: #fff;
				border-radius: 140rpx;
			}
		}
	}

	.screen {
		line-height: 50px;
		color: gray;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.content {
		padding: 0px 30rpx 0;
		box-sizing: border-box;
		width: 100%;
	}

	.item {
		min-height: 240rpx;
		width: 100%;
		padding: 24rpx 16rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
		border-radius: 4px;
		margin-bottom: 15px;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		display: flex;
	}
	.safety_ic {
		width: 23px;
		height: 23px;
		margin-right: 5px;
	}
	.item_left {
		flex: 1;
		.card_title {
			display: flex;
			align-items: flex-start;
			margin-bottom: 8rpx;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			&:first-child {
				margin-bottom: 16rpx;
			}
			.title {
				min-height: 40rpx;
				color: rgba(81, 129, 246, 1);
				font-size: 28rpx;
				text-align: left;
				font-weight: 600;
			}
			.value {
				min-height: 40rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 26rpx;
				text-align: left;
				white-space: nowrap;
				font-family: SourceHanSansSC-regular;
			}
			.label {
				min-height: 40rpx;
				color: rgba(16, 16, 16, 0.43);
				font-size: 26rpx;
				text-align: left;
				font-family: SourceHanSansSC-regular;
				// white-space: nowrap;
				&.wrap {
					white-space: pre-wrap;
				}
			}
			.img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
	.item_right {
		flex-shrink: 0;
		width: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: end;
		.text_wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12rpx;
			height: 60rpx;
			border-radius: 8rpx;
			padding: 0 24rpx;
			background-color: rgba(243, 248, 254, 1);
			text-align: center;
			.d_text {
				color: rgba(98, 165, 241, 1);
				font-size: 24rpx;
				line-height: 20rpx;
			}
		}
		.btn_wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12rpx;
		}
	}

	.rightStatus {
		float: right;
		font-size: 12px;
		margin-top: -18px;
		width: 60px;
		height: 20px;
		text-align: center;
		border-radius: 10px;
		color: #fff;
		line-height: 18px;
	}

	.item_title {
		font-weight: 600;
		margin-bottom: 2px;
	}

	.item_content {
		width: 100%;
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		font-family: PingFangSC-Regular;
		line-height: 28px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #999;

	}

	.item_info {
		font-size: 26rpx;
		line-height: 24px;
		font-family: PingFangSC-Regular;
		color: #999;
	}

	.state {
		padding: 0px 8px;
		color: #fff;
		box-sizing: border-box;
		border-radius: 30px;
		font-size: 24rpx;
	}

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

	.noDataImg {
		width: 125px;
		height: 98px;
	}

	::v-deep .tki-tree-cnt {
		z-index: 99999;
		border-radius: 20px;
	}

	::v-deep .tki-tree-bar {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	::v-deep .placeholder {
		padding-left: 40px;
	}
	.common_btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 8rpx;
		&.primary {
			background: #5181F6;
		}
		&.danger {
			background: #F26161;
		}
	}
	.b_ic {
		width: 24rpx;
		height: 24rpx;
	}
	.add_btn {
		width: 108rpx;
		height: 108rpx;
		position: fixed;
		bottom: 4rpx;
		right: 28rpx;
	}
	.qrcode_img {
		width: 160rpx;
		height: 160rpx;
	}
	.popup-content {
		width: 600rpx;
		padding: 48rpx;
		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
		}
	}
	.popup-btn {
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: end;
		button {
			width: 50%;
			border-radius: 0;
		}
	}
	.popup-radio-group {
		display: flex;
		flex-direction: column;
		margin: 24rpx 0;
		gap: 16rpx;
	}
</style>