<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>
		<!-- @tab-click="handleClick" -->
		<el-tabs v-model="activeName" type="card" class="demo-tabs">
			<el-tab-pane label="按负责人和端口" name="first">
				<span class="tab-chart__year">{{ year }}</span>
				<el-table :data="tableData1" border style="width: 100%" stripe show-summary 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" size="small">
					<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="active_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" size="small">
					<el-table-column prop="game_agent" label="游戏端口" />
					<el-table-column label="目标" align="center">
						<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>
					<el-table-column label="完成" align="center">
						<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-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="个人游戏总数" name="fourth">
				<span class="tab-chart__year">{{ year }}</span>
				<el-table :data="tableData4" border style="width: 100%;" :height="height" stripe show-summary
					align="center" header-align="center" size="small">
					<el-table-column type="expand">
						<template #default="props">
							<div>
								<p v-for="(item, index) in props.row.detail">{{ item }}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="game_director" label="负责人" />
					<el-table-column label="按游戏分">
						<el-table-column prop="count_game" label="*1个游戏不同端口渠道只计数1" />
					</el-table-column>
					<el-table-column label="按端口分">
						<el-table-column prop="count_duankou" label="*1个游戏n个端口计数n,同一端口不同渠道计数1" />
					</el-table-column>
					<el-table-column label="按渠道分">
						<el-table-column prop="count_qudao" label="*1个游戏n个渠道计数n" />
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</cl-crud>
</template>

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

export default defineComponent({
	setup() {
		const barWidth = isPc() ? 250 : 400;
		// 请求服务
		const activeName = ref("second");
		const service = inject<any>("service");
		const height = ref<number>(500);
		let tableData1 = ref<any[]>([]);
		let tableData2 = ref<any[]>([]);
		let tableData3 = ref<any[]>([]);
		let tableData4 = 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(), new Date()]
		});

		const onSubmit = async () => {
			await service.shuyouDataActive
				.queryGameCountByDirectorGameAgent(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: "game_director", label: "负责人" }];
						let directorArr: any[] = [];
						//  {game_director: '杨开洪', game_agent: '魅族', game_count: '1'}
						data.forEach((e) => {
							//列start=================
							let flag1 = true;
							cols1.value.forEach((c) => {
								if (c.prop == e.game_agent) {
									flag1 = false;
								}
							});
							if (flag1 == true) {
								let obj1 = {
									prop: e.game_agent,
									label: e.game_agent
								};
								cols1.value.push(obj1);
							}
							//列end=====================
							//负责人数组=========
							if (directorArr.indexOf(e.game_director) == -1) {
								directorArr.push(e.game_director);
							}
						});
						cols1.value.push({ prop: "合计", label: "合计" });
						directorArr.forEach((g) => {
							let dd = [];
							dd["game_director"] = g;
							let count = 0;
							cols1.value.forEach((c) => {
								if (c.prop != "game_director") {
									let flag1 = false;
									data.forEach((e) => {
										if (e.game_director == g && e.game_agent == c.prop) {
											dd[c.prop] = e.game_count;
											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,
								active_count: e.active_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);
						});
						//=================================================
						const data4 = res.data4;
						tableData4.value = [];
						directorArr.forEach((g) => {
							let dd: any = [];
							dd["game_director"] = g;
							let count1 = 0;
							let count2 = 0;
							let count3 = 0;
							let mm = ['详细信息：']
							data4.forEach((e: any) => {
								if (e.game_director == g) {
									count1 += parseInt(e.count_qudao);
									count2 += parseInt(e.count_duankou);
									count3 += parseInt(e.count_game);
									let hang = e.game_name + '：    游戏计数：' + e.count_game + '    端口计数：' + e.count_duankou + '    渠道计数：' + e.count_qudao
									mm.push(hang)
								}
							});
							dd["count_qudao"] = count1;
							dd["count_duankou"] = count2;
							dd["count_game"] = count3;
							dd["detail"] = mm;
							tableData4.value.push(dd);
						});
						//=================================================
					} else {
						console.log("未查询到数据");
					}
				})
				.catch((err: string) => { });
		};
		onMounted(async () => {
			// year.value = new Date().getFullYear() + "年";
			onSubmit();
			activeName.value = "first";

		});
		onBeforeMount(async () => {
			const h = `${document.documentElement.clientHeight}`
			// console.log(h)
			height.value = parseInt(h) - barWidth
		});
		return {
			activeName,
			tableData1,
			cols1,
			year,
			height,
			queryForm,
			shortcuts,
			onSubmit,
			tableData2,
			tableData3,
			tableData4
		};
	},
	data() {
		return {};
	}
});
</script>

<style lang="scss" scoped>
.demo-tabs {
	margin: 0px 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>
