<template>
	<container-base ref="_containerBase">
		<view class="content column">

			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<text>加载中...</text>
			</view>

			<view v-if="userInfo != null" class="row"
				style="margin-top: 150rpx; align-items: center; margin-left: 40rpx;">
				<image :src="userInfo.avatarImage" style="width: 80rpx; height: 80rpx;  border-radius: 50%;" mode="">
				</image>
				<view class="column" style="margin-left: 50rpx; font-size: 24rpx;">
					<view class="row" @click="toEditInfo()" style="align-items: center;">
						<text>{{ userInfo.nickName }}</text>
					</view>
					<text style="margin-top: 10rpx;">UID：{{ userInfo.id }}</text>

				</view>
			</view>

			<view v-else class="row" style="margin-top: 150rpx; align-items: center; margin-left: 40rpx;">
				<image src="@@:app/nouser.png" style="width: 80rpx; height: 80rpx;  border-radius: 50%;" mode="">
				</image>
				<view class="column" style="margin-left: 50rpx; font-size: 24rpx;">
					<view class="row" @click="toEditInfo()" style="align-items: center;">
						<text>未登录</text>
					</view>
					<text style="margin-top: 10rpx; color: #999;" @click="toLogin()">点击登录</text>
				</view>
			</view>
			<view style="height: 15rpx;"></view>
			<view class="column" v-if="myUseReservation.length == 0"
				style="width: 90%; border-radius: 30rpx; background: linear-gradient(to bottom, #D7F0DD, #FFFFFF); box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">
				<!-- 无预约状态 -->
				<view class="row" style="align-items: center; margin: 20rpx;">
					<image src="@@:app/static/no_content.png" style="width: 150rpx; height: 150rpx;" mode=""></image>
					<text style="margin-left: 40rpx;">当前没有预约</text>
				</view>
			</view>
			<view v-else style="overflow: auto;max-height: 600rpx;">

				<view class="column " style="width: 90%;margin: 0 auto;" v-for="(item, index) in myUseReservation"
					:key="index">
					<reservation-item :reservation="item" @evaluate="_containerBase.openEvaluatePop"
						@click="_containerBase.openReservationPopup" @qianDao="_containerBase.openQianDaoPop" />
				</view>
			</view>
			<view v-if="userInfo != null" class="column"
				style="width: 90%; border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">


				<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;"
					@click="toMyRecord()">
					<text style="font-size: 24rpx;">我的信誉</text>
					<text v-if="userInfo.credit_score > 0"
						style="font-size: 34rpx; color: #ED3535; margin-left: 10rpx;">{{
							userInfo.credit_score }}</text>
					<text v-else style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评分</text>
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx;">牌品</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="userInfo.play_level" />
				</view>

				<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx;">牌技</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="userInfo.skills_level" />
				</view>

				<text style="font-size: 24rpx; margin: 20rpx;">鸽子数 {{ userInfo.dove_count }} 次</text>

			</view>

			<view v-else class="column"
				style="width: 90%;  border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); margin: 40rpx auto 0;">
				<view class="row" style="align-items: center; margin-top: 30rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx;">我的评分</text>
					<text style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评分</text>
					<text style="font-size: 24rpx; margin-left: 180rpx;">我的信誉</text>
					<text style="font-size: 24rpx; color: #999; margin-left: 10rpx;">未评级</text>
				</view>
				<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx;">牌品</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" />
				</view>
				<view class="row" style="align-items: center; margin-top: 20rpx; margin-left: 20rpx;">
					<text style="font-size: 24rpx;">牌技</text>
					<uni-rate style="margin-left: 20rpx;" :readonly="true" />
				</view>
				<text style="font-size: 24rpx; margin: 20rpx;">鸽子数 0次</text>
			</view>


			<view class="column"
				style="width: 90%; margin: 40rpx auto 0;  border-radius: 30rpx; background-color: #FFFFFF; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);">

				<text style="font-size: 30rpx; margin-top: 26rpx; margin-left: 36rpx;">常用功能</text>

				<view class="row" style="flex-wrap: wrap; justify-content: flex-start; margin: 40rpx;">
					<view class="column" v-for="item in commonActions" :key="item.label"
						@click="handleCommonAction(item)"
						style="width: 25%; align-items: center; margin-bottom: 30rpx;">
						<image :src="item.icon" style="width: 50rpx; height: 50rpx;" mode=""></image>
						<text style="font-size: 24rpx; margin-top: 20rpx;">{{ item.label }}</text>
					</view>
				</view>
			</view>

		</view>
	</container-base>



</template>

<script setup>
import {
	userInfo,
	loadUserInfo,
	isLogin
} from '@/common/server/user'
import { navigateToAgreement } from '@/common/system/router'
import { sqInterface } from '@/common/server/interface/sq'
import ReservationEvaluate from '@/components/com/page/reservation-evaluate.vue'
import ContainerBase from '@/components/com/page/container-base.vue'
import {
	ref,
	reactive,
	onMounted
} from 'vue'
import { onShareAppMessage } from '@dcloudio/uni-app';
import { getShareConfig } from '@/common/server/config'
import ReservationItem from '@/components/com/page/reservation-item.vue'

// 响应式数据
const rateValue = ref(4.5)
const loading = ref(false)
const _containerBase = ref(null)


// 当前预约信息
const currentAppointment = ref(null)




// 常用功能 - 动态项
const commonActions = [
	{ label: '预约记录', icon: '@@:app/static/me/wodd.png', action: 'appointment' },
	{ label: '订单记录', icon: '@@:app/static/me/wodd.png', action: 'payment' },
	{ label: '常见问题', icon: '@@:app/static/me/cjwt.png', action: 'faq' },
	{ label: '黑名单', icon: '@@:app/static/me/hmd.png', action: 'blacklist' },
	{ label: '联系我们', icon: '@@:app/static/me/lxwm.png', action: 'contact' },

]

const handleCommonAction = (item) => {
	switch (item.action) {
		case 'appointment':
			toAppointment();
			break;
		case 'blacklist':
			toBlacklist();
			break;
		case 'faq':
			if (userInfo.value == null) {
				uni.navigateTo({
					url: '/pages/me/login'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/other/faq'
			});
			break;
		case 'payment':
			if (userInfo.value == null) {
				uni.navigateTo({
					url: '/pages/me/login'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/other/payment-records'
			});
			break;
		case 'contact':
			uni.navigateTo({
				url: '/pages/other/agreement?type=about'
			});
			break;
		default:
			uni.showToast({ title: '敬请期待', icon: 'none' });
			break;
	}
}

const toAppointment = () => {
	if (userInfo.value == null) {
		uni.navigateTo({
			url: '/pages/me/login'
		});
		return;
	}

	uni.navigateTo({
		url: '/pages/me/appointment-record-page'
	});
}
const toMyRecord = async () => {
	var _isLogin = await isLogin();
	if (_isLogin) {
		uni.navigateTo({
			url: '/pages/me/my-record'
		});
	} else {
		uni.navigateTo({
			url: '/pages/me/login'
		});
	}
}

const toEditInfo = () => {
	// 未登录状态，跳转到登录页面
	if (userInfo.value == null) {
		uni.navigateTo({
			url: '/pages/me/login'
		});
		return;
	}
	uni.navigateTo({
		url: '/pages/me/edit-info'
	});
}

const toBlacklist = () => {
	if (userInfo.value == null) {
		uni.navigateTo({
			url: '/pages/me/login'
		});
		return;
	}
	uni.navigateTo({
		url: '/pages/me/blacklist-page'
	});
}

const openUserPop = () => {
	// 打开用户详情弹窗的逻辑
	console.log('打开用户详情弹窗');
}

const toLogin = () => {
	uni.navigateTo({
		url: '/pages/me/login'
	});
}
const myUseReservation = ref([]);

// 加载当前预约信息 - 未登录状态
const loadCurrentAppointment = async () => {
	var _isLogin = await isLogin();
	if (!_isLogin) {
		return;
	}

	try {
		var res = await sqInterface.getMyUseReservation();
		console.log("getMyUseReservation", res);
		if (res != null) {
			// console.log("myUseReservation.value.length", myUseReservation.value.length);
			// myUseReservation.value = myUseReservation.value.splice(0, myUseReservation.value.length);
			// console.log("myUseReservation.value.length", myUseReservation.value.length);
			myUseReservation.value = res;
		}


	} catch (error) {
		console.error('加载预约信息失败:', error)
	}
}

onShareAppMessage(({ from, target, webViewUrl }) => {
	// console.log('onShareAppMessage', from, target, webViewUrl);
	var resid = 0;
	if (target != null) {
		var item = target.dataset.item;
		console.log('item', item);
		resid = item.id;
	}
	var obj = getShareConfig("pages/index/loading?id=" + resid);
	return obj
});
// 页面显示时重新加载数据（用于登录后刷新）
onShow(async () => {
	// 检查是否有登录状态
	// getUserInfoData();
	loadCurrentAppointment();
	await loadUserInfo();
})
onLoad(async () => {

	//loadCurrentAppointment();
});
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100vh;
	background-color: #F7F7F7;
}

.loading-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 20rpx 40rpx;
	border-radius: 10rpx;
	z-index: 9999;
}
</style>