<template>
	<div class="layout-padding">
		<div class="!overflow-auto px-1">
			<!-- 头部筛选区域 -->
			<div class="el-card p-9">
				<div class="flex justify-between">
					<Title :title="t('activeUser.analytics')">
						<el-popover class="box-item" placement="right" trigger="hover" width="400">
							<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>启动过应用的用户（去重），启动过一次的用户即视为活跃用户，包括新用户与老用户</span>
										</p>
										<p><span class="highlight">活跃构成：</span><span>活跃用户中新增用户的占比比例</span></p>
										<p><span class="highlight">活跃粘度：</span><span>DAU/过去7日活跃用户，DAU/过去30日活跃用户</span></p>
										<p><span class="highlight">过去7日活跃用户：</span><span>过去7日（不含今日）的活跃用户数（去重）</span></p>
										<p><span class="highlight">过去30日活跃用户：</span><span>过去30日（不含今日）的活跃用户数（去重）</span></p>
										<p><span class="highlight">分时活跃用户：</span><span>活跃用户在24小时中的分布情况（每小时间去重）&ZeroWidthSpace;</span></p>
										<p><span class="highlight">周活跃率：</span><span>周活跃用户占截止本周累计用户的比例</span></p>
										<p><span class="highlight">月活跃率：</span><span>月活跃用户占截止本月累计用户的比例</span></p>
										<p>
											<span
												>按天、周或月查看数据可进行版本、渠道的交叉筛选。周区间定义为周日至次周周六。按周（按月）显示时，界面上用每周的周日（每个月的第一日）来代表该周（该月）</span
											>
										</p>
									</div>
								</div>
							</template>
						</el-popover>
					</Title>
					<!-- <div class="">
						<el-button type="primary">{{ t('addUser.growth') }}</el-button>
						<el-button type="primary">{{ t('addUser.ai') }}</el-button>
					</div> -->
				</div>
				<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" :disabled="channelDisabled" type="channel" class="!w-[180px] ml-2" />
							</el-form-item>
							<el-form-item>
								<FilterSelect v-model="formData.version" :disabled="versionDisabled" type="version" class="!w-[180px] ml-2" />
							</el-form-item>
						</el-form>
					</el-row>
				</div>
			</div>

			<!-- 新增趋势模块 -->
			<div class="mt-3">
				<AddTrend :form-data="formData" @query="isDisabled" />
			</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 AddTrend = defineAsyncComponent(() => import('./components/AddTrend.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 channelDisabled = ref(false);
const versionDisabled = ref(false);
const isDisabled = (type: string) => {
	if (type == 'disabled') {
		versionDisabled.value = true;
		channelDisabled.value = true;
	}else{
		versionDisabled.value = false;
		channelDisabled.value = false;
	}
};

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) {
		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')];
	}
}
</script>

<style lang="scss" scoped>
.highlight {
	color: #409eff;
}
.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>
