<template>
	<div class="layout-padding">
		<div class="!overflow-auto px-1">
			

			<!-- 头部筛选区域 -->
			<div class="el-card p-9">
				<Title :title="t('activations.analytics')">
				<template #default>
					<el-popover class="box-item" placement="right" trigger="hover" width="250">
						<template #reference>
							<el-icon class="ml-1" style="color: #a4b8cf"><QuestionFilled /></el-icon>
						</template>
						<template #default>
							<div class="ant-popover-inner-content">
								<div class="um-page-tips-content" style="line-height: 24px">
									<p>
										<span class="highlight">启动次数：</span
										><span
											>打开应用视为启动。完全退出或后台运行超过30s后再次进入应用，视为一次新启动。开发过程中可以通过setSessionContinueMills来自定义两次启动的间隔，默认30s</span
										>
									</p>
									<p><span class="highlight">启动次数占比：</span><span>某日/周/月的启动次数占所选时间段总启动次数的比例</span></p>
									<p>
										<span
											>按天、周或月查看数据可进行版本、渠道的交叉筛选，小时数据最多展示7天并且不支持筛选。周区间定义为周日至次周周六。按周（按月）显示时，界面上用每周的周日（每个月的第一日）来代表该周（该月）</span
										>
									</p>
								</div>
							</div>
						</template>
					</el-popover>
				</template>
			</Title>
				<div class="mt-2">
					<el-row shadow="hover" class="">
						<el-form :inline="true" :model="formData" ref="queryRef">
							<el-form-item>
								<el-date-picker
									v-model="formData.time"
									type="daterange"
									value-format="YYYY-MM-DD"
									:disabled-date="disableFuture"
									@change="handleRangeChange"
									class="!w-[250px]"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
								/>
							</el-form-item>

							<el-form-item>
								<FilterSelect v-model="formData.channel" type="channel" @change="query" class="!w-[180px] ml-2" />
							</el-form-item>
							<el-form-item>
								<FilterSelect v-model="formData.version" type="version" @change="query" class="!w-[180px] ml-2" />
							</el-form-item>
						</el-form>
					</el-row>
				</div>
			</div>

			<!-- 新增趋势模块 -->
			<div class="mt-3">
				<InitiateNumber :form-data="formData" @query="query" />
			</div>

			
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';

const { t } = useI18n();
const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
const FilterSelect = defineAsyncComponent(() => import('/@/components/common/filter-select.vue'));
const InitiateNumber = defineAsyncComponent(() => import('./components/initiateNumber.vue'));
// 计算默认时间范围（半个月前到今天）
const getDefaultDateRange = () => {
	const endDate = dayjs();
	const startDate = endDate.subtract(15, 'day');
	return [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')];
};
const formData = ref<Record<string, any>>({
	time: getDefaultDateRange(), // 时间范围
});
const query = () => {
	console.log(formData.value);
};

function disableFuture(date: Date) {
	const today = new Date();
	today.setHours(0, 0, 0, 0);
	return date.getTime() > today.getTime();
}

function handleRangeChange(val: [string, string] | null) {
	if (!val) {
		query();
		return;
	}
	const [startStr, endStr] = val;
	const start = dayjs(startStr);
	let end = dayjs(endStr);
	// 限制最大跨度为两年（按天计算，不含边界再减一天）
	if (end.diff(start, 'day') >= 365 * 2) {
		end = start.add(2, 'year').subtract(1, 'day');
		formData.value.time = [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')];
	}
	query();
}
</script>

<style lang="scss" scoped>
.el-form-item--default {
	margin-bottom: 0;
}
.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type,
.el-form.el-form--inline .el-form-item--small.el-form-item:last-of-type {
	margin-bottom: 0 !important;
}
</style>
