<template>
	<div class="system-dic-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
					<el-form-item label="客服平台" prop="status" style="width: 200px">
						<el-select v-model="tableData.param.status" placeholder="小红书" clearable size="default" style="width: 240px">
							<el-option label="小红书" value="xiaohongshu" />
							<el-option label="抖音" value="douyin" />
							<el-option label="快手" value="kuaishou" />
						</el-select>
					</el-form-item>

					<el-form-item label="" prop="dateRange">
						<el-date-picker
							v-model="tableData.param.dateRange"
							size="default"
							style="width: 240px"
							value-format="YYYY-MM-DD"
							type="daterange"
							range-separator="-"
							start-placeholder="请选择开始日期"
							end-placeholder="请选择结束日期"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="dataList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" @click="resetQuery(queryRef)">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
						<el-button size="default" type="info" class="ml10" @click="handleExport" style="background-color: deeppink; border: 0">
							<el-icon>
								<ele-Download />
							</el-icon>
							导出
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%">
				<!-- <el-table-column type="selection" width="55" align="center" /> -->
				<el-table-column label="日期" align="center" prop="date" width="180">
					<template #default="{ row }">
						{{ formatTime(row.date) }}
					</template>
				</el-table-column>
				<el-table-column label="客服平台" align="center" prop="customerServicePlatform" />
				<el-table-column label="客服ID" align="center" prop="customerServiceId" />
				<el-table-column label="客服姓名" align="center" prop="customerServiceName" />
				<el-table-column label="进线人数" align="center" prop="inboundCount" width="130" :show-overflow-tooltip="true" />
				<el-table-column label="开口人数" align="center" prop="activeCount" :show-overflow-tooltip="true" />
				<el-table-column label="留资卡发送数量" align="center" prop="contactCardSentCount" />
				<el-table-column label="名片发送数" align="center" prop="nameCardSentCount" />
				<el-table-column label="留资人数" align="center" prop="status" />
				<el-table-column label="接待人数" align="center" prop="servedCount" />
				<el-table-column label="30秒回复率" align="center" prop="responseRate30s" />
				<el-table-column label="60秒回复率" align="center" prop="responseRate60s" />
				<el-table-column label="3分钟回复率" align="center" prop="responseRate360s" />
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="dataList"
			/>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { getDataList } from '/@/api/customerService/report';

// 定义接口
interface TableDataRow {
	infoId: number;
	loginName: string;
	ipaddr: string;
	loginLocation: string;
	browser: string;
	os: string;
	status: number;
	msg: string;
	loginTime: string;
	module: string;
	platform: string;
}
interface TableDataParam {
	pageNum: number;
	pageSize: number;
	dateRange: string[];
	status: string;
	ipaddr: string;
	loginLocation: any;
	userName: string;
}

interface TableData {
	data: Array<TableDataRow>;
	total: number;
	loading: boolean;
	param: TableDataParam;
}

// ==================== 时间处理函数 ====================
/**
 * 格式化时间显示
 */
const formatTime = (time: string | number | Date): string => {
	if (!time) return '-';

	try {
		let date: Date;

		if (time instanceof Date) {
			date = time;
		} else if (typeof time === 'string') {
			date = new Date(time);
		} else {
			let timestamp = time;
			if (timestamp > 1000000000000) {
				// 已经是毫秒时间戳
			} else if (timestamp > 1000000000) {
				// 秒时间戳，转换为毫秒
				timestamp = timestamp * 1000;
			}
			date = new Date(timestamp);
		}

		if (isNaN(date.getTime())) {
			return String(time);
		}

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');

		return `${year}-${month}-${day}`;
	} catch (error) {
		console.error('时间格式化错误:', error);
		return String(time);
	}
};

// 响应式数据
const queryRef = ref<FormInstance>();
const tableData = reactive<TableData>({
	data: [],
	total: 0,
	loading: false,
	param: {
		pageNum: 1,
		pageSize: 10,
		dateRange: [],
		status: '',
		ipaddr: '',
		loginLocation: '',
		userName: '',
	},
});

// 方法定义
// 获取数据列表
const dataList = async () => {
	try {
		tableData.loading = true;

		const res = await getDataList(tableData.param);
		console.log(res);

		tableData.data = res.data.list;
		tableData.total = res.data.total;
	} catch (error) {
		console.error('获取数据失败:', error);
		ElMessage.error('获取数据失败');
	} finally {
		tableData.loading = false;
	}
};

// 重置查询
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;

	formEl.resetFields();
	tableData.param = {
		pageNum: 1,
		pageSize: 10,
		dateRange: [],
		status: '',
		ipaddr: '',
		loginLocation: '',
		userName: '',
	};

	nextTick(() => {
		dataList();
	});
};

// 导出数据
const handleExport = () => {
	ElMessage.info('导出功能开发中');
};

// 初始化表格数据
const initTableData = () => {
	dataList();
};

// 生命周期
onMounted(() => {
	// 使用 nextTick 确保DOM已渲染完成
	nextTick(() => {
		initTableData();
	});
});
</script>

<style scoped>
.system-dic-container {
	padding: 20px;
}

.system-user-search {
	margin-bottom: 15px;
}

.mb15 {
	margin-bottom: 15px;
}

.ml10 {
	margin-left: 10px;
}
</style>
