<template>
	<cl-crud>
		<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="23点20以后有付费游戏统计" name="first">
				<!-- <span class="tab-chart__year">{{ year }}</span> -->
				<el-form :model="queryForm" style="padding-left:20px">
					<el-form-item label="日期">
						<el-col :span="6">
							<el-date-picker v-model="queryForm.date" size="small" type="daterange" unlink-panels
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
								:shortcuts="shortcuts" />
						</el-col>
					</el-form-item>
					<el-form-item label="操作">
						<el-col :span="6">
							<el-button size="small" type="primary" @click="onSubmit">查询</el-button>
						</el-col>
					</el-form-item>
				</el-form>
				<el-table :data="tableData1" border style="width: 100%" max-height="600" stripe align="center"
					header-align="center" size="small">
					<el-table-column prop="new_date" label="日期" />
					<el-table-column prop="task_id" label="任务ID" />
					<el-table-column prop="task_name" label="任务名" />
					<el-table-column prop="director_name" label="负责人" />
					<el-table-column prop="incomplete_new" label="未完新增" />
					<el-table-column prop="incomplete_pay" label="未完付费" />
					<el-table-column prop="incomplete_active" label="未完活跃" />
					<el-table-column prop="createTime" label="创建时间" />
					<el-table-column prop="updateTime" label="更新时间" />
				</el-table>
			</el-tab-pane>
			<!-- <el-tab-pane label="按负责人" name="second">
				<span class="tab-chart__year">{{ year }}</span>
				<el-table :data="tableData2" border style="width: 100%" stripe show-summary align="center"
					header-align="center">
					<el-table-column prop="game_director" label="负责人" />
					<el-table-column prop="new_count" label="包含新增游戏数" />
					<el-table-column prop="pay_count" label="付费游戏数" />
					<el-table-column prop="lc_count" label="纯留存游戏数" />
					<el-table-column prop="game_count" label="游戏总数" />
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="按游戏端口" name="third">
				<span class="tab-chart__year">{{ year }}</span>
				<el-table :data="tableData3" border style="width: 100%" stripe show-summary align="center"
					header-align="center">
					<el-table-column prop="game_agent" label="游戏端口" />
					<el-table-column prop="target_new_count" label="包含新增游戏数" />
					<el-table-column prop="target_pay_count" label="付费游戏数" />
					<el-table-column prop="target_lc_count" label="纯留存游戏数" />
					<el-table-column prop="target_active_count" label="游戏总数" />
					<el-table-column prop="complete_new_count" label="包含新增游戏数" />
					<el-table-column prop="complete_pay_count" label="付费游戏数" />
					<el-table-column prop="complete_lc_count" label="纯留存游戏数" />
					<el-table-column prop="complete_active_count" label="游戏总数" />
				</el-table>
			</el-tab-pane> -->
		</el-tabs>
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, reactive, ref } from "vue";
import dayjs from "dayjs";
// import { isPc } from "/@/core/utils";

export default defineComponent({
	setup() {
		// const barWidth = isPc() ? 25 : 15;
		// 请求服务
		const activeName = ref("second");
		const service = inject<any>("service");
		let tableData1 = ref<any[]>([]);
		// let tableData2 = ref<any[]>([]);
		// let tableData3 = ref<any[]>([]);
		let cols1 = ref<any[]>([]);
		const year = ref<string>("");
		const shortcuts = [
			{
				text: "最近一周",
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					return [start, end];
				}
			},
			{
				text: "最近一月",
				value: () => {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					return [start, end];
				}
			}
		];
		const queryForm = reactive({
			date: [new Date().getTime() - 3600 * 1000 * 24 * 1, new Date().getTime() - 3600 * 1000 * 24 * 1]
		});

		const onSubmit = async () => {
			await service.shuyouData23
				.list(queryForm)
				.then((res) => {
					console.log(res)
					if (res) {
						const data = res;
						tableData1.value = [];
						data.forEach((e) => {
							let obj1 = {
								new_date: dayjs(e.new_date).format("YYYY-MM-DD"),
								task_id: e.task_id,
								task_name: e.task_name,
								director_name: e.director_name,
								incomplete_new: e.incomplete_new,
								incomplete_pay: e.incomplete_pay,
								incomplete_active: e.incomplete_active,
								createTime: e.createTime,
								updateTime: e.updateTime
							};
							tableData1.value.push(obj1);
						});
					} else {
						console.log("未查询到数据");
					}
				})
				.catch((err: string) => { });
		};
		onMounted(async () => {
			// year.value = new Date().getFullYear() + "年";
			onSubmit();
			activeName.value = "first";
		});

		return {
			activeName,
			tableData1,
			cols1,
			year,
			queryForm,
			shortcuts,
			onSubmit,
			// tableData2,
			// tableData3
		};
	},
	data() {
		return {};
	}
});
</script>

<style lang="scss" scoped>
.demo-tabs {
	margin: 0 20px;
	color: #6b778c;
	font-size: 18px;
	font-weight: 600;
	border: 1px solid #f2f6fc;

	&__year {
		font-size: 18px;
		position: relative;

		&::before {
			display: block;
			content: "";
			height: 8px;
			width: 8px;
			border-radius: 8px;
			background-color: #000;
			position: absolute;
			left: -15px;
			top: 7px;
		}
	}
}

.tab-chart {
	&__year {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 50px;
		padding-bottom: 15px;
		padding-left: 20px;

		ul {
			li {
				list-style: none;
				float: left;
				margin-right: 20px;
				font-size: 15px;
				color: #b9b3b3;
				// color: #dbdbdb;
				cursor: pointer;

				&.active {
					color: #000;
					font-weight: bold;
				}
			}
		}
	}

	&__container {
		height: 500px;
		padding: 0 15px;
		margin-top: 5%;
		margin-right: 5%;

		.echarts {
			height: 100%;
			width: 100%;
		}
	}
}
</style>
