<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;">
						您好，李东辉工程师
					</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="range" @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="" 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="" 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>
		</view> 
</template>

<script> 
export default {
  data() {
    return { 
		fontValue:uni.getStorageSync('fontSize') || 8,
		bdStation:"",
		bdStationName:"",
		showSelect:true,
		range: [
			{
				"value": 1,
				"text": "110kV拂晓变电站",
				// "disable": true
			}, {
				"value": 2,
				"text": "220kV拂晓变电站",
			}, {
				"value": 3,
				"text": "110kV合肥变电站"
			}, {
				"value": 4,
				"text": "220kV合肥变电站",
			},
		], 
		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()
  },
  onLoad() {
	  
  },
  onUnload() { 
  },
  methods: { 
		changeStation(){
			if(this.bdStation&&this.bdStation!=""){
				this.range.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
			}
		},
		// 翻页
		onScrollTolower(){
			console.log(this.recordList.length)
			// if(this.total>this.recordList.length){
			// 	this.pageNum++
			// 	this.getList()
			// }
		},
		//获取列表
		async getList() {
			console.log('获取列表',)
			let params = {
				// userId: uni.getStorageSync('userId'),
				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)
			}
		},
		//获取用户信息
		getUserInfo(){
			// this.$store.dispatch('GetInfo').then(res => {
			// 	uni.setStorageSync('userId', res.user.userId)
			// 	uni.setStorageSync('userName', res.user.userName)
			// 	uni.setStorageSync('phonenumber', res.user.phonenumber)
			// 	uni.setStorageSync('mobile', res.user.phonenumber) 
			// })
		}, 
		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: 40rpx;
  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>
