<!--
 * @Author: XHC
 * @Date: 2025-05-23 16:46:57
 * @LastEditors: XHC
 * @LastEditTime: 2025-06-06 17:41:44
 * @Description: 开始巡检
-->
<template>
	<view class="startInspection">
		<view class="patrol-info">
			<view class="title">
				<uni-section title="巡检信息" type="line"></uni-section>
				<uni-tag :inverted="true" text="日常巡检" type="success" />
			</view>
			<view class="info-box">
				<view class="info-item">
					<uni-row :gutter="10">
						<uni-col :span="7">
							<text class="title">路线名称：</text>
						</uni-col>
						<uni-col :span="17">
							<text>{{ infoData.routeName }}</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="info-item">
					<uni-row :gutter="10">
						<uni-col :span="7">
							<text class="title">路线编号：</text>
						</uni-col>
						<uni-col :span="17">
							<text>{{ infoData.routeNumber }}</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="info-item">
					<uni-row :gutter="10">
						<uni-col :span="7">
							<text class="title">巡检频率：</text>
						</uni-col>
						<uni-col :span="17">
							<text>{{ infoData.frequency }}</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="info-item">
					<uni-row :gutter="10">
						<uni-col :span="7">
							<text class="title">巡检人员：</text>
						</uni-col>
						<uni-col :span="17">
							<text>{{ infoData.patrolPersonnel }}</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="info-item" v-if="infoData.state == 0">
					<uni-row :gutter="10">
						<uni-col :span="7">
							<text class="title">巡检时间：</text>
						</uni-col>
						<uni-col :span="17">
							<text>{{ infoData.modifyTime }}</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="info-item">
					<uni-row :gutter="10">
						<uni-col :span="7">
							<text class="title">巡检内容：</text>
						</uni-col>
						<uni-col :span="17">
							<text>{{ infoData.patrolDescription }}</text>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<view class="inspection-points">
			<view class="title">
				<uni-section title="巡检点位：" type="line"><text>3/32</text></uni-section>
				<uni-icons type="scan" size="26" @click="scanQRCode"  v-if="infoData.state != '已巡检'"></uni-icons>
			</view>
			<view class="list-box">
				<view class="list-item" v-for="(item, index) in listData" :key="index" @click="scanQRCode">
					<view class="line">
						<uni-icons fontFamily="iconfont" color="#1469BC">{{'&#xe600;'}}</uni-icons>
						<view class="dashed-line"></view>
					</view>
					<view class="list-info">
						<view>
							<view class="info-title">
								<uni-section class="section" :title="item.pointName" type="line"></uni-section>
								<uni-tag :inverted="true" :text="item.delFlag == 0 ? '正常' : '异常'" :type="item.delFlag == '0' ? 'success' : 'warning'" />
							</view>
							<view class="content">
								<text>{{ item.modifyTime }}</text> <text class="name">{{ item.name }}</text>
							</view>
						</view>
						<uni-icons type="right" color="#0E65BA" size="26"></uni-icons>
					</view>
				</view>

			</view>
		</view>
		
	</view>
</template>

<script setup>
import { onLoad, onReady } from "@dcloudio/uni-app";
import { reactive } from "vue";
import { getPointList } from '@/api/api.js'

let infoData = reactive({
	title: '',
	num: '',
	frequency: '白班每班一次',
	person: '运行部 五值 白班',
	content: '主要巡检没备:左岸电站}-8号机組发电机，层、中间层(含机組自用电))、GcB及水轮机层没备。'
})

let listData = ref([
	// { title: '发电机出口断路器', state: '异常', time: '2025-02-20 8:40', name: '张三' },
	// { title: '励磁系统', state: '正常', time: '2025-02-20 8:40', name: '张三' },
	// { title: '励磁变', state: '异常', time: '2025-02-20 8:40', name: '张三' },
	// { title: '发电机出口断路器', state: '异常', time: '2025-02-20 8:40', name: '张三' },
	// { title: '发电机出口断路器', state: '异常', time: '2025-02-20 8:40', name: '张三' },
	// { title: '发电机出口断路器', state: '异常', time: '2025-02-20 8:40', name: '张三' },
	// { title: '发电机出口断路器', state: '异常', time: '2025-02-20 8:40', name: '张三' },
])

onReady(() => {
	

})
onLoad((options) => {
	infoData = { ...infoData, ...JSON.parse(options.data) }
	if (infoData.state == 0) {
		uni.setNavigationBarTitle({
			title: '巡检详情'
		});
	}
	queryPointList()
})

// 查询点位列表
const queryPointList = () => {
	getPointList({}).then(res => {
		console.log(res.data);
		listData.value = res.data
	})
}

// 扫描二维码
const scanQRCode = () => {
	if (infoData.state == '已巡检') return
	uni.scanCode({
		// 扫码成功的回调函数
		onlyFromCamera: true,
		success: (res) => {
			// 这里res.result就是二维码的内容
			console.log('扫描结果：', res.result);
			uni.navigateTo({
				url: '/pages/points/points'
			});
		},
		// 扫码失败的回调函数
		fail: (err) => {
			console.log('扫描失败：', err);
			// 可以在这里提示用户扫描失败的信息
		}
	});
}

</script>

<style lang="scss" scoped>
.startInspection {
	.patrol-info {
		.info-box {
			.info-item {
				padding: 20rpx 10rpx;
				margin: 0 20rpx;
				border-bottom: 1rpx solid #EDF4FD;
				.title {
					color: #808185;
				}
				&:last-of-type {
					border-bottom: none;
				}
			}
		}
	}

	.patrol-info, .inspection-points {
		margin: 0 30rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		background: #fff;
		>.title {
			display: flex;
			align-items: center;
		}
	}

	.inspection-points {
		margin-top: 20rpx;
		.title {
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			:deep(.uni-section) {
				display: flex;
				align-items: center;
			}
		}
		.list-box {
			.list-item {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				.line {
					margin: 0 15rpx;
					display: flex;
					flex-direction: column;
    				align-items: center;
					position: relative;
					.dashed-line {
						position: absolute;
						top: 35rpx;
						height: 140rpx;
						border: 1rpx dashed #8CB4DB;
					}
					
				}
				.list-info {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: #F1F6FD;
					border-radius: 15rpx;
					margin: 20rpx;
					padding: 10rpx 20rpx 20rpx 0;
					.info-title {
						display: flex;
						align-items: center;
						
						.section {
							background: transparent;
							margin-right: 20rpx;
							.name {
								margin-left: 20rpx;
							}
							:deep(.uni-section-header) {
								font-weight: 700;
								padding: 20rpx 0;
							}
							:deep(.uni-section-header__content) {
								margin-left: 10rpx;
							}
						}
					}
					.content {
						margin-left: 30rpx;
						color: #7F8084;
						font-size: 23rpx;
						.name {
							margin-left: 20rpx;
						}
					}
				}
				&:last-child .dashed-line {
					height: 60rpx;
				}
			}
			
		}
	}
}
</style>