<template>
	<div class="count-views">
		<div class="card">
			<div class="card__header">
				<span class="label">今日操作次数:</span>
				<span class="value">{{ operationCount }}</span>
			</div>

			<div class="card__container">
				<v-chart :option="chartOption" autoresize />
			</div>

			<div class="card__footer">
				<span class="label">今日访问IP:</span>
				<span class="value">{{ ipCount }}</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, ref, inject } from "vue";
import * as echarts from "echarts";

export default defineComponent({
	setup() {
		const chartOption = reactive({
			grid: {
				left: 0,
				top: 0,
				right: 0,
				bottom: 0
			},
			xAxis: {
				type: "category",
				data: [
					"00:00",
					"2:00",
					"4:00",
					"6:00",
					"8:00",
					"10:00",
					"12:00",
					"14:00",
					"16:00",
					"18:00",
					"20:00",
					"22:00"
				],
				boundaryGap: false
			},
			yAxis: {
				type: "value",
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: false
				}
			},
			series: [
				{
					name: "总访问量",
					type: "line",
					smooth: true,
					showSymbol: false,
					symbol: "circle",
					symbolSize: 6,
					data: [
						"300",
						"300",
						"300",
						"300",
						"300",
						"300",
						"300",
						"300",
						"300",
						"300",
						"300",
						"300"
					],
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "#D1E5FF"
									},
									{
										offset: 1,
										color: "#FFFFFF"
									}
								],
								false
							)
						}
					},
					itemStyle: {
						normal: {
							color: "#4165d7"
						}
					},
					lineStyle: {
						normal: {
							width: 2
						}
					}
				}
			]
		});
		const operationCount = ref<string>("");
		const ipCount = ref<string>("");
		const service = inject<any>("service");
		onMounted(async () => {
			const res1 = await service.shuyouDataActive.queryIpCount();
			if (res1.code == 1) {
				ipCount.value = res1.data[0].ip_count;
			}
			const res2 = await service.shuyouDataActive.queryOperationCount();
			if (res2.code == 1) {
				operationCount.value = res2.data[0].Operation_count;
			}
		});
		return { chartOption, operationCount, ipCount };
	}
});
</script>

<style lang="scss" scoped>
.count-views {
	.card {
		.echarts {
			height: 50px;
			width: 100%;
		}

		&__container {
			padding: 0;
		}

		&__footer {
			border-top: 0;
		}
	}
}
</style>
