<template> 
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
		<view class="top-view">
			<view class="header">
				<text class="header-text">OCR定值核对校验</text>
			</view>
			<view class="user-view">
				<view style="width: 24%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 999999;">
					<image src="/static/images/my/face.png" style="width: 120rpx;height: 120rpx;border-radius: 50%;" mode="aspectFit"></image>
				</view>
				<view style="width: 50%;height: 100%;display: flex;flex-direction: column;justify-content: center;z-index: 999999;">
					<view style="color: #fff;font-size: 36rpx;font-weight: 600;margin-bottom: 10px;">
						您好，{{ userNickName }}
					</view>
					<view style="color: #fff;font-size: 26rpx;">
						请选择您需要的识别功能
					</view>
				</view>
			</view> 
			<view style="width: 320rpx;height: 320rpx;position: absolute;right: 10rpx;bottom: 10rpx;">
				<image src="/static/images/index/groupIcon.png" style="width: 320rpx;height: 320rpx;" mode="aspectFit"></image>
			</view>
		</view>
	   
		<view class="handle-box">
			<view class="select-box" v-if="showSelect">
				<view>请选择需要比对的变电站</view>
				<view style="margin: 20rpx auto;">
					<uni-data-select v-model="bdStation" :localdata="stationRange" @change="changeStation"></uni-data-select>
				</view>
				<view style="display: flex;width: 100%;margin: 20rpx auto;justify-content: space-between;">
					<view @click="closeSelect" style="width: 45%;height: 70rpx;margin: 10px auto;background: #fff;border-radius: 10rpx;text-align: center;line-height: 70rpx;border: 1px solid #ccc;" >
						取消
					</view>
					<view @click="confirmSelect" style="width: 45%;height: 70rpx;margin: 10px auto;background: #3888FF;color: #fff;border-radius: 10rpx;text-align: center;line-height: 70rpx;" >
						确认
					</view> 
				</view>
			</view>
			<view class="main-box" v-else>
				<view @click="openSelect" style="color: #3888FF;font-size: 28rpx;font-weight:600;">{{ bdStationName }} >>    </view>
				
				<view class="verify-box">
					<view class="verify-item">
						<view style="width: 40%;height: 90%;display: flex;align-items: center;justify-content: center;">
							<image src="/static/images/index/icon1.png" style="width: 80%;height: 80%;" mode="aspectFit"></image>
						</view>
						<view style="width: 60%;height: 90%;padding: 22rpx;font-size: 24rpx;">
							<view style="font-weight: 600;margin-bottom: 20rpx;">定值单录入</view>
							<view >快速识别电力定值单内容，自动提取定值单数据</view>
							<view>
								<view @click="goOrderScan" style="width: 60%;height: 60rpx;margin: 10px;background: #3888FF;color: #fff;border-radius: 10rpx;text-align: center;line-height: 60rpx;" >
									开始识别
								</view> 
							</view>
						</view>
					</view>
					<view class="verify-item">
						<view style="width: 40%;height: 90%;display: flex;align-items: center;justify-content: center;">
							<image src="/static/images/index/icon2.png" style="width: 80%;height: 80%;" mode="aspectFit"></image>
						</view>
						<view style="width: 60%;height: 90%;padding: 22rpx;font-size: 24rpx;">
							<view style="font-weight: 600;margin-bottom: 20rpx;">定值数据核对</view>
							<view >智能识别保护装置参数，自动与定值单比对核验</view>
							<view>
								<view @click="handleRecognize" style="width: 60%;height: 60rpx;margin: 10px;background: #2CDEBE;color: #fff;border-radius: 10rpx;text-align: center;line-height: 60rpx;" >
									开始识别
								</view> 
							</view>
						</view>
					</view>
				</view>
				
				<view style="width: 100%;margin: 0 auto;height: 25vh;">
					<view style="width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;">
						<view style="font-size: 28rpx;font-weight: 600;">最近记录</view>
						<view style="font-size: 24rpx;color: #3888FF;">查看全部>></view>
					</view>
					<scroll-view style="width: 100%;height: 23vh;" @scrolltolower="onScrollTolower" scroll-y="true">
						<view class="record-item" v-for="(item, index) in recordList" :key="index"> 
							<view style="width: 20%;height: 100%;display: flex;align-items: center;">
								<image v-if="item.recordType==1" src="/static/images/index/icon3.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
								<image v-if="item.recordType==2" src="/static/images/index/icon4.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
							</view>
							<view style="width: 80%;height: 100%;padding-top: 10rpx;">
								<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 20rpx;">
									<view style="font-weight: 600;width: 60%;">{{item.recordName}}</view>
									<view v-if="item.status==1&&item.recordType==1" style="font-size: 20rpx;color: #333333;width: 22%;">已完成解析</view>
									<view v-if="item.status==2&&item.recordType==1" style="font-size: 20rpx;color: #333333;width: 22%;">正在解析</view>
									<view v-if="item.status==1&&item.recordType==2" style="font-size: 20rpx;color: #333333;width: 22%;">已完成识别</view>
									<view v-if="item.status==2&&item.recordType==2" style="font-size: 20rpx;color: #333333;width: 22%;">正在识别</view>
								</view>
								<view style="color: #333333;font-size: 20rpx;">{{item.recordTime}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			
			<!-- 识别选择定值单 -->
			<u-popup :show="showPopup " mode="center" @close="showPopup = false">
				<view style="width: 90vw;height: 32vh;">
					<view style="width: 100%;text-align: center;height: 40rpx;line-height: 40px;font-size: 30rpx;font-weight: bold;margin-bottom: 40rpx;">请选择识别定值单</view>
					<view style="width: 100%;margin: 0 auto;height: 20vh;display: flex;overflow-y: auto;">
						<view style="width: 20%;text-align: center;">定值单:</view>
						<view style="width: 75%;">
							<uni-data-select v-model="chosenOrder" :localdata="orderRange" @change="changeOrder"></uni-data-select>
						</view>
					</view>
					<view style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;">
						<view style="width: 80%;height: 40px;line-height:40px;background:#3989FF;border-radius: 10px;text-align: center;color: #FFF;" @click="chosenOrderConfirm">确认</view>
					</view>
				</view>
			</u-popup>
		</view> 
</template>

<script> 
import { substationListAPI,protectionOrderListAPI } from '@/api/protection/index.js'
import { getUserInfoApi } from '@/api/system/user.js'

export default {
	data() {
		return { 
			fontValue:uni.getStorageSync('fontSize') || 8,
			userNickName:"",
			bdStation:"",
			bdStationName:"",
			showSelect:true,
			stationRange: [], 
			showPopup:false,//选择定值单下拉
			orderRange:[],
			orderList:[],
			chosenOrder:"", 
			pageNum: 1,
			pageSize: 10,
			total: 0,
			recordList:[
				{
					recordName:"220kV拂晓变电站定值单",
					recordTime:"2025-08-01 14:00",
					recordType:1,
					status:1
				},
				{
					recordName:"主变保护装置",
					recordTime:"2025-08-01 14:00",
					recordType:2,
					status:1
				},
				{
					recordName:"主变保护装置",
					recordTime:"2025-08-01 14:00",
					recordType:2,
					status:2
				},
				{
					recordName:"220kV拂晓变电站定值单",
					recordTime:"2025-08-02 14:00",
					recordType:1,
					status:2
				}
			], 
		}
	},
	onShow() {
		this.getUserInfo()
		this.getSubstationList()
	},
	onLoad() {
	},
	onUnload() { 
	},
	methods: { 
		//获取用户信息
		async getUserInfo(){ 
			let params = {} 
			try {
				const res = await getUserInfoApi(params)
				console.log('?? ~ getList ~ res:', res)
				this.userNickName = res.user.nickName 
			} catch (error) {
				console.log(error)
			}
			// 	uni.setStorageSync('userId', res.user.userId)
			// 	uni.setStorageSync('userName', res.user.userName)
			// 	uni.setStorageSync('phonenumber', res.user.phonenumber)
			// 	uni.setStorageSync('mobile', res.user.phonenumber)  
		},  
		//获取变电站下拉
		async getSubstationList() { 
			try {
				const res = await substationListAPI()
				if(res.code==200){
					if(res.data&&res.data.length>0){
						res.data.forEach(item=>{
							let obj = {
								"value": item.substationId,
								"text": item.substationName
							}
							this.stationRange.push(obj)
						}) 
					}else{
						this.stationRange=[]
					}
				}
				console.log('?? ~ getList ~ res:', res) 
			} catch (error) {
				console.log(error)
			}
		},
		// 选择变电站
		changeStation(){
			if(this.bdStation&&this.bdStation!=""){
				this.stationRange.forEach(item=>{
					if(item.value==this.bdStation){
						this.bdStationName = item.text
					}
				}) 
			}else{
				this.bdStationName = "" 
			}
		},
		//点击名称-重新选择变电站
		openSelect(){
			this.showSelect=true
		},
		//选择变电站-取消按钮
		closeSelect(){
			if(this.bdStationName==""){
				uni.$u.toast('请选择变电站！')
			}else{
				this.showSelect=false
			}
		},
		//选择变电站-确认按钮
		confirmSelect(){
			if(this.bdStationName==""){
				uni.$u.toast('请选择变电站！')
			}else{
				this.showSelect=false
			}
		}, 
		//识别按钮-打开弹窗
		handleRecognize(){
			this.chosenOrder=""
			this.orderRange=[]
			this.orderList=[]
			this.getProtectionOrderList()
			this.showPopup=true 
		},
		//通过已选择的变电站--获取定值单下拉
		async getProtectionOrderList() {
			console.log('获取列表') 
			try {
				let param={
					substationId:this.bdStation
				}
				const res = await protectionOrderListAPI(param)
				if(res.data&&res.data.length>0){
					this.orderList = res.data
					res.data.forEach(item=>{
						let obj = {
							"value": item.protectionId,
							"text": item.protectionName
						}
						this.orderRange.push(obj)
					}) 
				}else{
					this.orderList = []
					this.orderRange=[]
				}
				console.log('?? ~ getList ~ res:', res)
				
			} catch (error) {
				console.log(error)
			}
		},
		//选中定值单
		changeOrder(){
			console.log(this.chosenOrder) 
		},
		// 确认选中定值单-前往开始识别
		chosenOrderConfirm(){
			console.log(this.chosenOrder) 
			this.showPopup=false;
			let chosenOrderInfo = {}
			this.orderList.forEach(item=>{
				if(item.protectionId==this.chosenOrder){
					chosenOrderInfo = item
				}
			})
			//跳转到详情页面
			uni.navigateTo({
				url: `/pages/verify/checkingDetails?params=${JSON.stringify(chosenOrderInfo)}`
			})
		},
		// 记录翻页
		onScrollTolower(){
			console.log(this.recordList.length)
			// if(this.total>this.recordList.length){
			// 	this.pageNum++
			// 	this.getList()
			// }
		},
		//获取记录列表
		async getList() {
			console.log('获取列表',)
			let params = { 
				pageNum: this.pageNum,
				pageSize: this.pageSize, 
			} 
			try {
				// const res = await getOrderInfoListAPI(params)
				// console.log('?? ~ getList ~ res:', res)
				// this.total = res.total; 
				// if(this.pageNum==1){
				// 	this.recordList = res.rows
				// }else{
				// 	this.recordList.push(...res.rows)
				// } 
			} catch (error) {
				console.log(error)
			}
		},
		//跳转到定值单扫描页面
		goOrderScan() {
		 //  uni.navigateTo({
			// url: '/pages/verify/orderScan'
		 //  })
		  uni.navigateTo({
			url: '/pages/verify/orderOcrScan'
		  })
		},
		
		goToMenu() {
		 //  // 跳转到菜单页面
		 //  uni.navigateTo({
			// url: '/pages/weeklyMenu/index'
		 //  })
		},
	},
}
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fafcff;
  height: 100%;
}
view {
  font-size: 28rpx;
  line-height: inherit;
}
/* #endif */
 .top-view{
 	width: 100%;
 	height: 28vh;
 	background: linear-gradient( 180deg, #3888FF 0%, rgba(56,136,255,0) 100%);
	position: relative;
 }

.header {
  padding-top: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;

  .header-text {
    font-size: 38rpx;
    font-weight: 600;
    color: #fff;
  }
}
.user-view{
	width: 100%;
	height: 10vh;
	// z-index: 999999;
	display: flex;
}


.handle-box{
	// margin-top: 30rpx;
	width: 100%; 
	height: 70vh;
	background: rgba(255,255,255,0.3);
	opacity: 0.8;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	border: 1px solid #fff;
	margin-top: -5vh;
	padding: 20rpx 20rpx; 
	padding-top: 60rpx;
	z-index: 999999;  
	
	.select-box{
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
	.main-box{
		width: 96%;
		height: auto;
		margin: 0 auto;
	}
	.verify-box{
		width: 100%;
		height: auto;
		margin: 20rpx auto;
	}
	.verify-item{
		width: 100%;
		height: 18vh;
		margin-bottom: 30rpx;
		border-radius: 4rpx;
		border: 1px solid #C9C9C9;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.record-item{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center; 
		border-bottom: 1px solid #eee;
	}
}
</style>
