BasicData.nvue

<template>
	<view>
    <CardNvue :title="t('asis.BasicAnalysis')" :auto-height="true" card-padding="28rpx 0 0" :titleStyle="{padding:'0 28rpx'}">
			<template #filter>
				<view class="filter filter-border transparent-bg" @tap="handleTapMore" v-if="showMore">
					<text class="filter_text">{{ t('app.common.more') }}</text>
					<uv-icon name="arrow-right" color="#90949D" size="24rpx" />
				</view>
			</template>
			<template #content>
				<AccountBasicData v-if="!options.storeId" :card-data="accountCardComputedList" />
				<StoreBasicData v-else :card-data="getStoreCards" :card-data-map="cardDataMap" />
			</template>
		</CardNvue>
		<uv-popup ref="morePopupRef" class="pop_more" round="16rpx">
			<view style="width: 710rpx;">
				<view class="pop_header" style="width: 100%;">
					<view style="width: 22px;"></view>
					<text class="pop_header_text">{{ t('asis.BasicAnalysis') }}</text>
					<uv-icon name="close" size="22" class="pop_header_icon" @tap="handleCloseMore"></uv-icon>
				</view>
				<view>
          <scroll-view scroll-y="true" style="height: 640rpx;">
            <AccountBasicData v-if="!options.storeId" :card-data="accountCardList" />
            <StoreBasicData v-else :card-data="storeCards" :card-data-map="cardDataMap" />
          </scroll-view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick
	} from 'vue';
	import {
		getAccountCardListApi,
		getStoreBasicDataApi
	} from '@/api'
	import {
		formatSeconds,
		getStageObj
	} from '@/utils'
	import CardNvue from './Card.nvue';
	import AccountBasicData from './AccountBasicData.nvue'
	import StoreBasicData from './StoreBasicData.nvue'
  import {
    t
  } from '@/plugins/index.js'

	const props = defineProps({
		// 集团卡片数据
		storeCards: {
			type: Array,
			default: () => []
		}
	})

	/********************* 更多 ************************/
	const morePopupRef = ref(null)
const handleTapMore = () => {
		morePopupRef.value?.open()
	}
	const handleCloseMore = ()=>{
		morePopupRef.value?.close()
	}
	const showMore = computed(() => {
		const isAccount = !options.value.storeId
		return (isAccount && accountCardList.value.length > 6) || (!isAccount && props.storeCards.length > 6)
	})

	const getStoreCards = computed(() => {
		return props.storeCards.slice(0, 6) || []
	})

	const storeChartIds = ref([])
	const initStoreCardData = () => {
		nextTick(() => {
			storeChartIds.value = props.storeCards.map(el => el.id)
			getCardDataMap()
		})
	}
	// 获取门店卡片数据·
	const cardDataMap = ref({})
	const getCardDataMap = async () => {
		try {
			const {
				data
			} = await getStoreBasicDataApi({
				orgType: 'mall',
				mallIds: options.value.storeId,
				dateType: props.unit,
				orgIds: options.value.storeId,
				startDate: options.value.startDate,
				endDate: options.value.endDate,
				chartIds: storeChartIds.value.join(',')
			})
			cardDataMap.value = data || {}
		} catch (e) {
			console.log(e);
		}
	}

	// 获取集团卡片数据
	const options = ref({})
	const accountId = ref('')
	const initAccountCardData = (params) => {
		nextTick(() => {
			accountId.value = getStageObj('account').id
			options.value = params
			getAccountCardList()
		})
	}



	// 获取集团卡片列表
	const accountCardList = ref([])
	const accountCardComputedList = computed(() => {
		return accountCardList.value?.slice(0, 4) || []
	})
	const getAccountCardList = async () => {
		try {
			const params = {
				accountId: accountId.value,
				groupId: options.value.groupId ? options.value.groupId : -1,
				endDate: options.value.endDate,
				startDate: options.value.startDate
			}
			// 测试参数
			// const params = {
			// 	accountId: 382,
			// 	groupId: -1,
			// 	endDate: '2025-05-21',
			// 	startDate: '2025-05-01'
			// }

			const {
				data
			} = await getAccountCardListApi(params)
			accountCardList.value = data || []
		} catch (e) {
			console.log(res)
		}
	}


	defineExpose({
		initAccountCardData,
		initStoreCardData
	})
</script>

<style lang="scss" scoped>
	@import '@/styles/normal.scss';
	.filter {
		flex-direction: row;
		align-items: center;

		.filter_text {
			font-size: 24rpx;
			color: #6D778F;
			margin-right: 10rpx;
		}
	}
</style>