<template>
	<div class="layout-padding">
		<div class="!overflow-auto pl-1">
			<!-- 顶部控制区域 -->
			<div class="mb-2 el-card p-9">
				<div class="flex items-center mb-4">
					<Title title="转化率报表">
						<template #default>
							<el-popover class="box-item" placement="right" trigger="hover" width="600">
								<template #reference>
									<el-icon class="ml-1" style="color: #a4b8cf"><QuestionFilled /></el-icon>
								</template>
								<template #default>
									<div class="ant-popover-inner-content">
										<div style="padding: 16px">
											<div>
												<span class="um-vc-text" title="目标事件：" style="color: rgb(33, 150, 243); font-size: 12px">目标事件：</span>
												<span
													class="um-vc-text"
													title="整个事件转化率所关心的最终转化率的目标，是序列中最后一个事件"
													style="color: rgb(0, 0, 0); font-size: 12px"
												>
													整个事件转化率所关心的最终转化率的目标，是序列中最后一个事件
												</span>
											</div>
											<div>
												<span class="um-vc-text" title="步骤数：" style="color: rgb(33, 150, 243); font-size: 12px">步骤数：</span>
												<span class="um-vc-text" title="从初始事件到目标事件经历的事件数" style="color: rgb(0, 0, 0); font-size: 12px">
													从初始事件到目标事件经历的事件数
												</span>
											</div>
											<div>
												<span class="um-vc-text" title="所选时段转化率：" style="color: rgb(33, 150, 243); font-size: 12px">所选时段转化率：</span>
												<span class="um-vc-text" title="所选时段内，该事件序列的最终转化率" style="color: rgb(0, 0, 0); font-size: 12px"
													>所选时段内，该事件序列的最终转化率
												</span>
											</div>
										</div>
									</div>
								</template>
							</el-popover>
						</template>
					</Title>
				</div>
				<div class="bg-[#f8f8f8] p-4 rounded" style="line-height: 24px">
					<p class="">
						<el-icon class="!text-[#167af0] pian-2"><InfoFilled /></el-icon>
						事件转化率指的是多个自定义事件序列按照指定顺序依次触发的流程中的量化转化模型。通常我们会对应用中的一些关键路径进行分析，来确定整个流程的设计是否合理，各步骤的优劣，是否存在优化的空间等，进而提高最终目标的转化率。
						事件转化率是基于自定义事件创建的。想要分析关键流程的转化率，需要先集成并<el-button type="primary" link>添加自定义事件</el-button
						>，并在事件转化率管理页面<el-button type="primary" link>添加转化报表</el-button>。
					</p>
				</div>
				<div class="flex items-center justify-start mt-2 w-[480px]">
					<el-select v-model="formData.selectedChannelCompare" class="!w-[180px]" placeholder="全部版本">
						<el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<el-date-picker v-model="formData.time" class="!w-[200px] ml-2" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" />
					<div class="flex items-center ml-2">
						<el-button link type="primary"
							><el-icon class="!text-blue-500 mr-1"><Tools /></el-icon>设置</el-button
						>
					</div>
				</div>
			</div>
			<div class="el-card p-9 mt-2">
				<!-- 明细表格 -->
				<div class="">
					<el-table :data="pagedTableRows" border height="calc(100vh - 468px)">
						<el-table-column prop="date" label="名称" align="center" min-width="140" />
						<el-table-column prop="hyyh" label="目标事件" align="center" min-width="140" />
						<el-table-column prop="hyyh" label="步骤数" align="center" sortable min-width="140" />
						<el-table-column prop="hyyh" label="所选时段转化率" align="center" sortable min-width="140" />
					</el-table>
					<div class="flex justify-end mt-2">
						<el-pagination
							v-model:current-page="currentPage"
							v-model:page-size="pageSize"
							background
							layout="total, prev, pager, next, sizes"
							:total="tableRows.length"
							:page-sizes="[5, 10, 20]"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, defineAsyncComponent, onBeforeUnmount } from 'vue';

const router = useRouter();
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
interface TableRow {
	date: string;
	newUsers: number;
	ratio: string;
}
const formData = ref({
	selectedChannelCompare: '',
	time: '',
});
const channelCompareOptions = [
	{ label: '全部版本', value: '' },
	{ label: '1.0', value: '1.0' },
	{ label: '2.0', value: '2.0' },
];

// 表格相关（静态数据）
const tableRows = ref<TableRow[]>(
	Array.from({ length: 42 }).map((_, idx) => ({
		date: `2025-08-${String(11).padStart(2, '0')}`,
		newUsers: 727,
		hyyh: '123' + idx,
		ratio: '97.45%',
		id: idx,
	}))
);

const currentPage = ref(1);
const pageSize = ref(5);
const pagedTableRows = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;

	return tableRows.value.slice(startIndex, startIndex + pageSize.value);
});

const onDetailClick = (row: any) => {
	router.push({
		path: '/count/featureUsage/event/eventData',
		query: {
			id: row.id,
		},
	});
};
</script>

<style lang="scss" scoped>
.pian-2 {
	transform: translate(0px, 2px);
}
.el-card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
:deep(.el-tabs__item.is-top.is-active) {
	color: #167af0;
	background-color: #e8f2fe;
}

.el-radio-button__inner {
	border-radius: 4px;
}

.el-radio-button:first-child .el-radio-button__inner {
	border-radius: 4px 0 0 4px;
}

.el-radio-button:last-child .el-radio-button__inner {
	border-radius: 0 4px 4px 0;
}
</style>
