<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="自定义事件" />
				</div>
				<div class="flex items-center justify-between space-x-4">
					<div class="flex items-center">
						<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-select v-model="formData.selectedChannelCompare" class="!w-[180px] ml-2" placeholder="全部事件">
							<el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<div class="flex items-center ml-2">
							<el-icon class="!text-blue-500 mr-1"><Opportunity /></el-icon>
							添加新的自定义事件，请前往<el-button link type="primary">事件管理</el-button>
						</div>
					</div>
				</div>
			</div>
			<div class="el-card p-9 mt-2">
				<div class="flex justify-between items-center mb-2">
					<Title left-line 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>
											<span
												class="um-vc-text"
												title="当自定义事件、事件参数、参数值超出版本配额，超出部分将无法正常收数，请您关注当前版本配额，并按需升级"
												style="color: rgb(0, 0, 0); font-size: 12px"
												>当自定义事件、事件参数、参数值超出版本配额，超出部分将无法正常收数，请您关注当前版本配额，并按需升级</span
											>
										</div>
									</div>
								</template>
							</el-popover>
						</template>
					</Title>
					<div class="flex items-center">
						<el-button link class="ml-2" type="primary">导出</el-button>
					</div>
				</div>
				<!-- 明细表格 -->
				<div class="mt-3">
					<el-table :data="pagedTableRows" border height="calc(100vh - 414px)">
						<el-table-column prop="date" label="事件ID" 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-column prop="hyyh" label="昨日独立用户数" align="center" sortable min-width="140" />
						<el-table-column prop="ratio" label="跳出率" align="center" min-width="220" />
						<el-table-column fixed="right" label="详情" align="center" min-width="140">
							<template #default="scope">
								<el-button type="primary" link @click="onDetailClick(scope.row)">查看</el-button>
							</template>
						</el-table-column>
					</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<Record<string, any>>({
	selectedChannelCompare: '',
});

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>
.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>
