<template>
	<view class="container">
		<view class="user-card">
			<image src="/static/tabbar/my.png" class="avatar"></image>
			<view class="info">
				<view class="nickname">{{ userInfo.nickName || 'admin' }}</view>
				<view class="welcome">欢迎回来</view>
			</view>
		</view>

		<view class="version-number">v3.2.78 </view>
		<view class="menu-list">
			<!--      <view class="menu-item" @click="toScanHistory">
        <view class="menu-left">
          <u-icon name="scan" size="20" color="#2b9939"></u-icon>
          <text class="menu-text">扫码记录</text>
        </view>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view> -->

			<view class="menu-item" @click="toMemberSelect">
				<view class="menu-left">
					<u-icon name="vip" size="20" color="#ff6b35"></u-icon>
					<text class="menu-text">开通会员</text>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>

			<view class="menu-item" @click="toDispatchManagement">
				<view class="menu-left">
					<u-icon name="list" size="20" color="#909399"></u-icon>
					<text class="menu-text">线下订单管理</text>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>

			<view class="menu-item" @click="toShelfManagement">
				<view class="menu-left">
					<u-icon name="grid" size="20" color="#3c9cff"></u-icon>
					<text class="menu-text">货架管理(开发中)</text>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
			<view class="menu-item" @click="toCloneTool">
				<view class="menu-left">
					<u-icon name="grid" size="20" color="#3c9cff"></u-icon>
					<text class="menu-text">孔网商品翻新</text>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
			<view class="menu-item" @click="getBookRecords">
				<view class="menu-left">
					<u-icon name="grid" size="20" color="#3c9cff"></u-icon>
					<text class="menu-text">上书记录</text>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
			<view class="menu-item" @click="toOrderQuery">
				<view class="menu-left">
					<u-icon name="list" size="20" color="#ff9900"></u-icon>
					<text class="menu-text">仓库订单查询</text>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>

			<!--      <view class="menu-item" @click="toSettings">
        <view class="menu-left">
          <u-icon name="setting" size="20" color="#007AFF"></u-icon>
          <text class="menu-text">设置</text>
        </view>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view> -->
		</view>

		<button class="logout-btn" type="warn" @click="logout">退出登录</button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	// Vuex 模块拆分后使用命名空间访问
	import {
		checkKwfwMember
	} from '@/components/MemberBookCheck.js'
	// 导入上书记录获取方法
	import * as bookRecords from '@/service/bookRecords.js';

	export default {
		computed: {
			...mapState('auth', ['userInfo'])
		},
		methods: {
			toScanHistory() {
				uni.navigateTo({
					url: '/pages/scan/history'
				})
			},
			toSettings() {
				uni.navigateTo({
					url: '/pages/user/settings'
				})
			},
			toMemberSelect() {
				uni.navigateTo({
					url: '/pkgUser/memberSelect'
				})
			},
			toDispatchManagement() {
				uni.navigateTo({
					url: '/pkgUser/dispatch-management'
				})
			},
			toShelfManagement() {
				// uni.navigateTo({
				//   url: '/pkgManage/shelf/management'
				// })
			},
			async toCloneTool() {
				try {
					// 检查用户是否为孔网翻新会员
					const isMember = await checkKwfwMember({
						showToast: true,
						showModal: true,
						modalTitle: '孔网翻新会员'
					});

					// 如果是会员，则跳转到孔网商品翻新页面
					if (isMember) {
						uni.navigateTo({
							url: '/pkgManage/clone-tool/index'
						});
					}
					// 如果不是会员，checkKwfwMember函数内部已经处理了提示和跳转逻辑
				} catch (error) {
					console.error('检查孔网翻新会员状态失败:', error);
					uni.showToast({
						title: '检查会员状态失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.$store.dispatch('auth/logout')
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					}
				})
			},
			async getBookRecords() {
				try {
					// 从本地存储获取手机号
					const phoneNumber = uni.getStorageSync('phoneNumber');
					if (!phoneNumber) {
						uni.showToast({
							title: '请先登录',
							icon: 'none',
							duration: 2500
						});
						return;
					}

					// 显示加载提示
					uni.showLoading({
						title: '加载中...'
					});

					try {
						// 调用获取上书记录的方法
						const records = await bookRecords.fetchBookRecords(phoneNumber);
						console.log("1111", records)
						if (!records || records.length === 0) {
							uni.showToast({
								title: '暂无上书记录',
								icon: 'none',
								duration: 2500
							});
							return;
						}

						// 跳转到上书记录页面并传递数据
						uni.navigateTo({
							url: '/pkgUser/book-records',
							success: (res) => {
								// 向打开的页面传递数据
								res.eventChannel.emit('bookRecordsData', {
									records: records
								});
							}
						});
					} finally {
						// 确保在任何情况下都隐藏加载提示
						uni.hideLoading();
					}
				} catch (error) {
					console.error('获取上书记录失败:', error);
					uni.showToast({
						title: error.message || '获取上书记录失败',
						icon: 'none',
						duration: 2500
					});
				}
			},
			toOrderQuery() {
				uni.navigateTo({
					url: '/pages/warehouse/order-query'
				})
			},
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
	}

	.user-card {
		display: flex;
		align-items: center;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.info {
		flex: 1;
	}

	.nickname {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.welcome {
		font-size: 28rpx;
		color: #999;
	}

	.menu-list {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.menu-left {
		display: flex;
		align-items: center;
	}

	.menu-text {
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.logout-btn {
		margin-top: 60rpx;
		width: 100%;
	}

	.version-number {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		font-size: 24rpx;
		color: #999;
	}
</style>