<template>
	<view class="user-center" :style="{backgroundImage: `url(${staticHost + bgPath1})`}">
		<customNavbar title="个人中心" ref="navbar" :is-transparent="navbarStyle.isTransparent"
			:bg-color="navbarStyle.bgColor" :text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity"
			:extra-icons="navbarStyle.extraIcons" :show-home="false" :show-back="false" />
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<u-avatar :src="avatar" size="133"></u-avatar>
			<view class="user-info">
				<view class="user-name">
					<text class="name-text">{{user.userName || '用户0564'}}</text>
					<image :src="staticHost + '/public/static/center/' + (user.userType === '0' && user.oaAuth ? 'personal-actived' : 'personal') + '.png'" class="user-type-icon" mode="widthFix"></image>
					<image :src="staticHost + '/public/static/center/' + (user.userType === '1' && user.oaAuth ? 'org-actived' : 'org') + '.png'" class="user-type-icon" mode="widthFix"></image>
				</view>
				<view class="user-type">用户类型：{{user.userType ==='0' ? '个人' : '组织'}}</view>
			</view>
			<view class="msg-setting">
				<view class="u-relative msg-icon" @click="toMessage()">
					<image :src="staticHost + '/public' + '/static/center/msg.png'" class="msg-icon-img" mode="widthFix"></image>
					<view v-if="unreadMsgCount > 0" class="badge">
							{{ unreadMsgCount > 99 ? '99+' : unreadMsgCount }}
						</view>
				</view>
			</view>
		</view>

		<view class="contract-view" :style="{backgroundImage: `url(${staticHost + bgPath2})`}">
			<!-- 我的合同和我的预约 -->
			<view class="contract-appointment">
				<view class="card" @click="clickNav('/pages-biz/contract/contract')">
					<view class="card-left">
						<view class="card-title">
							我的合同
						<u-icon name="arrow-right" color="#2979ff" size="28" class="arrow-icon"></u-icon>
						</view>
						
						<view class="card-info">
							<view class="card-type">待签署合同</view>
							<view class="card-number">{{unsignContractNum}}</view>
						</view>
					</view>
					<view class="card-right">
						<image class="card-icon" :src="staticHost + '/public' + '/static/center/contract-center.png'" mode="widthFix"></image>
					</view>
				</view>
				<view class="card" @click="clickNav('/pages-biz/reserve/reserveRecords')">
					<view class="card-left">
						<view class="card-title">
							我的预约
						<u-icon name="arrow-right" color="#2979ff" size="28" class="arrow-icon"></u-icon>
						</view>
						
						<view class="card-info">
							<view class="card-type">预约中</view>
							<view class="card-number">{{handlingReserveNum}}</view>
						</view>
					</view>
					<view class="card-right">
						<image class="card-icon" :src="staticHost + '/public' + '/static/center/reserve-center.png'" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="my-service">
				<view class="service-title">常用功能</view>
				<view class="service-list">
							<view class="service-item" @click="clickNav('/pages-biz/contract/contract')">
						<view class="service-icon">
							<image :src="staticHost + '/public' + '/static/center/contract.png'"></image>
						</view>
						<view class="service-name">我的合同</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/unpaid/unpaid')">
						<view class="service-icon">
							<image :src="staticHost + '/public' + '/static/center/rentbill.png'"></image>
						    	<!-- <view v-if="unpaidRentCount > 0" class="badge">
										{{ unpaidRentCount > 99 ? '99+' : unpaidRentCount }}
									</view> -->
						</view>
						<view class="service-name">租赁账单</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/wae/wae')">
						<view class="service-icon">
							<image :src="staticHost + '/public' + '/static/center/wae.png'"></image>
						    <!-- <view v-if="unpaidWaeCount > 0" class="badge">
										{{ unpaidWaeCount > 99 ? '99+' : unpaidWaeCount }}
									</view> -->
						</view>
						<view class="service-name">水电账单</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/bill/payHistory')">
						<view class="service-icon badge-wrapper">
							<image :src="staticHost + '/public' + '/static/center/payhistory.png'"></image>
				
						</view>
						<view class="service-name">收支记录</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/reserve/reserveRecords')">
						<view class="service-icon badge-wrapper">
							<image :src="staticHost + '/public' + '/static/center/reserve.png'"></image>
						
						</view>
						<view class="service-name">看房预约</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-assets/discharge/leaseCancelList')">
						<view class="service-icon badge-wrapper">
							<image :src="staticHost + '/public' + '/static/center/discharge.png'"></image>
	
						</view>
						<view class="service-name">退租申请</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-assets/fallback/fallback')">
						<view class="service-icon badge-wrapper">
							<image :src="staticHost + '/public' + '/static/center/fallback.png'"></image>
					
						</view>
						<view class="service-name">我要留言</view>
					</view>
					<view class="service-item" @click="clickNav('/pages-biz/unpaid/unpaidMargin')">
						<view class="service-icon badge-wrapper">
							<image :src="staticHost + '/public' + '/static/center/repair.png'"></image>

						</view>
						<view class="service-name">维修需求</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他功能 -->
		<view class="common-tools">
			<view class="tools-title">其他功能</view>
			<view class="tools-list">
				<view class="tool-item" @click="clickNav('/pages-biz/profile/profile')">
					<image class="tool-icon" :src="staticHost + '/public' + '/static/center/auth.png'" mode="widthFix"></image>
					<view class="tool-center">
						<text class="tool-name">实名认证</text>
						<text class="tool-desc">个人实名信息认证</text>
					</view>
					<text class="auth-tag">{{user.oaAuth ? '已认证' : '未认证'}}</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
				<view class="tool-item" @click="clickNav('/pages-biz/tool/calculator')">
					<image class="tool-icon" :src="staticHost + '/public/static/center/caculator.png'" mode="widthFix"></image>
					<view class="tool-center">
						<text class="tool-name">计算器</text>
						<text class="tool-desc">便捷工具</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
					<view class="tool-item" @click="toSetting()">
					<image class="tool-icon" :src="staticHost + '/public/static/center/setting.png'" mode="widthFix"></image>
					<view class="tool-center">
						<text class="tool-name">设置</text>
						<text class="tool-desc">小程序相关设置</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js";

	export default {
		data() {
			const life = uni.getStorageSync('lifeData') || {}
			return {
				bgPath1: '/public/static/center/my-bg2.png',
				bgPath2: '',
				unsignContractNum:0,
				handlingReserveNum:0,
				// 导航栏样式控制
					unreadMsgCount: 0,      // 未读消息
					unpaidWaeCount: 0,      // 水电费待付
					unpaidRentCount: 0,     // 租金待付
					unpaidMargin: 0,//保证金待付
				navbarStyle: {
					isTransparent: true,
					bgColor: '#ffffff',
					textColor: '#000000',
					opacity: 0,
					extraIcons: [] // 右侧额外图标
				},
				// 用户信息（响应式）
				userInfo: uni.getStorageSync('userInfo') || {}
			}
		},

		computed: {
			avatar() {
				const life = uni.getStorageSync('lifeData') || {}
				const user = life.vuex_user || {}
				const raw = user.avatarUrl

				if (!raw) return raw

				return raw.includes(config.staticUrl) ?
					raw :
					config.staticUrl + raw
			},
			staticHost() {
				return this.$config.staticUrl
			},
			user() {
				return this.userInfo
			}

		},

		onLoad() {
			uni.$on('updateAvatar', () => {
				this.updateAvatar();
			})
			
		},

		onUnload() {
			uni.$off('updateAvatar')
		},
		async onShow() {
			try {
				// await this.$checkToken(this.$getToken())
				this.loadUserInfo()
				// this.countHandlingReserve()
				// this.countUnHandleContract()
				// this.countUnpayRentBills()
				// this.countUnpayWaeBills()
				// this.countUnreadMsg()
				// this.countUnpaidRentMargin()
			} catch (e) {
				return
			}
		},

		methods: {
			loadUserInfo(){
				let userInfo = uni.getStorageSync('userInfo');
				if(!userInfo) {
					console.log("缓存中用户信息为空")
					return
				}
				console.log(userInfo)
				console.log("查询用户信息")
				let url = `/login/userInfo`;
				this.$u.get(url, {}, {
					'WT': this.$getToken(),
					'USERTYPE': userInfo.userType
				}).then(obj => {
					if(obj.flag){
						console.log("更新缓存中用户信息")
						const newUserInfo = {
						  userType: obj.data.userType,
						  oaAuth: obj.data.oaAuth,
						  cusNo: obj.data.cusNo,
						  userName: obj.data.userName,
						  openId: obj.data.openId,
						  subscribe: obj.data.subscribeMsg
						}
						uni.setStorageSync('userInfo', newUserInfo)
						// 更新响应式数据
						this.userInfo = newUserInfo
					}
				});

			},
			logout() {
				this.$u.vuex('vuex_token', '');
				this.$u.vuex('vuex_user', {});
				this.$u.route('/pages/login/login');
			    uni.removeStorageSync('userInfo');
			},

			toMessage() {
				this.$u.route('/pages-biz/message/message')
			},

			toSetting() {
				this.$u.route('/pages-biz/profile/setting')
			},

			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "18720989281"
				});
			},
			clickNav(url) {
				if (url) {
					this.$u.route({
					    url
					});
				} else {
					this.$mytip.toast('敬请期待')
				}
			},

			updateAvatar() {
				// 触发 computed 自动更新
				this.$forceUpdate()
			},
			countUnHandleContract(){
				this.$u.get(`/contract/countUnsign`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unsignContractNum = res.data
					}
				})
			},
			countHandlingReserve(){
				this.$u.get(`/reservate/countHandling`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.handlingReserveNum = res.data
					}
				})
			},
			countUnreadMsg(){
				this.$u.get(`/message/countUnread`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unreadMsgCount = res.data
					}
				})
			},
			countUnpayRentBills(){
				this.$u.get(`/bill/countUnpayRentBills`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unpaidRentCount = res.data
					}
				})
			},
			countUnpaidRentMargin(){
				this.$u.get(`/bill/countUnpaidMargin`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unpaidMargin = res.data
					}
				})
			},
			countUnpayWaeBills(){
				this.$u.get(`/bill/countUnpayWaeBills`, {},{
				  WT: this.$getToken()
				}).then(res => {
					if(res.flag){
						this.unpaidWaeCount = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-center {
		padding-top: 175rpx;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: 750rpx 731rpx;
		min-height: 100vh;
	}

	/* 用户信息头 */
	.user-header {
		padding: 20rpx 40rpx 40rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.user-info {
		margin-left: 37rpx;
		flex: 1;
	}

	.user-name {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.name-text {
		font-size: 38rpx;
		font-weight: 700;
		color: #2D2B2C;
		margin-right: 16rpx;
	}

	.user-type-icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 8rpx;
	}

	.auth-tag {
		font-size: 26rpx;
		color: #86868C;
		padding: 8rpx 12rpx;
	}

	.user-type {
		font-size: 26rpx;
		color: #86868C;
	}

	.msg-setting {
		display: flex;
		gap: 20rpx;
	}

	.contract-view {
		width: 96%;
		margin: 0 auto;
		background-repeat: round;
		border-radius: 10rpx;
	}

	/* 合同和预约卡片 */
	.contract-appointment {
		display: flex;
		gap: 30rpx;
		padding: 15rpx;
	}

	.card {
		flex: 1;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 160rpx;
	}

	.card-left {
		flex: 1;
	}

	.card-title {
		display: flex;
		align-items: center;
		font-size: 35rpx;
		font-weight: 700;
		color: #222222;
		margin-bottom: 16rpx;
	}

	.arrow-icon {
		margin-left: 5rpx;
	}

	.card-info {
		display: flex;
		flex-direction: column;
	}

	.card-type {
		font-size: 26rpx;
		color: #86868C;
		margin-bottom: 8rpx;
	}

	.card-number {
		font-size: 48rpx;
		font-weight: 600;
		color: #258AE6;
	}

	.card-right {
		display: flex;
		align-items: center;
	}

	.card-icon {
		width: 120rpx;
		max-height: 100rpx;
	}

	/* 我的服务 */
	.my-service {
		margin-top: 50rpx;
		padding: 30rpx 40rpx;
		margin-bottom: 30rpx;
	}

	.service-title {
		font-size: 40rpx;
		font-weight: 700;
		color: #222222;
		margin-bottom: 30rpx;
	}

	.service-list {
		display: flex;
		flex-wrap: wrap; /* 关键：自动换行 */
		gap: 60rpx;
	}

	.service-item {
		width: 18%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.service-icon {
		// margin-bottom: 16rpx;
	}

	.service-icon image {
		width: 70rpx;
		height: 70rpx;
	}

	.service-name {
		font-size: 24rpx;
		color: #222222;
	}

	/* 常用工具 */
	.common-tools {
		width: 96%;
		margin: 0 auto;
		padding: 30rpx 40rpx;
	}

	.tools-title {
		font-size: 40rpx;
		font-weight: 700;
		color: #222222;
		margin-bottom: 30rpx;
	}

	.tools-list {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tool-item {
		display: flex;
		align-items: center;
		padding: 28rpx 24rpx;

		&:active {
			background-color: #f8f8f8;
		}
	}

	.tool-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}

	.tool-center {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.tool-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 6rpx;
	}

	.tool-desc {
		font-size: 24rpx;
		color: #999;
	}
	.badge-wrapper {
		position: relative;
		display: inline-block;
		width: 80rpx;   // 对应 image 尺寸
		height: 70rpx;  // 对应 image 尺寸
	}
	/* 红点角标 */
	.badge {
		position: absolute;
		top: -10rpx;
		right: -14rpx;
		min-width: 32rpx;
		height: 32rpx;
		padding: 0 8rpx;
	
		background-color: #ff3b30;
		color: #fff;
		font-size: 20rpx;
		font-weight: 500;
	
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		box-sizing: border-box;
	}
	
	/* 消息图标特殊一点 */
	.msg-icon {
		position: relative;
	}

	.msg-icon-img {
		width: 48rpx;
		height: 48rpx;
	}
</style>