<template>
	<cl-crud>
		<el-form :model="queryForm" style="padding-left:20px">
			<el-form-item label="日期">
				<el-col :span="4">
					<!-- <el-date-picker v-model="queryForm.date" size="small" type="daterange" unlink-panels
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" /> -->
					<el-date-picker v-model="queryForm.date" size="small" type="date" placeholder="日期" />
				</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%;cursor: pointer;" stripe align="center"
			header-align="center" size="mini" :height="height" :default-sort="{ prop: 'task_id', order: 'ascending' }"
			v-loading="loading">
			<el-table-column type=index label="#" min-width="10" />
			<el-table-column prop="task_id" label="任务ID" min-width="80" sortable />
			<el-table-column prop="task_name" label="任务名称" min-width="100" sortable />
			<el-table-column prop="director_name" label="负责人" min-width="80" sortable />
			<el-table-column label="留存账号" align="center">
				<el-table-column prop="num_could_pay" align="center" label="能付费" sortable>
					<template #default="scope">
						{{ scope.row.num_account_lc }}
						<!-- <br /> -->
						<el-divider style="margin:0" />
						{{ scope.row.num_could_pay }}
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column prop="num_frozen" label="封号数" min-width="60" align="center" sortable />
			<el-table-column prop="num_pull_account" label="下发账号" min-width="70" align="center" sortable />
			<el-table-column prop="num_start_script" label="脚本启动" min-width="70" align="center" sortable />
			<el-table-column prop="num_start_simulator" label="模拟器启动" min-width="80" align="center" sortable />
			<el-table-column prop="num_ip" label="查询IP" min-width="60" align="center" sortable />
			<el-table-column prop="num_start_game" label="启动游戏" min-width="70" align="center" sortable />
			<el-table-column prop="num_login_success" label="账号登录" min-width="70" align="center" sortable />
			<el-table-column prop="num_into_game" label="进入游戏" min-width="70" align="center" sortable />
			<el-table-column label="活跃成功" align="center">
				<el-table-column prop="num_new_success" label="新增成功" min-width="70" align="center" sortable />
				<el-table-column prop="num_lc_success" label="留存成功" min-width="70" align="center" sortable />
			</el-table-column>
			<el-table-column prop="num_pay_success" label="付费成功" min-width="70" align="center" sortable />
			<el-table-column label="订单数" align="center">
				<el-table-column label="付费成功" align="center">
					<el-table-column prop="order_success_rate" label="成功率" min-width="70" align="center" sortable
						:sort-method="sortBySuccess1" />
				</el-table-column>
			</el-table-column>
			<el-table-column label="下发账号" align="center">
				<el-table-column label="脚本启动" align="center">
					<el-table-column prop="num_pull_account,num_start_script" align="center" label="成功率" sortable
						:sort-method="sortBySuccess2">
						<template #default="scope">
							{{ scope.row.step2 }}
							<el-divider style="margin:0" />
							{{ Math.round(scope.row.rate2 * 10000) / 100 + '%'
							}}
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column label="脚本启动" align="center">
				<el-table-column label="进入游戏" align="center">
					<el-table-column prop="num_into_game,num_start_game" label="成功率" align="center" sortable
						:sort-method="sortBySuccess3">
						<template #default="scope">
							{{ scope.row.num_start_script }}
							<el-divider style="margin:0 5px" direction="vertical" />{{ scope.row.num_into_game }}
							<el-divider style="margin:0" />
							{{ Math.round(scope.row.rate3 * 10000) / 100 + '%'
							}}
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column label="脚本启动" align="center">
				<el-table-column label="活跃成功" align="center">
					<el-table-column prop="num_start_script,num_active" label="成功率" align="center" sortable
						:sort-method="sortBySuccess4">
						<template #default="scope">
							{{ scope.row.num_start_script }}
							<el-divider style="margin:0 5px" direction="vertical" />{{ scope.row.num_active
							}}
							<el-divider style="margin:0" />
							{{ Math.round(scope.row.rate4 * 10000) / 100 + '%'
							}}
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column label="下发付费" align="center">
				<el-table-column label="付费成功" align="center">
					<el-table-column prop="num_start_script,num_new_success,num_lc_success" label="成功率" align="center"
						sortable :sort-method="sortBySuccess5">
						<template #default="scope">
							{{ scope.row.num_pull_pay }}
							<el-divider style="margin:0 5px" direction="vertical" />{{ scope.row.num_pay_success
							}}
							<el-divider style="margin:0" />
							{{ Math.round(scope.row.rate5 * 10000) / 100 + '%'
							}}
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="60" align="center" header-align="center">
				<template #default="scope">
					<el-button size="mini" type="primary" plain @click="showSevenTab(scope.row)">7天</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- </el-tab-pane>
		</el-tabs> -->
		<el-dialog :title="title" v-model="fileVisible" :center="true" :close-on-click-modal="false"
			:close-on-press-escape="false" width="100%" fullscreen="true">
			<el-form :model="queryForm2" style="padding-left:20px">
				<el-form-item label="日期">
					<el-col :span="4">
						<el-date-picker v-model="queryForm2.date" size="small" type="daterange" unlink-panels
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							:shortcuts="shortcuts" />
						<!-- <el-date-picker v-model="queryForm.date" size="small" type="date" placeholder="日期" /> -->
					</el-col>
				</el-form-item>
				<el-form-item label="操作">
					<el-col :span="6">
						<el-button size="small" type="primary" @click="onSubmit2">查询</el-button>
					</el-col>
				</el-form-item>
			</el-form>
			<el-table :data="sevenDataList" border style="width: 100%" max-height="800" v-loading="loading2"
				size="mini">
				<el-table-column prop="new_date" label="日期" min-width="80" align="center" sortable />
				<el-table-column label="留存账号" align="center">
					<el-table-column prop="num_could_pay" align="center" label="能付费" sortable>
						<template #default="scope">
							{{ scope.row.num_account_lc }}
							<!-- <br /> -->
							<el-divider style="margin:0" />
							{{ scope.row.num_could_pay }}
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column prop="num_frozen" label="封号数" min-width="60" align="center" sortable />
				<el-table-column prop="num_pull_account" label="下发账号" min-width="70" align="center" sortable />
				<el-table-column prop="num_start_script" label="脚本启动" min-width="70" align="center" sortable />
				<el-table-column prop="num_start_simulator" label="模拟器启动" min-width="80" align="center" sortable />
				<el-table-column prop="num_ip" label="查询IP" min-width="60" align="center" sortable />
				<el-table-column prop="num_start_game" label="启动游戏" min-width="70" align="center" sortable />
				<el-table-column prop="num_login_success" label="账号登录" min-width="70" align="center" sortable />
				<el-table-column prop="num_into_game" label="进入游戏" min-width="70" align="center" sortable />
				<el-table-column label="活跃成功" align="center">
					<el-table-column prop="num_new_success" label="新增成功" min-width="70" align="center" sortable />
					<el-table-column prop="num_lc_success" label="留存成功" min-width="70" align="center" sortable />
				</el-table-column>
				<el-table-column prop="num_pay_success" label="付费成功" min-width="70" align="center" sortable />
				<el-table-column label="订单数" align="center">
					<el-table-column label="付费成功" align="center">
						<el-table-column prop="order_success_rate" label="成功率" min-width="70" align="center" sortable
							:sort-method="sortBySuccess1" />
					</el-table-column>
				</el-table-column>
				<el-table-column label="下发账号" align="center">
					<el-table-column label="脚本启动" align="center">
						<el-table-column prop="num_pull_account,num_start_script" align="center" label="成功率" sortable
							:sort-method="sortBySuccess2">
							<template #default="scope">
								{{ scope.row.step2 }}
								<el-divider style="margin:0" />
								{{ Math.round(scope.row.rate2 * 10000) / 100 + '%'
								}}
							</template>
						</el-table-column>
					</el-table-column>
				</el-table-column>
				<el-table-column label="脚本启动" align="center">
					<el-table-column label="进入游戏" align="center">
						<el-table-column prop="num_into_game,num_start_game" label="成功率" align="center" sortable
							:sort-method="sortBySuccess3">
							<template #default="scope">
								{{ scope.row.num_start_script }}
								<el-divider style="margin:0 5px" direction="vertical" />{{ scope.row.num_into_game }}
								<el-divider style="margin:0" />
								{{ Math.round(scope.row.rate3 * 10000) / 100 + '%'
								}}
							</template>
						</el-table-column>
					</el-table-column>
				</el-table-column>
				<el-table-column label="脚本启动" align="center">
					<el-table-column label="活跃成功" align="center">
						<el-table-column prop="num_start_script,num_active" label="成功率" align="center" sortable
							:sort-method="sortBySuccess4">
							<template #default="scope">
								{{ scope.row.num_start_script }}
								<el-divider style="margin:0 5px" direction="vertical" />{{ scope.row.num_active
								}}
								<el-divider style="margin:0" />
								{{ Math.round(scope.row.rate4 * 10000) / 100 + '%'
								}}
							</template>
						</el-table-column>
					</el-table-column>
				</el-table-column>
				<el-table-column label="下发付费" align="center">
					<el-table-column label="付费成功" align="center">
						<el-table-column prop="num_start_script,num_new_success,num_lc_success" label="成功率"
							align="center" sortable :sort-method="sortBySuccess5">
							<template #default="scope">
								{{ scope.row.num_pull_pay }}
								<el-divider style="margin:0 5px" direction="vertical" />{{ scope.row.num_pay_success
								}}
								<el-divider style="margin:0" />
								{{ Math.round(scope.row.rate5 * 10000) / 100 + '%'
								}}
							</template>
						</el-table-column>
					</el-table-column>
				</el-table-column>
			</el-table>
		</el-dialog>
	</cl-crud>
</template>

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

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[]>([]);
		const year = ref<string>("");
		const title = ref<string>("");
		const current_task_id = ref<string>("");
		let sevenDataList = ref<any[]>([]);
		const fileVisible = ref<boolean>(false);
		const loading = ref<boolean>(false);
		const loading2 = ref<boolean>(false);
		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()]
			date: new Date()
		});
		const queryForm2 = reactive({
			date: [new Date().getTime() - 3600 * 1000 * 24 * 1, new Date().getTime() - 3600 * 1000 * 24 * 1]
		});


		function sortBySuccess1(obj1: any, obj2: any) {
			let str1 = obj1.order_success_rate;
			let str2 = obj2.order_success_rate;
			let arr1 = str1.split('/')
			let arr2 = str2.split('/')
			return arr1[2].replace('%', '') - arr2[2].replace('%', '');
		};
		function sortBySuccess2(obj1: any, obj2: any) {
			let num1 = obj1.rate2;
			let num2 = obj2.rate2;
			return num1 - num2;
		};
		function sortBySuccess3(obj1: any, obj2: any) {
			let num1 = obj1.rate3;
			let num2 = obj2.rate3;
			return num1 - num2;
		};
		function sortBySuccess4(obj1: any, obj2: any) {
			let num1 = obj1.rate4;
			let num2 = obj2.rate4;
			return num1 - num2;
		};
		function sortBySuccess5(obj1: any, obj2: any) {
			let num1 = obj1.rate5;
			let num2 = obj2.rate5;
			return num1 - num2;
		};
		// 根据时间段查询单游戏数据
		async function onSubmit2() {
			loading2.value = true;
			let queryForm = {
				task_id: current_task_id.value,
				new_date: queryForm2.date,
			};
			service.ShuyouDataAbnormalRate
				.querySomeTime(queryForm)
				.then((data) => {
					sevenDataList.value = []
					data.data.forEach((e) => {
						let rate2 = 0
						let rate3 = 0
						let rate4 = 0
						let rate5 = 0
						if (e.num_pull_account != 0) {
							rate2 = e.num_start_script / e.num_pull_account
						}
						if (e.num_start_script != 0) {
							rate3 = e.num_into_game / e.num_start_script;
							rate4 = (e.num_new_success + e.num_lc_success) / e.num_start_script;
						}
						if (e.num_pull_pay != 0) {
							rate5 = e.num_pay_success / e.num_pull_pay
						}
						let obj1 = {
							task_id: e.task_id,
							task_name: e.task_name,
							director_name: e.director_name,
							new_date: dayjs(e.new_date).format("YYYY-MM-DD"),
							num_frozen: e.num_frozen,
							num_pull_account: e.num_pull_account,
							num_start_simulator: e.num_start_simulator,
							num_ip: e.num_ip,
							num_start_script: e.num_start_script,
							num_start_game: e.num_start_game,
							num_login_success: e.num_login_success,
							num_into_game: e.num_into_game,
							num_new_success: e.num_new_success,
							num_lc_success: e.num_lc_success,
							num_pay_success: e.num_pay_success,
							rate_all_step: Math.round(e.rate_all_step * 10000) / 100 + "%",
							step2: e.num_pull_account + ' | ' + e.num_start_script,
							num_active: e.num_new_success + e.num_lc_success,
							num_pull_pay: e.num_pull_pay,
							num_account_lc: e.num_account_lc,
							num_could_pay: e.num_could_pay,
							order_success_rate: e.order_success_rate,
							rate2: rate2,
							rate3: rate3,
							rate4: rate4,
							rate5: rate5,
						};
						sevenDataList.value.push(obj1);
					});
					loading2.value = false;
				})
				.catch((err: string) => {
					ElMessage.error(err);
				});
		}
		//查询七天数据
		async function showSevenTab(row) {
			ElMessage({
				message: '查询中,请稍等',
				type: 'warning',
				offset: 50
			})
			let queryForm = {
				task_id: row.task_id,
				new_date: row.new_date,
			};
			title.value = row.task_id + " | " + row.task_name + " | " + row.director_name
			current_task_id.value = row.task_id
			service.ShuyouDataAbnormalRate
				.querySeven(queryForm)
				.then((data) => {
					sevenDataList.value = []
					data.data.forEach((e) => {
						let rate2 = 0
						let rate3 = 0
						let rate4 = 0
						let rate5 = 0
						if (e.num_pull_account != 0) {
							rate2 = e.num_start_script / e.num_pull_account
						}
						if (e.num_start_script != 0) {
							rate3 = e.num_into_game / e.num_start_script;
							rate4 = (e.num_new_success + e.num_lc_success) / e.num_start_script;
						}
						if (e.num_pull_pay != 0) {
							rate5 = e.num_pay_success / e.num_pull_pay
						}
						let obj1 = {
							task_id: e.task_id,
							task_name: e.task_name,
							director_name: e.director_name,
							new_date: dayjs(e.new_date).format("YYYY-MM-DD"),
							num_frozen: e.num_frozen,
							num_pull_account: e.num_pull_account,
							num_start_simulator: e.num_start_simulator,
							num_ip: e.num_ip,
							num_start_script: e.num_start_script,
							num_start_game: e.num_start_game,
							num_login_success: e.num_login_success,
							num_into_game: e.num_into_game,
							num_new_success: e.num_new_success,
							num_lc_success: e.num_lc_success,
							num_pay_success: e.num_pay_success,
							rate_all_step: Math.round(e.rate_all_step * 10000) / 100 + "%",
							step2: e.num_pull_account + ' | ' + e.num_start_script,
							num_active: e.num_new_success + e.num_lc_success,
							num_pull_pay: e.num_pull_pay,
							num_account_lc: e.num_account_lc,
							num_could_pay: e.num_could_pay,
							order_success_rate: e.order_success_rate,
							rate2: rate2,
							rate3: rate3,
							rate4: rate4,
							rate5: rate5,
						};
						sevenDataList.value.push(obj1);
					});
					fileVisible.value = true;
				})
				.catch((err: string) => {
					ElMessage.error(err);
				});
		};
		const onSubmit = async () => {
			loading.value = true;
			await service.ShuyouDataAbnormalRate
				.queryAbnormalRate(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");
						year.value = dayjs(queryForm.date).format("YYYY-MM-DD")
						const data = res.data;
						tableData1.value = [];
						// console.log(res)

						data.forEach((e) => {
							let rate2 = 0
							let rate3 = 0
							let rate4 = 0
							let rate5 = 0
							if (e.num_pull_account != 0) {
								rate2 = e.num_start_script / e.num_pull_account
							}
							if (e.num_start_script != 0) {
								rate3 = e.num_into_game / e.num_start_script;
								rate4 = (e.num_new_success + e.num_lc_success) / e.num_start_script;
							}
							if (e.num_pull_pay != 0) {
								rate5 = e.num_pay_success / e.num_pull_pay
							}
							let obj1 = {
								task_id: e.task_id,
								task_name: e.task_name,
								director_name: e.director_name,
								new_date: dayjs(e.new_date).format("YYYY-MM-DD"),
								num_frozen: e.num_frozen,
								num_pull_account: e.num_pull_account,
								num_start_simulator: e.num_start_simulator,
								num_ip: e.num_ip,
								num_start_script: e.num_start_script,
								num_start_game: e.num_start_game,
								num_login_success: e.num_login_success,
								num_into_game: e.num_into_game,
								num_new_success: e.num_new_success,
								num_lc_success: e.num_lc_success,
								num_pay_success: e.num_pay_success,
								rate_all_step: Math.round(e.rate_all_step * 10000) / 100 + "%",
								step2: e.num_pull_account + ' | ' + e.num_start_script,
								num_active: e.num_new_success + e.num_lc_success,
								num_pull_pay: e.num_pull_pay,
								num_account_lc: e.num_account_lc,
								num_could_pay: e.num_could_pay,
								order_success_rate: e.order_success_rate,
								rate2: rate2,
								rate3: rate3,
								rate4: rate4,
								rate5: rate5,
							};
							tableData1.value.push(obj1);
						});
						loading.value = false;
						//=================================================
					} else {
						console.log("未查询到数据");
					}
				})
				.catch((err: string) => { });
		};
		// renderHeader(h, { column }) {
		// 	let header = column.label.split('/');
		// 	return [h('p', [
		// 		h('p', {}, header[0]),
		// 		h('span', {}, header[1])
		// 	])];
		// }
		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,
			year,
			height,
			queryForm,
			queryForm2,
			shortcuts,
			onSubmit,
			onSubmit2,
			sortBySuccess1,
			sortBySuccess2,
			sortBySuccess3,
			sortBySuccess4,
			sortBySuccess5,
			showSevenTab,
			sevenDataList,
			fileVisible,
			title,
			loading,
			loading2
		};
	},
	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>
