<template>
	<view class="pages-bg-1 pages-box">
		<uv-navbar autoBack title="店铺中心" placeholder :bgColor="NavBgColor" />

		<ShopCard :shop-vo="BusinessShopVo" />

		<!-- 经营数据 -->
		<BusinessData :value-label="BusinessDataValue" :business-id="businessId" />
		<!-- 今日订单 -->
		<TodayOrder :business-id="businessId"/>
		<!-- 近七日交易趋势 -->
		<LineChart :vo="DealTrendData" title="近七日交易趋势" />
		<!-- 近七日订单趋势 -->
		<!-- :yAxisConfig="{allowNegative:false,min: 0}" -->
		<LineChart :vo="OrderTrendData" title="近七日订单趋势" />
	</view>
</template>

<script lang="ts" setup>
	import { ref, unref, nextTick } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { usePages } from "@/hooks/usePages.ts";
	import BusinessData from "@/components/ShopData/BusinessData.vue";
	import TodayOrder from "@/components/ShopData/TodayOrder.vue";
	import LineChart from "@/components/ShopData/LineChart.vue";
	import { add } from "@/util/decimal.js";
	import { SevenDay } from "@/hooks/SevenDay.ts";
	import { getBusinessInfoId_Api } from "@/api/shop.js";
	const { NavBgColor } = usePages();


	const BusinessDataValue = [
		{
			label: '交易额',
			tag: '￥',
			key: 'actualReceivePayment'
		},
		{
			label: '订单数',
			fn: (row : any) => {
				const { onlineOrderNum, shopOrderNum } = row || {};
				return add(onlineOrderNum || 0, shopOrderNum || 0)
			}
		},
		{
			label: '积分消费',
			key: 'userUsePoint',
		},
		{
			label: '退款金额',
			fn: (row : any) => {
				const { onlineRefundOrderAmount, shopRefundOrderAmount } = row || {};
				return add(onlineRefundOrderAmount || 0, shopRefundOrderAmount || 0)
			}
		},
		{
			label: '退款订单',
			fn: (row : any) => {
				const { shopRefundOrderNum, onlineRefundOrderNum } = row || {};
				return add(shopRefundOrderNum || 0, onlineRefundOrderNum || 0)
			}
		},
		{
			label: '积分订单',
			key: 'pointVerifiedOrderNum',
		}
	]

	const businessId = ref(null);
	const { DealTrendData, OrderTrendData, getLineChart } = SevenDay(businessId.value, 7, false);

	onLoad((opt) => {
		businessId.value = opt.businessId;
		nextTick(() => {
			getLineChart(businessId.value);
		});
		getBusinessInfoId()
	})




	const BusinessShopVo = ref({});
	const getBusinessInfoId = async () => {
		try {
			const { data } = await getBusinessInfoId_Api(unref(businessId));
			BusinessShopVo.value = data || {};
		} catch (error) {
			BusinessShopVo.value = {}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-box {
		padding: 0 30rpx;
	}
</style>