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

			<!-- 同步类型筛选 -->
			<el-select
				v-model="syncTypeFilter"
				placeholder="同步类型"
				clearable
				@change="onFilterChange"
				style="width: 120px; margin-right: 10px"
			>
				<el-option label="手动" :value="0" />
				<el-option label="自动" :value="1" />
			</el-select>

			<!-- 同步状态筛选 -->
			<el-select
				v-model="syncStatusFilter"
				placeholder="同步状态"
				clearable
				@change="onFilterChange"
				style="width: 120px; margin-right: 10px"
			>
				<el-option label="失败" :value="0" />
				<el-option label="成功" :value="1" />
				<el-option label="部分成功" :value="2" />
			</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: 'dingtalk-sync-log'
});

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

const { service } = useCool();

// 筛选条件
const syncTypeFilter = ref<number | undefined>(undefined);
const syncStatusFilter = ref<number | undefined>(undefined);

// cl-table 表格配置
const Table = useTable({
	columns: [
		{
			label: 'ID',
			prop: 'id',
			width: 80
		},
		{
			label: '同步类型',
			prop: 'syncType',
			width: 100,
			dict: [
				{
					label: '手动',
					value: 0,
					type: 'primary'
				},
				{
					label: '自动',
					value: 1,
					type: 'info'
				}
			]
		},
		{
			label: '同步状态',
			prop: 'syncStatus',
			width: 110,
			dict: [
				{
					label: '失败',
					value: 0,
					type: 'danger'
				},
				{
					label: '成功',
					value: 1,
					type: 'success'
				},
				{
					label: '部分成功',
					value: 2,
					type: 'warning'
				}
			]
		},
		{
			label: '部门成功',
			prop: 'deptSuccessCount',
			width: 100
		},
		{
			label: '部门失败',
			prop: 'deptFailCount',
			width: 100
		},
		{
			label: '用户成功',
			prop: 'userSuccessCount',
			width: 100
		},
		{
			label: '用户失败',
			prop: 'userFailCount',
			width: 100
		},
		{
			label: '耗时(毫秒)',
			prop: 'costTime',
			width: 110
		},
		{
			label: '错误信息',
			prop: 'errorMsg',
			minWidth: 200,
			showOverflowTooltip: true
		},
		{
			label: '同步时间',
			prop: 'createTime',
			minWidth: 160,
			sortable: 'custom'
		},
		{
			type: 'op',
			width: 80,
			buttons: ['info']
		}
	]
});

// cl-upsert 查看详情配置
const Upsert = useUpsert({
	dialog: {
		width: '700px',
		title: '同步日志详情'
	},
	props: {
		labelWidth: '130px'
	},
	items: [
		{
			label: '同步类型',
			prop: 'syncTypeText',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '同步状态',
			prop: 'syncStatusText',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '部门同步成功数',
			prop: 'deptSuccessCount',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '部门同步失败数',
			prop: 'deptFailCount',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '用户同步成功数',
			prop: 'userSuccessCount',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '用户同步失败数',
			prop: 'userFailCount',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '耗时(毫秒)',
			prop: 'costTime',
			component: { name: 'el-input', props: { readonly: true } }
		},
		{
			label: '错误信息',
			prop: 'errorMsg',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					rows: 6,
					readonly: true
				}
			}
		},
		{
			label: '同步时间',
			prop: 'createTime',
			component: { name: 'el-input', props: { readonly: true } }
		}
	],
	op: {
		hidden: true // 隐藏详情对话框的操作按钮
	}
});

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

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

	// 注意：0 是有效值，所以不能用 if (value) 判断
	// 只有当筛选值不是 undefined/null 时才添加到参数中
	if (syncTypeFilter.value !== undefined && syncTypeFilter.value !== null) {
		params.syncType = syncTypeFilter.value;
	}
	if (syncStatusFilter.value !== undefined && syncStatusFilter.value !== null) {
		params.syncStatus = syncStatusFilter.value;
	}

	console.log('筛选参数:', params); // 调试日志

	// 使用 refresh 方法刷新数据，传入完整的参数对象
	Crud.value?.refresh(params);
}
</script>
