<template>
	<el-row>
		<el-col :span="24">
			<el-card>
				<template #header>
					<div class="card-header">
						<span>平台情况</span>
					</div>
				</template>
				<el-row :gutter="20">
					<el-col v-for="item in state.list" :span="12" :key="item.name">
						<div class="list-box">
							<p class="first-p">{{ item.name }}</p>
							<p class="second-p">
								<span>{{ item.value }}</span>{{ item.tag }}
							</p>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
	</el-row>
	<el-row>

<!--		<el-col :span="24">-->
<!--			<bar-chart />-->
<!--		</el-col>-->
	</el-row>
</template>

<script setup lang="ts">

import BarChart from '~/components/BarChart.vue'

const state = reactive(<any>{
	list: [],
	row: []
});



// 获取数据
onMounted(() => {
	adminRequest.get("/sys/item/query").then(res => {
		state.list = res.data;
	});


});


const chartData = ref({
	columns: ['date', 'sales'],
	rows: [
		{ date: '2021-01-01', sales: 100 },
		{ date: '2021-02-01', sales: 200 },
		{ date: '2021-03-01', sales: 150 },
		{ date: '2021-04-01', sales: 220 },
		{ date: '2021-05-01', sales: 180 }
	]
});

// 图表配置
const chartSettings = ref({
	xAxis: {
		type: 'category',
		name: '日期'
	},
	yAxis: {
		type: 'value',
		name: '销售量'
	},
	title: {
		text: '销售趋势'
	},
	tooltip: {
		trigger: 'axis'
	}
});
</script>

<style scoped>
.chart {
	height: 400px;
}

.list-box {
	width: 100%;
	height: 150px;
	border-radius: 10px;
	background-image: url('/a1.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.first-p {
	color: white;
	padding-bottom: 0.5vw;
	font-size: 1.5vw;
	text-align: center;
	padding-top: 30px;
}
.second-p {
	color: white;
	display: flex;
	margin-bottom: 5px;
	font-size: 1.4vw;
	align-items: center;
	justify-content: center;
	span {
		margin-right: 0.3vw;
		font-size: 2vw;
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "admin"
}
}
</route>
