<template>
	<div class="hot-search">
		<div class="hot-search__header">
			<span>今日付费TOP9</span>
		</div>

		<div class="hot-search__container">
			<!-- <el-row class="hot-search__chart" :gutter="100">
				<el-col :md="12" :xs="24">
					<div class="block">
						<div class="count">
							<div class="number">
								<span>热门游戏</span>
								<span>--</span>
							</div>
							<div class="rise">
								<i class="el-icon-top-right"></i>
								<span>+0%</span>
							</div>
						</div>

						<v-chart :option="chartOption" autoresize />
					</div>
				</el-col>

				<el-col :md="12" :xs="24">
					<div class="block">
						<div class="count">
							<div class="number">
								<span>热门游戏</span>
								<span>--</span>
							</div>
							<div class="rise">
								<i class="el-icon-top-right"></i>
								<span>+0%</span>
							</div>
						</div>

						<v-chart :option="chartOption" autoresize />
					</div>
				</el-col>
			</el-row> -->

			<div class="hot-search__table">
				<cl-crud @load="onLoad">
					<el-row>
						<cl-table
							:auto-height="false"
							:props="{
								border: false,
								'default-sort': {
									prop: 'complete_pay',
									order: 'descending'
								}
							}"
							:context-menu="false"
							:columns="[
								{
									label: '排名',
									prop: 'index'
								},
								{
									label: '任务ID',
									prop: 'task_id',
									align: 'left'
								},
								{
									label: '任务名称',
									prop: 'task_name',
									align: 'left'
								},
								{
									label: '付费个数',
									prop: 'complete_pay',
									align: 'left'
								},
								{
									label: '活跃个数',
									prop: 'complete_active',
									align: 'left'
								}
							]"
						/>
					</el-row>
				</cl-crud>
			</div>
		</div>
	</div>
</template>

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

export default defineComponent({
	setup() {
		const service = inject<any>("service");
		// 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: [
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500",
		// 				"500"
		// 			],
		// 			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
		// 				}
		// 			}
		// 		}
		// 	]
		// });

		function onLoad({ ctx, app }: any) {
			ctx.service({
				async page() {
					const value = await service.shuyouDataActive.queryTopFive();
					return Promise.resolve({
						list: value.data
					});
				}
			}).done();
			app.refresh();
		}

		return { onLoad };
	}
});
</script>

<style lang="scss">
.hot-search {
	&__header {
		display: flex;
		align-items: center;
		height: 54px;
		font-size: 20px;
		font-weight: bold;
		padding: 0 20px;
	}

	&__chart {
		padding: 0 10px;

		.block {
			margin: 10px 0;

			.count {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
				height: 40px;

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

				.fall {
					color: #13ae7c;
				}

				.rise {
					color: #f21e37;
				}

				.number {
					display: flex;
					align-items: center;

					span {
						font-size: 13px;

						&:last-child {
							margin-left: 10px;
							font-size: 15px;
							font-weight: bold;
						}
					}
				}
			}

			.echarts {
				height: 50px;
				width: 100%;
			}
		}
	}

	&__table {
		padding: 10px, 10px, 10px, 10px;

		.el-table {
			&__header {
				th {
					background-color: #fff !important;
				}
			}
		}
	}
}
</style>
