<template>
	<view>

		<view class="my-data">
			<view class="my-data-mounth">
				<cardTitle :cardTitle="nounthName"></cardTitle>
				<cardData :cardData="nounthData"></cardData>
			</view>
		</view>

		<view class="my-data">
			<view class="my-data-total">
				<cardTitle :cardTitle="totalName"></cardTitle>
				<cardData :cardData="totalData"></cardData>
			</view>
		</view>

		<view class="bottom box-size child" :style="{ borderRadius: '16rpx' }" >
			<up-parse :content="configList.cumulative_data_statement.paramValueArea" containerStyle="{
				color: '#A55822',
				fontSize: '22rpx',
				lineHeight: '29rpx',
			}"></up-parse>
		</view>
		
	</view>

</template>

<script setup>
	import cardTitle from '../../components/cardTitle.vue'
	import cardData from '../../components/cardData.vue'
	import {
		ref,
		reactive
	} from "vue"
	import { useStore } from 'vuex'

	const store = useStore()

	const configList = computed(() => {
		return store.getters.configList
	})
	
	const nounthName = ref('当月数据')
	const totalName = ref('累计数据')
	const nounthData = reactive([{
			title: '当月注册用户',
			num: "0个"
		},
		{
			title: '当月下单用户',
			num: "0个"
		},
		{
			title: '当月有效用户',
			num: "0个"
		},
	])
	const totalData = reactive([{
			title: '累计注册用户',
			num: "0个"
		},
		{
			title: '累计下单用户',
			num: "0个"
		},
		{
			title: '累计有效用户',
			num: "0个",
			color:'red'
		},
	])
</script>

<style scoped lang="scss">
	@import "../index.scss";
</style>