<route lang="jsonc" type="page">{
	"layout": "tabbar",
	"style": {
		"navigationStyle": "custom"
	}
}</route>

<script lang="ts" setup>
import type { IUserResult } from '@/api/types/user'
import { getUserInfo } from '@/api/user'
import { useUserStore } from '@/store'
import { router } from '@/utils/tools'

const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')

// 登录信息相关
const user = ref<IUserResult>({
	id: 0,
	sn: 0,
	sex: '未知',
	account: '',
	nickname: '',
	real_name: '',
	avatar: '',
	collect_count: 0,
	coupon_count: 0,
	create_time: '',
	has_auth: false,
	has_password: false,
	member: 0,
	mobile: '',
	user_money: '0.00',
	version: '',
})
const isLogin = ref<boolean>(false)

// 客服电话
const showServiceMobile = ref<boolean>(false)
const sheetMenu = ref<{ name: string }[]>([])

// 门店信息
const storeInfo = ref({
	douyin_uid: '236598984587',
	address: '上海浦东新区新金桥路58号新银东大厦 15楼F室',
	business_hours: '08:00-22:00',
	contact_phone: '021-8888888',
})

// 门店媒体列表（视频/图片）
const storeMediaList = ref([
	{ type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
	{ type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
	{ type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
	{ type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
	{ type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
	{ type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
])

// 格式化账号显示（152****3412格式）
function formatAccount(account: string) {
	if (!account)
		return ''
	if (account.length <= 7)
		return account
	return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
}

onShow(() => {
	const userStore = useUserStore()
	isLogin.value = userStore.isLoggedIn
	console.log('🚀 ~ isLogin.value:', 1)
	if (isLogin.value) {
		console.log('🚀 ~ isLogin.value:', 3)
		// 获取用户详情信息接口
		getUserInfo().then((res) => {
			user.value = res
		})
	}
	else {
		console.log('🚀 ~ isLogin.value:', 4)
		Object.keys(user.value).forEach((key) => {
			user.value[key] = ''
		})
	}
})

onLoad(() => {
	uni.$on('clearUser', () => {
		console.log('🚀 ~ isLogin.value:', 2)

		const userStore = useUserStore()
		isLogin.value = userStore.isLoggedIn

		Object.keys(user.value).forEach((key) => {
			user.value[key] = ''
		})
	})
})

onUnload(() => {
	uni.$off('clearUser')
})

const My = {
	// 跳转到个人信息
	handleToProfile: () => {
		if (!isLogin.value) {
			router.navigateTo('/bundle/profile/profile')
		}
		else {
			router.navigateTo('/pages/login/login')
		}
	},

	// 点击显示客服电话
	handleShowService: () => {
		showServiceMobile.value = true
		sheetMenu.value = [
			{ name: '400-800-8888' },
		]
	},

	// 选择菜单-拨打客服电话
	handleSelectMenu: (item: any) => {
		uni.makePhoneCall({
			phoneNumber: item.item.name,
		})
	},

	// 跳转到设置页面
	handleToSettings: () => {
		// TODO: 跳转到设置页面
		router.navigateTo('/bundle/store/setting')
	},

	// 预览媒体（视频/图片）
	handlePreviewMedia: (index: number) => {
		const item = storeMediaList.value[index]
		if (item.type === 'video') {
			// TODO: 播放视频
			console.log('播放视频', item.url)
		}
		else {
			// 预览图片
			const urls = storeMediaList.value
				.filter(i => i.type === 'image' && !i.overlay)
				.map(i => i.url)
			uni.previewImage({
				current: index,
				urls,
			})
		}
	},

	handleToWallet: () => {
		if (!isLogin.value) {
			router.navigateTo('/bundle/wallet/wallet')
		} else {
			router.navigateTo('/pages/login/login')
		}
	},
}
</script>

<template>
	<view>
		<view class="home-bg fixed left-0 top-0 w-[100%]"
			:style="{ backgroundImage: `url('${OSS}images/store/my/image2.png')` }">
			<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
				<template #left>
					<view class="ml-16rpx flex items-center"/>
				</template>
				<template #right>
					<view class="right-slot mr-16rpx">
						<view class="mr-16rpx" @click="My.handleToSettings">
							<wd-icon name="setting" color="#fff" size="16px" />
						</view>
					</view>
				</template>
			</wd-navbar>
		</view>

		<view class="pb-0rpx" :style="{ paddingTop: `${navbarHeight}px` }">
			<!-- 账号昵称显示 -->
			<view class="user-info-bg relative z-10 ml-30rpx mr-30rpx flex items-center"
				:style="{ backgroundImage: `url('${OSS}images/store/my/image2.png')` }">
				<view class="relative z-10">
					<wd-img width="120rpx" height="120rpx" :src="(isLogin && user.avatar) ? user.avatar : `${OSS}images/store/my/image1.png`"
						mode="aspectFill" round />
				</view>
				<view class="relative z-10 ml-22rpx flex flex-1 items-center justify-between">
					<view class="flex-1" @click="My.handleToProfile">
						<view class="ml-8rpx flex items-center text-36rpx leading-50rpx" style="color: #fff;">
							{{ isLogin ? user.nickname : '立即登录' }}
							<wd-icon v-if="isLogin" name="arrow-right" size="24rpx" color="#fff" class="ml-8rpx" />
						</view>
						<view v-if="isLogin" class="ml-8rpx mt-8rpx text-24rpx leading-34rpx" style="color: #fff;">
							账号: {{ formatAccount(user.account || user.mobile) }}
						</view>
					</view>
					<view class="relative ml-20rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
						<view class="h-148rpx w-300rpx">
							<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`"
								mode="aspectFill" />
						</view>
						<view class="absolute bottom-12rpx left-24rpx">
							<view class="flex items-center">
								<view class="text-30rpx text-[#303133] font-bold leading-36rpx">
									￥{{ isLogin ? user.user_money : '0.00' }}
								</view>
							</view>
							<view class="ml-0rpx mt-4rpx text-20rpx text-[#909399] leading-28rpx" @click="My.handleToWallet">
								钱包余额
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 门店信息区域 -->
			<view class="store-info-card mt-28rpx bg-white py-30rpx pl-30rpx">
				<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
					门店茶址24小时智能茶室(中新店)地址
				</view>
				<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
					<text class="w-140rpx">抖音uid:</text>
					<text class="flex-1 text-[#000]">{{ storeInfo.douyin_uid || '236598984587' }}</text>
				</view>
				<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
					<text class="w-140rpx">门店地址:</text>
					<text class="flex-1 text-[#000]">{{ storeInfo.address || '上海浦东新区新金桥路58号新银东大厦 15楼F室' }}</text>
				</view>
				<view class="relative mb-16rpx flex items-center">
					<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
						<text class="w-140rpx">营业时间:</text>
						<text class="flex-1 text-[#000]">{{ storeInfo.business_hours || '08:00-22:00' }}</text>
					</view>
					<view class="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx"
						:style="{ backgroundImage: `url('${OSS}images/store/my/image3.png')` }"
						@click="router.navigateTo('/bundle/store/edit-store')">
						<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/store/my/image4.png`" class="mr-8rpx" />
						<text class="text-24rpx text-[#fff]">修改</text>
					</view>
				</view>
				<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
					<text class="w-140rpx">联系电话:</text>
					<text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '021-8888888' }}</text>
				</view>
			</view>

			<!-- 门店视频/图片区域 -->
			<view class="bg-white px-30rpx">
				<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
					门店视频/图片
				</view>
				<view class="grid grid-cols-3 gap-16rpx">
					<view v-for="(item, index) in storeMediaList" :key="index"
						class="relative aspect-square w-full overflow-hidden rounded-8rpx"
						@click="My.handlePreviewMedia(index)">
						<wd-img width="100%" height="100%" :src="item.url" mode="aspectFill" />
						<!-- 视频播放图标 -->
						<view v-if="item.type === 'video'" class="absolute inset-0 flex items-center justify-center">
							<wd-img width="60rpx" height="60rpx" :src="`${OSS}images/store/my/image5.png')`" />
						</view>
						<!-- +8 遮罩 -->
						<view v-if="item.overlay"
							class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
							<text class="text-32rpx text-[#fff] font-bold">+{{ item.overlay }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 客服电话 -->
		<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消"
			@close="showServiceMobile = false" @select="My.handleSelectMenu" />
	</view>
</template>

<style lang="scss">
page {
	background: #fff;
}

.home-bg {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top center;
	min-height: 450rpx;
}

.user-info-bg {
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	min-height: 200rpx;
}

.store-info-card {
	position: relative;
	z-index: 10;
	border-radius: 32rpx 32rpx 0 0;
}

.modify-btn {
	position: absolute;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	min-width: 160rpx;
	height: 90rpx;
	justify-content: space-around;
}

.right-slot {
	padding-right: v-bind(rightPadding);
}
</style>
