<template>
	<div class="count-sales">
		<div class="card">
			<div class="card__header">
				<span class="label">今日数优新增</span>
				<span class="value">{{ today_sum_new }}</span>
			</div>

			<div class="card__container">
				<ul class="count-sales__cop">
					<li>
						<span>总付费数</span>
						<div class="fall">
							<!-- <i class="el-icon-bottom-right"></i> -->
							<span>{{ today_sum_pay }}</span>
						</div>
					</li>

					<li>
						<span>总活跃数</span>
						<div class="rise">
							<!-- <i class="el-icon-top-right"></i> -->
							<span>{{ today_sum_active }}</span>
						</div>
					</li>
				</ul>
			</div>

			<div class="card__footer">
				<!-- <span class="label">日销售额</span>
				<span class="value">￥1298.01</span> -->
				<span>付费同比&nbsp;</span>
				<div class="rise">
					<i class="el-icon-top-right"></i>
					<span>&nbsp;{{ growth_pay }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, ref } from "vue";
export default defineComponent({
	setup() {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		const today_sum_new = ref<string>("");
		const today_sum_pay = ref<string>("");
		const today_sum_active = ref<string>("");
		const growth_new = ref<string>("");
		const growth_pay = ref<string>("");
		const growth_active = ref<string>("");

		onMounted(async () => {
			const res = await service.shuyouDataActive.queryByDay();
			// console.log(res);
			if (res.code == 1) {
				today_sum_new.value = res.data.today_sum_new;
				today_sum_pay.value = res.data.today_sum_pay;
				today_sum_active.value = res.data.today_sum_active;
				growth_new.value = res.data.growth_new;
				growth_pay.value = res.data.growth_pay;
				growth_active.value = res.data.growth_active;
			}
		});

		return {
			today_sum_new,
			today_sum_pay,
			today_sum_active,
			growth_new,
			growth_pay,
			growth_active
		};
	}
});
</script>

<style lang="scss" scoped>
.count-sales {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;

		li {
			display: flex;
			list-style: none;
			flex: 1;
			color: #d8d8d8;

			.fall,
			.rise {
				display: flex;
				align-items: center;
				margin-left: 10px;
			}

			.fall {
				color: #13ae7c;
			}

			.rise {
				color: #f21e37;
			}
		}
	}
}
</style>
