<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<cl-flex1 />

			<!-- 用户筛选 -->
			<el-input
				v-model="filters.keyword"
				placeholder="搜索日报内容"
				clearable
				@input="onFilterChange"
				style="width: 200px; margin-right: 10px"
			>
				<template #prefix>
					<el-icon><Search /></el-icon>
				</template>
			</el-input>

			<!-- 日期范围筛选 -->
			<el-date-picker
				v-model="dateRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				@change="onDateRangeChange"
				style="width: 240px; margin-right: 10px"
			/>

			<!-- 状态筛选 -->
			<el-select
				v-model="filters.status"
				placeholder="提交状态"
				clearable
				@change="onFilterChange"
				style="width: 120px; margin-right: 10px"
			>
				<el-option label="草稿" :value="0" />
				<el-option label="已提交" :value="1" />
			</el-select>
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页 -->
			<cl-pagination />
		</cl-row>

		<!-- 查看详情 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'dailyreport-list'
});

import { ref } from 'vue';
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { Search } from '@element-plus/icons-vue';

const { service } = useCool();

// 日期时间格式化函数
const formatDateTime = (row: any, column: any, cellValue: any) => {
	if (!cellValue) return '-';
	// ISO 8601 格式转换为 YYYY-MM-DD HH:mm:ss
	const date = new Date(cellValue);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	const hours = String(date.getHours()).padStart(2, '0');
	const minutes = String(date.getMinutes()).padStart(2, '0');
	const seconds = String(date.getSeconds()).padStart(2, '0');
	return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 筛选条件
const filters = ref<any>({
	keyword: undefined,
	status: undefined,
	startDate: undefined,
	endDate: undefined
});

// 日期范围
const dateRange = ref<any>(null);

// cl-table 表格配置
const Table = useTable({
	columns: [
		{
			label: 'ID',
			prop: 'id',
			width: 80
		},
		{
			label: '用户ID',
			prop: 'userId',
			width: 100
		},
		{
			label: '日报日期',
			prop: 'reportDate',
			width: 120,
			sortable: 'custom'
		},
		{
			label: '输入方式',
			prop: 'inputType',
			width: 100,
			dict: [
				{
					label: '文字输入',
					value: 0,
					type: 'info'
				},
				{
					label: '语音输入',
					value: 1,
					type: 'primary'
				}
			]
		},
		{
			label: '提交状态',
			prop: 'status',
			width: 100,
			dict: [
				{
					label: '草稿',
					value: 0,
					type: 'warning'
				},
				{
					label: '已提交',
					value: 1,
					type: 'success'
				}
			]
		},
		{
			label: '日报内容',
			prop: 'userEditedContent',
			minWidth: 300,
			showOverflowTooltip: true
		},
		{
			label: '提交时间',
			prop: 'submitTime',
			minWidth: 160,
			sortable: 'custom',
			formatter: formatDateTime
		},
		{
			label: '创建时间',
			prop: 'createTime',
			minWidth: 160,
			sortable: 'custom',
			formatter: formatDateTime
		},
		{
			type: 'op',
			width: 100,
			buttons: ['info']
		}
	]
});

// cl-upsert 查看详情配置
const Upsert = useUpsert({
	dialog: {
		width: '800px',
		title: '日报详情'
	},
	props: {
		labelWidth: '130px'
	},
	items: [
		{
			label: '用户ID',
			prop: 'userId',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '日报日期',
			prop: 'reportDate',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '输入方式',
			prop: 'inputTypeText',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '提交状态',
			prop: 'statusText',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '原始输入内容',
			prop: 'originalText',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 4,
					readonly: true
				}
			}
		},
		{
			label: 'AI格式化内容',
			prop: 'aiFormattedContent',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 6,
					readonly: true
				}
			}
		},
		{
			label: '用户最终编辑内容',
			prop: 'userEditedContent',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 8,
					readonly: true
				}
			}
		},
		{
			label: '提交时间',
			prop: 'submitTime',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '创建时间',
			prop: 'createTime',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '更新时间',
			prop: 'updateTime',
			component: { name: 'el-input', props: { readonly: true } }
		}
	],
	op: {
		hidden: true // 隐藏详情对话框的操作按钮
	}
});

// cl-crud 配置
const Crud = useCrud(
	{
		service: service.dailyreport.report
	},
	(app) => {
		app.refresh();
	}
);

// 日期范围变化
function onDateRangeChange() {
	if (dateRange.value && dateRange.value.length === 2) {
		filters.value.startDate = dateRange.value[0].toISOString().split('T')[0];
		filters.value.endDate = dateRange.value[1].toISOString().split('T')[0];
	} else {
		filters.value.startDate = undefined;
		filters.value.endDate = undefined;
	}
	onFilterChange();
}

// 筛选条件变化
function onFilterChange() {
	// 构建完整的查询参数
	const params: any = {
		page: 1, // 筛选条件变化时重置到第一页
		size: 20
	};

	// 添加筛选条件
	if (filters.value.keyword) {
		params.keyword = filters.value.keyword;
	}
	if (filters.value.status !== undefined && filters.value.status !== null) {
		params.status = filters.value.status;
	}
	if (filters.value.startDate) {
		params.startDate = filters.value.startDate;
	}
	if (filters.value.endDate) {
		params.endDate = filters.value.endDate;
	}

	console.log('筛选参数:', params);

	// 使用 refresh 方法刷新数据
	Crud.value?.refresh(params);
}
</script>

<style lang="scss" scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
