<template> 
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
		<view class="top-view"> 
			<view class="user-view">
				<view style="width: 24%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 999999;">
					<image :src="headPortraitUrl" 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;">
						您好，{{userName}}
					</view>
					<view style="color: #fff;font-size: 26rpx;">
						公职人员护照管理系统
					</view>
				</view>
			</view>  
		</view>
	   
		<view class="handle-box"> 
			<view class="main-box"> 
				<view class="grid-box">
					<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>
					<view class="grid-container">
						<view class="grid-item" @click="navigateTo('/pages/certificateManage/certificateInfo/index')">
							<view class="icon-wrapper">
								<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/personalInfo.png"></image>
							</view>
							<text class="icon-text">证件信息</text>
						</view>
						<view class="grid-item" @click="navigateTo('/pages/certificateReturnManage/certificateSave/index')">
							<view class="icon-wrapper">
								<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
							</view>
							<text class="icon-text">证件存证</text>
						</view>  
						<view class="grid-item" @click="navigateTo('/pages/certificateReturnManage/certificateTake/index')">
							<view class="icon-wrapper">
								<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
							</view>
							<text class="icon-text">证件取证</text>
						</view>  
					</view> 
				</view> 
				<view style="width: 100%;margin: 0 auto;height: 25vh;margin-bottom: 4vh;">
					<view style="width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;">
						<view style="font-size: 28rpx;font-weight: 600;">证件记录</view>
						<view style="font-size: 24rpx;color: #3888FF;">查看全部>></view>
					</view>
					<scroll-view style="width: 100%;height: 21vh;" @scrolltolower="onScrollTolower" scroll-y="true">
						<view class="record-item" v-for="(item, index) in recordList" :key="index"> 
							<view style="width: 15%;height: 100%;display: flex;align-items: center;">
								<image 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: 85%;height: 100%;padding-top: 10rpx;">
								<view style="width: 100%;height: auto;display: flex;justify-content: space-between;">
									<view style="font-weight: 600;width: 60%;">姓名：{{item.name}}</view> 
									<view style="font-size: 20rpx;color: #333333;width: 22%;">{{item.stateName}}</view> 
								</view>
								<view style="width: 100%;height: auto;display: flex;justify-content: space-between;">
									<view style="font-weight: 600;width: 100%;">证件编号：{{item.certificateNo}}</view>  
								</view>
								<view style="color: #333333;font-size: 20rpx;width: 100%;font-weight: 600;display: flex;justify-content: space-between;align-items: center;">
									<view>签发日期：{{item.issueDay}}</view>
									<view>有效期至：{{item.issueLifespan}}</view>
								</view>
							</view>
						</view>
					</scroll-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;margin-bottom: 20rpx;">
						<view style="font-size: 28rpx;font-weight: 600;">任务记录</view>
						<view style="font-size: 24rpx;color: #3888FF;">查看全部>></view>
					</view>
					<scroll-view style="width: 100%;height: 21vh;" @scrolltolower="onScrollTolower2" scroll-y="true">
						<view class="record-item" v-for="(item, index) in recordList2" :key="index">
							<view style="width: 15%;height: 100%;display: flex;align-items: center;">
								<image 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: 85%;height: 100%;padding-top: 10rpx;">
								<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 4rpx;">
									<view style="font-weight: 600;width: 60%;">姓名：{{item.name}}</view> 
									<view style="font-size: 20rpx;color: #333333;width: 22%;">{{item.stateName}}</view> 
								</view>
								<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 4rpx;">
									<view style="font-weight: 600;width: 100%;">任务编号：{{item.taskNo}}</view>  
								</view>
								<view style="color: #333333;font-size: 20rpx;width: 100%;font-weight: 600;display: flex;justify-content: space-between;align-items: center;">
									<view>签发日期：{{item.issueDay}}</view>
									<view>有效期至：{{item.issueLifespan}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view> 
</template>

<script> 
import { getUserInfo} from "@/api/system/user";
import { certificateRecordApi,certificateAtakeRecordApi} from "@/api/index/index.js";
export default {
  data() {
    return { 
		fontValue:uni.getStorageSync('fontSize') || 8,
		headPortraitUrl:"/static/images/my/face.png",
		userName: "",
		pageNum: 1,
		pageSize: 10,
		total: 0,
		recordList:[], 
		pageNum2: 1,
		pageSize2: 10,
		total2: 0,
		recordList2:[], 
    }
  },
  onShow() {
  	this.getUserInfo()
  },
  onLoad() {
	this.getList()
	this.getList2() 
  },
  onUnload() { 
  },
  methods: {
		getUserInfo() {
			getUserInfo().then(res => {
				this.headPortraitUrl= res.user.avatar||"/static/images/my/face.png";
				this.userName = res.user.userName;
			})
		}, 
		// 翻页
		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 certificateRecordApi(params)
				console.log('?? ~ getList ~ res:', res)
				this.total = Number(res.total); 
				if(this.pageNum==1){
					this.recordList = res.rows
				}else{
					this.recordList.push(...res.rows)
				} 
			} catch (error) {
				console.log(error)
			}
		},
		
		// 翻页
		onScrollTolower2(){ 
			if(this.total2>this.recordList2.length){
				this.pageNum2++
				this.getList2()
			}
		},
		//获取列表
		async getList2() { 
			let params = { 
				pageNum: this.pageNum2,
				pageSize: this.pageSize2, 
			} 
			try {
				const res = await certificateAtakeRecordApi(params)
				console.log('?? ~ getList ~ res:', res)
				this.total2 = Number(res.total); 
				if(this.pageNum2==1){
					this.recordList2 = res.rows
				}else{
					this.recordList2.push(...res.rows)
				} 
			} catch (error) {
				console.log(error)
			}
		},
		navigateTo(url) {
			uni.navigateTo({
				url
			})
		}
	},
}
</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: 16vh;
 	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: 20rpx;
	z-index: 999999;  
	
	.select-box{
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
	.main-box{
		width: 96%;
		height: auto;
		margin: 0 auto;
	}
	.grid-box{
		width: 100%;
		height: 15vh;
		margin: 20rpx auto; 
	}
	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	
		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.icon-wrapper {
				// width: 48px;
				// height: 48px;
				//border-radius: 24px;
				//background: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 3px;
			}
	
			.icon-text {
				font-size: 28rpx;
				color: #0F274B;
			}
		}
	} 
	.record-item{
		width: 100%;
		height: auto;
		display: flex;
		align-items: center; 
		border-bottom: 1px solid #eee;
	}
}
</style>
