<template>
	<view class="content pt-[44px]">
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

		<view class="w-full">
			<wd-navbar fixed safeAreaInsetTop :leftText="user_info?.info?.name || '商城首页'">
				<template #right>
					<wd-icon @click="utils.toUrl('/store/setup/index')" name="setting" size="22px"></wd-icon>
				</template>
			</wd-navbar>
		</view>

		<view bg-color="#f7f8fa" class="w-full grid grid-cols-3 gap-3 px-3 my-4">

			<view @click="utils.toUrl('/store/user/list')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">用户管理</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="user opacity-80" class="opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view>

			<!-- <view @click="utils.toUrl('/store/user/memberList')"
				class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">等级管理</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="layers opacity-80" class="opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view> -->

			<view @click="utils.toUrl('/store/cat/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">分类管理</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="chat opacity-80" class="opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view>

			<view @click="utils.toUrl('/store/goods/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">商品管理</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="goods opacity-80" class="opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view>

			<view @click="utils.toUrl('/store/order/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">订单管理</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="gift opacity-80" class="opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view>

			<view @click="utils.toUrl('/store/check/list')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">核销记录</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="phone" class="opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view>

			<view @click="utils.toUrl('/store/inpersonPay/index')"
				class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">当面付订单</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="phone" class="opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view>





			<!-- <view @click="utils.toUrl('/store/order/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
				style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
				<view class="font-bold">订单管理</view>
				<view class="h-0.5 w-5 mt-0.5 bg-white"></view>

				<view class="flex justify-end">
					<div class="rotate-[-28deg] translate-y-3 translate-x-5">
						<wd-icon name="gift opacity-80" size="42px"></wd-icon>
					</div>
				</view>
			</view> -->



		</view>

		<view style="transition: 1s;" class="w-full h-full bg-white pt-4 rounded-tr-3xl rounded-tl-3xl shadow-lg oh">
			<view class="order mb-2">
				<wd-grid v-show="oneLine.ok">
					<wd-grid-item @click="utils.toUrl('/store/user/list')" icon="round" :text="`用户 (${oneLine.user_count})`" />
					<wd-grid-item @click="utils.toUrl('/store/goods/index')" icon="round" :text="`商品 (${oneLine.goods_count})`" />
					<wd-grid-item @click="utils.toUrl('/store/goods/index')" icon="round"
						:text="`售罄 (${oneLine.empty_stock_count})`" />
					<wd-grid-item @click="utils.toUrl('/store/order/index')" icon="round" :text="`订单 (${oneLine.order_count})`" />
				</wd-grid>
			</view>
		</view>

		<view class="flex-1 bg-white p-2 pb-4">
			<!-- <div class="name mb-2">订单数据</div> -->
			<view class=" p-2 rounded-md">
				<div class="rounded-md overflow-hidden">
					<wd-tabs @change="getOrderProfit">
						<wd-tab :title="`今天`" :name="1"></wd-tab>
						<wd-tab :title="`本周`" :name="2"></wd-tab>
						<wd-tab :title="`本月`" :name="3"></wd-tab>
						<wd-tab :title="`本年`" :name="4"></wd-tab>
					</wd-tabs>
				</div>

				<div class="grid grid-cols-2 gap-2 my-4">
					<div @click="utils.toUrl('/store/order/index?s=' + (index + 1))"
						class="item rounded-1xl bg-slate-50 p-2  flex justify-between" style="font-size: 24rpx;"
						v-for="(item, index) of orderProfit.categories">
						{{ item }}

						<text>{{ orderProfit.series[0].data[index] }}</text>
					</div>

					<div @click="utils.toUrl('/store/afterSale/index')"
						class="item rounded-1xl bg-slate-50 p-2  flex justify-between" style="font-size: 24rpx;">
						售后订单
						<text>∞</text>
					</div>


				</div>

				<bar :barData="orderProfit"></bar>
			</view>
		</view>

		<view class="flex-1 bg-white p-2 pb-4 ">
			<view class=" p-2 rounded-md">
				<div class="rounded-md overflow-hidden">
					<wd-tabs @change="getOrderGood">
						<wd-tab :title="`今天`" :name="1"></wd-tab>
						<wd-tab :title="`本周`" :name="2"></wd-tab>
						<wd-tab :title="`本月`" :name="3"></wd-tab>
						<wd-tab :title="`本年`" :name="4"></wd-tab>
					</wd-tabs>
				</div>

				<div class="grid grid-cols-2 gap-2 my-4">
					<div class="item rounded-1xl bg-slate-50 p-2  flex justify-between" style="font-size: 24rpx;"
						v-for="(item, index) of orderGood.categories">
						{{ item }}

						<text>{{ orderGood.series[0].data[index] }}</text>
					</div>
				</div>

				<bar :barData="orderGood"></bar>
			</view>
		</view>

		<view class="bg-white h-[80px]"></view>

		<view class="fixed left-2 right-2 bottom-4 z-50">
			<myTabbar></myTabbar>
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue';
import utils from '@/utils/utils.js';
import index from '@/api/store/index.js';
import myTabbar from "../components/myTabbar/index.vue";
import bar from "../components/bar/bar.vue";
import kevyloading from "@/components/kevy-loading/kevy-loading";

/** 
 * @type {Ref<boolean>} 
 * 控制页面加载状态的 Ref
 */
const loading = ref(false);

/**
 * 从本地存储中获取用户信息
 */
const user_info = uni.getStorageSync("user_info");

/**
 * @type {Ref<Object>} 
 * 存储一行数据的 Ref
 */
const oneLine = ref({});

/**
 * 获取一行数据的函数
 */
const getOneLine = () => {
	index.dataCount.oneLine().then(res => {
		oneLine.value = res.data;
		oneLine.value.ok = true;
	});
};

// 初始化调用获取一行数据
getOneLine();

/**
 * @type {Ref<Object>} 
 * 存储订单利润数据的 Ref
 */
const orderProfit = ref({});

/**
 * 获取订单利润数据的函数
 * @param {Object} e - 包含索引的对象
 */
const getOrderProfit = (e) => {
	loading.value = true;
	index.dataCount.orderProfit({
		date: e.index + 1
	}).then(res => {
		if (res.code === 0) {
			const statusData = res.data.reduce((obj, cur) => {
				obj[cur.status] = cur;
				return obj;
			}, {});

			const arr = [
				{ name: "未付款订单", data: statusData[0]?.count || 0 },
				{ name: "待发货订单", data: statusData[1]?.count || 0 },
				{ name: "已发货订单", data: statusData[2]?.count || 0 },
				{ name: "已完成订单", data: statusData[3]?.count || 0 },
				{ name: "已取消订单", data: statusData[4]?.count || 0 }
			];

			orderProfit.value.categories = arr.map(item => item.name);
			orderProfit.value.series = [
				{ name: "订单数据", data: arr.map(item => item.data) }
			];

			loading.value = false;
			console.log(orderProfit.value);
		}
	});
};

// 初始化调用获取订单利润数据
getOrderProfit({ index: 0 });

/**
 * @type {Ref<Object>} 
 * 存储订单商品数据的 Ref
 */
const orderGood = ref({});

/**
 * 获取订单商品数据的函数
 * @param {Object} e - 包含索引的对象
 */
const getOrderGood = (e) => {
	loading.value = true;
	index.dataCount.orderGood({
		date: e.index + 1
	}).then(res => {
		if (res.code === 0) {
			const payTypeData = res.data.reduce((obj, cur) => {
				obj[cur.pay_type] = cur;
				return obj;
			}, {});

			const totalPrice = (
				(Number(payTypeData[1]?.pay_price) || 0) +
				(Number(payTypeData[2]?.pay_price) || 0) +
				(Number(payTypeData[3]?.pay_price) || 0)
			);

			const arr = [
				{ name: "总成交金额", data: totalPrice || 0 },
				{ name: "支付宝支付", data: payTypeData[1]?.pay_price || 0 },
				{ name: "微信支付", data: payTypeData[2]?.pay_price || 0 },
				{ name: "余额支付", data: payTypeData[3]?.pay_price || 0 },
			];

			orderGood.value.categories = arr.map(item => item.name);
			orderGood.value.series = [
				{ name: "交易数据", data: arr.map(item => item.data) }
			];

			loading.value = false;
			console.log(orderGood.value);
		}
	});
};

// 初始化调用获取订单商品数据
getOrderGood({ index: 0 });


</script>

<style lang="scss" scoped>
.content {
	padding-top: 44px;
}
</style>
