<template>
	<cl-crud>
		<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-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="按负责人和类型" name="first">
				<span class="tab-chart__year">{{ year }}</span>
				<el-table :data="tableData1" border style="width: 100%" stripe show-summary sum-text="类型合计"
					align="center" header-align="center" size="small">
					<el-table-column v-for="(item, index) in cols1" :key="index" :prop="item.prop" :label="item.label">
					</el-table-column>
				</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.shuyouDataActive
				.queryAbnormalStatisticsByDirectorReason(queryForm)
				.then((res) => {
					if (res.code == 1) {
						year.value =
							dayjs(queryForm.date[0]).format("YYYY-MM-DD") +
							" 至 " +
							dayjs(queryForm.date[1]).format("YYYY-MM-DD") + ', 实际已完成的数据未统计';
						const data = res.data1;
						tableData1.value = [];
						cols1.value = [{ prop: "directorName", label: "负责人" }];
						let directorArr: any[] = [];
						//  {game_director: '杨开洪', game_agent: '魅族', game_count: '1'}
						//  { directorName: '施志明', type_name: 0, game_count: '54' }
						data.forEach((e) => {
							//列start=================
							let flag1 = true;
							cols1.value.forEach((c) => {
								if (c.prop == e.type_name) {
									flag1 = false;
								}
							});
							if (flag1 == true && e.type_name != '已完成') {
								let obj1 = {
									prop: e.type_name,
									label: e.type_name
								};
								cols1.value.push(obj1);
							}
							//列end=====================
							//负责人数组=========
							if (directorArr.indexOf(e.directorName) == -1) {
								directorArr.push(e.directorName);
							}
						});
						cols1.value.push({ prop: "合计", label: "合计（包含非个人原因）" });
						directorArr.forEach((g) => {
							let dd = [];
							dd["directorName"] = g;
							let count = 0;
							cols1.value.forEach((c) => {
								if (c.prop != "directorName") {
									let flag1 = false;
									data.forEach((e) => {
										if (e.directorName == g && e.type_name == c.prop) {
											dd[c.prop] = e.game_count;
											if (c.prop != '已完成') {
												count += parseInt(e.game_count);
											}
											flag1 = true;
										}
									});
									if (flag1 == false) {
										dd[c.prop] = 0;
									}
								}
							});
							dd["合计"] = count;
							tableData1.value.push(dd);
						});
						// console.log(tableData1);
						//=================================================
						// const data2 = res.data2;
						// tableData2.value = [];
						// data2.forEach((e) => {
						// 	let obj2 = {
						// 		game_director: e.game_director,
						// 		new_count: e.new_count,
						// 		pay_count: e.pay_count,
						// 		lc_count: e.lc_count,
						// 		game_count: e.game_count
						// 	};
						// 	tableData2.value.push(obj2);
						// });
						// //=================================================
						// const data3 = res.data3;
						// tableData3.value = [];
						// data3.forEach((e) => {
						// 	let obj3 = {
						// 		game_agent: e.game_agent,
						// 		target_new_count: e.target_new_count,
						// 		target_pay_count: e.target_pay_count,
						// 		target_lc_count: e.target_lc_count,
						// 		target_active_count: e.target_active_count,
						// 		complete_new_count: e.complete_new_count,
						// 		complete_pay_count: e.complete_pay_count,
						// 		complete_lc_count: e.complete_lc_count,
						// 		complete_active_count: e.complete_active_count
						// 	};
						// 	tableData3.value.push(obj3);
						// });
						//=================================================
					} 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>
