<template>
	<view class="sign-main">
		<view class="sign-main-top">
			<image src="../../static/sign1.png" mode="aspectFill"></image>
			<view class="btn">
				<u-button type="primary" text="去签到" shape="circle" @click="goHome"
					color="linear-gradient(to top, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			</view>
		</view>
		<view class="sign-main-content">
			<span class="sign-main-content-title">今日巡更</span>
			<view v-if='isShow&&!data.length' style="margin-top: 140px;">
				<u-loadmore v-if='isShow&&!data.length' fontSize="20px" color="#3D8EFE" lineColor="#3D8EFE"
					loadmoreText="今日休息,无需巡更" line />
			</view>
			<view v-for="(item,index) in data" :key="index">
				<!-- <view class="sign_item" v-if="!item.freeDay"> -->
				<view class="sign_item">
					<view class="item-top">
						<view class="top-box-address">
							<u-icon name="map-fill" color="#3D8EFE" size="20"></u-icon>
							<p class="top-box-address-text">{{item.positionName}}</p>
						</view>
					</view>
					<view class="item-cnetent">
						<view class="cnetent-time" v-for="(v,i) in item.rules" :key="i">
							<p class="cnetent-time-text"
								:style="{color: v.signStatus==0?'#3D8EFE':v.signStatus==2?'#F386C7':'#494C8B66'}">
								{{formatTime(v.startTime)}}-{{formatTime(v.endTime)}}
								<!-- {{v.startTime}}-{{v.endTime}} -->
							</p>
							<view v-if="v.signStatus==0" class="cnetent-time-right">
								<p style="color:#3D8EFE ;">待巡</p>
							</view>
							<view v-if="v.signStatus==1" class="cnetent-time-right">
								<u-icon name="checkmark-circle-fill" color="#3D8EFE" size="20"></u-icon>
							</view>
							<view v-if="v.signStatus==2" class="cnetent-time-right">
								<p style="color:#F386C7 ;">未巡</p>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if='data.length' class="line" style="margin-top: 30px;">
			<u-loadmore loadmoreText="没有更多了" line />
		</view>
		<view class="footer">
		</view>
	</view>
</template>

<script>
	import {
		getPatrolPosition
	} from '@/api/login.js'
	export default {
		data() {
			return {
				isLoading: false,
				searchData: {
					data: {},
					pageNumber: 1, // 页码
					pageSize: 1000 // 每页条数
				},
				total: 0,
				data: [],
				isShow: false,
			};
		},

		methods: {
			goHome() {
				uni.navigateTo({
					url: "/pages/home/home"
				})
			},
			// 获取列表
			async fetchData() {
				uni.showLoading({
					title: '加载中...',
					icon: 'loading',
					mask: true
				})
				this.isLoading = true
				try {
					const res = await getPatrolPosition(this.searchData)
					uni.hideLoading()
					this.data = [...this.data, ...res.data].filter(item => {
						return !item.freeDay
					})
					this.isShow = true
					this.total = res.data.length
					this.searchData.pageNumber++
				} finally {
					this.isLoading = false
					uni.hideLoading()
				}
			},
			formatTime(time) {
				if (!time) return '';
				const [hour, minute] = time.split(':').slice(0, 2); // 仅获取时分部分			
				return `${hour}:${minute}`;
			}
		},
		onShow() {
			this.searchData.pageNumber = 1
			this.data = []
			let userInfo = uni.getStorageSync('userInfo');
			if (!userInfo) {
				uni.navigateTo({
					url: '/pages/login/index',
				})
			} else {
				this.fetchData()
			}

		},
		onReachBottom() {
			const {
				total,
				searchData: {
					pageNumber,
					pageSize
				}
			} = this
			if (total <= (pageNumber - 1) * pageSize) {
				return uni.$u.toast('没有更多了')
			}
			if (this.isLoading) return
			this.fetchData()
		},
	}
</script>

<style lang="scss">
	.sign-main {
		width: 100%;

		.sign-main-top {
			width: 100%;
			height: 150px;
			position: relative;

			image {
				height: 100%;
				width: 100%;
				object-fit: contain;
			}

			.btn {
				position: absolute;
				right: 30px;
				top: 75px;
				width: 105px;
				text-align: center;
			}
		}

		.sign-main-content {
			width: 100%;
			box-sizing: border-box;
			padding: 15px;

			.sign-main-content-title {
				color: #404065cc;
				font-weight: 500;
				font-size: 15px;
				line-height: 22.5px;
			}

			.sign_item {
				background: #fff;
				padding: 12px;
				margin-top: 14px;
				border-radius: 10px;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 7.5px;

					.top-box-address {
						display: flex;
						align-items: center;
						margin-bottom: 10px;
						font-size: 17px;

						.top-box-address-text {
							margin-left: 10px;
						}
					}
				}

				.item-cnetent {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.cnetent-time {
						padding: 5px 13px;
						border-radius: 15px;
						display: flex;
						align-items: center;
						background: #F0F8FF;
						height: 20px;
						line-height: 20px;
						font-size: 13px;
						color: #494C8B66;
						margin-bottom: 10px;

						.cnetent-time-text {
							width: 85px;
							margin-right: 10px;
						}

						.cnetent-time-right {
							width: 30px;
						}
					}
				}
			}

		}
	}

	.footer {
		height: 40px;
	}
</style>