<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">{
	"layout": "tabbar",
	"style": {
		// 'custom' 表示开启自定义导航栏，默认 'default'
		"navigationStyle": "custom",
		"navigationBarTitleText": "首页"
	}
}</route>

<template>
	<view class="home-bg pb-80rpx">
		<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
				<template #left>
					<view class="flex items-center line-1 w-450rpx" @click="router.navigateTo('/bundle/account/switch')">
						<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">{{ useStore.defaultStore.name || '暂无门店信息' }}</view>
						<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
					</view>
				</template>
			</wd-navbar>
		</view>

		<view :style="{ paddingTop: navbarHeight + 'px' }">
			<view class="mt-32rpx mx-30rpx relative">
				<wd-img width="690rpx" height="240rpx" :src="`${OSS}images/store/home/image1.png`" mode="aspectFit" />

				<!-- 本月收入 -->
				<view class=" absolute top-42rpx left-46rpx w-120rpx ">
					<view class="flex flex-col justify-center items-center">
						<view class="font-400 text-26rpx text-[#825F37] leading-36rpx">本月收入</view>
						<view class="mt-42rpx">
							<price-format color="#825F37" :first-size="36" :second-size="36" :subscript-size="24" :price="statistics.month"></price-format>
						</view>
					</view>
					<view class="absolute top-20rpx left-160rpx">
						<wd-img width="6rpx" height="188rpx" :src="`${OSS}images/store/home/image2.png`" mode="aspectFit" />
					</view>
				</view>

				<!-- 下单金额 -->
				<view class="flex flex-col justify-center items-center absolute top-42rpx left-240rpx w-140rpx">
					<view class="font-400 text-26rpx text-[#825F37] leading-36rpx">下单金额</view>
					<view class="mt-26rpx">
						<price-format color="#825F37" :first-size="36" :second-size="36" :subscript-size="24" :price="statistics.today_price"></price-format>
					</view>
					<view class="font-400 text-24rpx text-[#825F37] leading-34rpx mt-10rpx">昨日￥{{ statistics.yesterday_price }}</view>
				</view>	
				
				<!-- 核销金额 -->
				<view class="flex flex-col justify-center items-center absolute top-42rpx left-420rpx w-140rpx">
					<view class="font-400 text-26rpx text-[#825F37] leading-36rpx">核销金额</view>
					<view class="mt-26rpx">
						<price-format color="#825F37" :first-size="36" :second-size="36" :subscript-size="24" :price="statistics.yan_price"></price-format>
					</view>
					<view class="font-400 text-24rpx text-[#825F37] leading-34rpx mt-10rpx">昨日￥{{ statistics.yesterday_yan_price }}</view>
				</view>
			</view>

			<!-- 菜单栏 -->
			<view class="flex justify-between mt-40rpx">
				<view class="flex flex-col justify-center items-center w-[25%]" @click="showScanMenu = true">
					<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image3.png`" mode="aspectFit" />
					<view class="font-400 text-24rpx text-[#303133] leading-34rpx">扫码验券</view>
				</view>

				<view class="flex flex-col justify-center items-center w-[25%]" @click="router.navigateTo('/bundle/finance/finance')">
					<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image4.png`" mode="aspectFit" />
					<view class="font-400 text-24rpx text-[#303133] leading-34rpx">财务管理</view>
				</view>

				<view class="flex flex-col justify-center items-center w-[25%]">
					<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image5.png`" mode="aspectFit" @click="router.navigateTo('/bundle/setmeal/setmeal')" />
					<view class="font-400 text-24rpx text-[#303133] leading-34rpx">套餐管理</view>
				</view>

				<view class="flex flex-col justify-center items-center w-[25%]" @click="router.navigateTo('/bundle/user/user-list')">
					<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image6.png`" mode="aspectFit" />
					<view class="font-400 text-24rpx text-[#303133] leading-34rpx">用户列表</view>
				</view>
			</view>

			<!-- 商家培训 -->
			<view class="bg-white rounded-16rpx px-30rpx py-28rpx mx-30rpx mt-40rpx">
				<view class="flex items-center justify-between">
					<view class="flex items-center">
						<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/store/home/image7.png`" mode="aspectFit" />
						<view class="flex items-center ml-10rpx">
							<view class="text-32rpx text-[#303133] leading-44rpx">商家培训</view>
							<view class="">
								<wd-divider vertical color="#D9D9D9"></wd-divider>
							</view>
							<view class="font-400 text-24rpx text-[#909399] leading-34rpx">商家运营赋能</view>
						</view>
					</view>
					<view class="">
						<text class="font-400 text-24rpx text-[#909399] leading-34rpx">更多</text>
						<wd-icon name="arrow-right" size="20rpx" color="#C9C9C9" class="ml-4rpx"></wd-icon>
					</view>
				</view>

				<view class="mt-30rpx">
					<view v-for="i in 4" :key="i">
						<view class="flex items-center justify-between">
							<view class="mr-26rpx">
								<view class="font-400 text-26rpx text-[#303133] leading-40rpx w-440rpx line-2">必备课，如何做好门店评价管理。客户为什么给好评？</view>
								<view class="font-400 text-22rpx text-[#909399] leading-32rpx">2025-08-09  17:21</view>
							</view>
							<view>
								<wd-img width="164rpx" height="108rpx" radius="4rpx" :src="`${OSS}images/banner1.png`" mode="aspectFit" />
							</view>
						</view>
						<view class="mt-22rpx mb-30rpx" v-if="i !== 4">
							<wd-gap bg-color="#F6F7F9" height="2rpx"></wd-gap>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 扫码验券弹出框 -->
		<wd-action-sheet v-model="showScanMenu" :actions="scanActions" @select="Index.handleSelectScanMenu" />
	</view>
</template>

<script lang="ts" setup>
	import { router } from '@/utils/tools'
	import { getStoreList, getStoreDetails, getStoreStatistics, scanVerifyCoupon } from '@/api/store'
	import { useStoreStore } from '@/store'
	import { useToast  } from 'wot-design-uni'

	const OSS = inject('OSS')
	const navbarHeight = inject('navbarHeight')
	const useStore = useStoreStore()
	const toast = useToast()

	// 扫码验券弹出框
	const showScanMenu = ref<boolean>(false)
	const scanActions = ref([
		{
			name: '扫码验券',
		},
		{
			name: '输入券码',
		},
		{
			name: '验券记录',
		}
	])

	// 门店列表
	const storeList = ref<Array<any>>([])
	const defaultStore = ref<{ id: number; name: string; index: number }>({
		id: 0,
		name: '',
		index: 0
	})
	const store = ref<any>({})
	const statistics = ref({
		month: 0, // 本月数据
		today_price: 0, // 今日收入
		yan_price: 0, // 验券
		yesterday_price: 0, // 昨日收入
		yesterday_yan_price: 0 // 昨日验券
	})

	onShow(() => {
		// 初始化页面数据
		Index.handleInit()
	})

	onLoad(async() => {

	})

	const Index = {
		handleInit: async() => {
			await Index.handleGetStoreList()
			await Index.handleGetStoreDetails()
			await Index.handleGetStoreStatistics()
		},

		/**
		 * 获取门店列表
		 */
		handleGetStoreList: async() => {
			const storeLists = await getStoreList()
			// 保证 storeList.value 一定为数组
			storeList.value = Array.isArray(storeLists.list) ? storeLists.list : Object.values(storeLists.list || {})
			if (storeList.value.length > 0) {
				useStore.setStoreList(storeList.value)

				// 如果没有设置默认门店的话则设置第一个门店为默认门店
				console.log("🚀 ~ useStore.defaultStore:", useStore.defaultStore)
				if (useStore.defaultStore.id == 0) {
					useStore.setDefaultStore({
						id: storeList.value[0].id,
						name: storeList.value[0].name,
						index: 0
					})
				}
			}
		},  

		/**
		 * 获取门店详情
		 */
		handleGetStoreDetails: async() => {
			if (!defaultStore.value) return
			const storeDetails = await getStoreDetails(useStore.defaultStore.id)
			store.value = storeDetails.details
		},

		/**
		 * 获取门店统计数据
		 */
		handleGetStoreStatistics: async() => {
			if (!defaultStore.value) return
			const res = await getStoreStatistics(useStore.defaultStore.id)
			statistics.value = res.result
			console.log("🚀 ~ statistics:", statistics)
		},

		/**
		 * 选择扫码验券菜单
		 */
		handleSelectScanMenu: (item: { item: { name: string }}) => {
			if (item.item.name === '扫码验券') {
				Index.handleScanCode()
			} else if (item.item.name === '输入券码') {
				const storeName = '茶址24小时智能茶室(中新店)'
				router.navigateTo(`/bundle/store/verify-code?storeName=${storeName}`)
			} else if (item.item.name === '验券记录') {
				router.navigateTo('/bundle/store/verify-record')
			}
		},

		/**
		 * 扫码验券
		 */
		handleScanCode: () => {
			uni.scanCode({
				success: (res) => {
					toast.loading({
						msg: '验券中...'
					})
					try {
						scanVerifyCoupon(res.result, useStore.defaultStore.id).then((res) => {
							Index.handleGetStoreStatistics()
							toast.close()
							toast.info({
								msg: '验券成功',
								duration: 1500
							})
						}).catch((error) => {
							toast.close()
							return false
						})
					} catch(e) {
						toast.close()
						return false
					}
				},
				fail: (err) => {
					console.log('scanCode err:', err)
				}
			})
		}
	}
</script>

<style lang="scss">
page {
	background-color: $cz-page-background;
}

.home-bg {
	background-color: $cz-page-background;
	background-image: url(#{$OSS}images/home/home_bg.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

.rounded {
	border-radius: 20rpx 0rpx 20rpx 0rpx;
}

.ele-center {
	left: 50%;
	transform: translateX(-50%);
}
</style>
