import * as api from './api';
import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import tableSelector from '/@/components/tableSelector/index.vue';
import { shallowRef, computed, ref } from 'vue';
import manyToMany from '/@/components/manyToMany/index.vue';
import { auth } from '/@/utils/authFunction';
import { ElMessage, ElMessageBox } from 'element-plus';
const { compute } = useCompute();

export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
	const { tabActivted } = context; //从context中获取tabActivted

	const pageRequest = async (query: PageQuery) => {
		if (tabActivted.value === 'receive') {
			return await api.GetSelfReceive(query);
		}
		return await api.GetList(query);
	};
	const editRequest = async ({ form, row }: EditReq) => {
		form.id = row.id;
		return await api.UpdateObj(form);
	};
	const delRequest = async ({ row }: DelReq) => {
		return await api.DelObj(row.id);
	};
	const addRequest = async ({ form }: AddReq) => {
		return await api.AddObj(form);
	};

	const viewRequest = async ({ row }: { row: any }) => {
		return await api.GetObj(row.id);
	};

	const IsReadFunc = computed(() => {
		return tabActivted.value === 'receive';
	});

	// 选中行的状态管理
	const selectedIds = ref<any[]>([]);

	// 选择变化处理
	const onSelectionChange = (changed: any[]) => {
		console.log("selection", changed);
		selectedIds.value = changed.map((item: any) => item.id);
	};

	// 将selectedIds暴露给crudExpose
	(crudExpose as any).selectedIds = selectedIds;

	// 批量已读功能
	const handleBatchRead = async () => {
		try {
			if (selectedIds.value.length === 0) {
				ElMessage.warning('请先选择要标记为已读的消息');
				return;
			}

			// 确认对话框
			await ElMessageBox.confirm(
				`确定要将选中的 ${selectedIds.value.length} 条消息标记为已读吗？`,
				'批量已读确认',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			);
			// 调用批量已读API
			await api.MarkMessagesRead(selectedIds.value);
			
			ElMessage.success('批量已读操作成功');
			
			// 清空选中状态
			selectedIds.value = [];
			
			// 刷新表格
			crudExpose.doRefresh();
			location.reload()
		} catch (error) {
			if (error !== 'cancel') {
				console.error('批量已读失败:', error);
				ElMessage.error('批量已读操作失败');
			}
		}
	};

	return {
		crudOptions: {
			toolbar:{
                buttons:{
                    search:{show:false},
                    // 刷新按钮
                    refresh:{
                        show:false},
                    // 紧凑模式
                    compact:{show:false},
                    // 导出按钮
                    export:{
                        text: '导出',
                        type: 'primary',
                        size: 'small',
                        icon: 'upload',
                        circle: false,
                        display: true,
						show:false
                    },
                    // 列设置按钮
                    columns:{
                        show:false
                    },
                  
                }
            },
			request: {
				pageRequest,
				addRequest,
				editRequest,
				delRequest,
			},
			// 覆盖 fast-crud 默认 on_search（默认 doRefresh({ goFirstPage: true })），搜索/重置后保留当前页码
			search: {
				on_search() {
					crudExpose.doRefresh({ goFirstPage: false });
				},
			},
			table: {
				rowKey: 'id',
				selection: {
					enabled: true,
					multiple: true,
				},
				onSelectionChange,
			},
			actionbar: {
				buttons: {
					add: {
						show:false,
						// show: computed(() => {
						// 	return tabActivted.value !== 'receive' && auth('messageCenter:Create');
						// }),
					},
					  // 全部已读按钮
					  batchRead: {
                        text: '全部已读',
                        circle: false,
						type: 'primary',
                        display: true,
                        show: computed(() => tabActivted.value === 'receive'),
                        click: handleBatchRead,
                    },
				},
			},
			form:{
				wrapper: {
					buttons: {
						ok:{
							text:'提交',
							show:compute((row) => {
							return row.mode !=='view'
							})
						}
					}
				}
			},
			rowHandle: {
				fixed: 'right',
				width: 200,
				buttons: {
					edit: {
						show: false,
					},
					view: {
						text: '查看',
						type: 'primary',
						// iconRight: 'View',
						show: auth('messageCenter:Search'),
						click({ index, row }) {
							crudExpose.openView({ index, row });
							if (tabActivted.value === 'receive') {
								viewRequest({ row });
								crudExpose.doRefresh();
							}
						},
					},
					remove: {
						// iconRight: 'Delete',
						type: 'danger',
						show: auth('messageCenter:Delete'),
					},
				},
			},
			columns: {
				/* id: {
					title: 'id',
					form: {
						show: false,
					},
				}, */
				$checked: {
					title: "选择",
					form: { show: false },
					column: {
						type: "selection",
						align: "center",
						width: "55px",
						columnSetDisabled: true, //禁止在列设置中选择
						show: computed(() => tabActivted.value === 'receive'),
						selectable(row: any, index: any) {
							return row.id;
						}
					}
				},
				_index: {
					title: '序号',
					form: { show: false },
					column: {
						align: 'center',
						width: '70px',
						columnSetDisabled: true,
						formatter: (context: any) => {
							let index = context.index ?? 1;
							let pagination = crudExpose!.crudBinding.value.pagination;
							return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
						},
					},
				},
				search:{
					title: '关键字搜索',
					search: { show: true,type: 'input', },
					type: 'input',
					form: {
						component: { placeholder: '请输入' },
						show:false},
					column: {show:false}
				},
				title: {
					title: '标题',
					search: {
						show: true,
					},
					type: ['text', 'colspan'],
					column: {
						minWidth: 120,
					},
					form: {
						rules: [
							// 表单校验规则
							{
								required: true,
								message: '必填项',
							},
						],
						component: { span: 24, placeholder: '请输入标题' },
					},
				},
				is_read: {
					title: '是否已读',
					type: 'dict-select',
					column: {
						show: IsReadFunc.value,
					},
					dict: dict({
						data: [
							{ label: '已读', value: true, color: 'success' },
							{ label: '未读', value: false, color: 'danger' },
						],
					}),
					form: {
						show: false,
					},
				},
				target_type: {
					title: '目标类型',
					type: ['dict-radio', 'colspan'],
					column: {
						minWidth: 120,
					},
					dict: dict({
						data: [
							{ value: 0, label: '按用户' },
							{ value: 1, label: '按角色' },
							{
								value: 2,
								label: '按部门',
							},
							{ value: 3, label: '通知公告' },
						],
					}),
					form: {
						component: {
							optionName: 'el-radio-button',
						},
						rules: [
							{
								required: true,
								message: '必选项',
								// @ts-ignore
								trigger: ['blur', 'change'],
							},
						],
					},
				},
				target_user: {
					title: '目标用户',
					search: {
						disabled: true,
					},
					form: {
						component: {
							name: shallowRef(tableSelector),
							vModel: 'modelValue',
							displayLabel: compute(({ row }) => {
								if (row) {
									return row.user_info;
								}
								return null;
							}),
							tableConfig: {
								url: '/api/system/user/',
								label: 'name',
								value: 'id',
								isMultiple: true,
								columns: [
									{
										prop: 'name',
										label: '用户名称',
										width: 120,
									},
									{
										prop: 'phone',
										label: '用户电话',
										width: 120,
									},
								],
							},
						},
						show: compute(({ form }) => {
							return form.target_type === 0;
						}),
						rules: [
							// 表单校验规则
							{
								required: true,
								message: '必填项',
							},
						],
					},
					column: {
						show: false,
						component: {
							name: shallowRef(manyToMany),
							vModel: 'modelValue',
							bindValue: compute(({ row }) => {
								return row.user_info;
							}),
							displayLabel: 'name',
						},
					},
				},
				target_role: {
					title: '目标角色',
					search: {
						disabled: true,
					},
					width: 130,
					form: {
						component: {
							name: shallowRef(tableSelector),
							vModel: 'modelValue',
							displayLabel: compute(({ row }) => {
								if (row) {
									return row.role_info;
								}
								return null;
							}),
							tableConfig: {
								url: '/api/system/role/',
								label: 'name',
								value: 'id',
								isMultiple: true,
								columns: [
									{
										prop: 'name',
										label: '角色名称',
									},
									{
										prop: 'key',
										label: '权限标识',
									},
								],
							},
						},
						show: compute(({ form }) => {
							return form.target_type === 1;
						}),
						rules: [
							// 表单校验规则
							{
								required: true,
								message: '必填项',
							},
						],
					},
					column: {
						show: false,
						component: {
							name: shallowRef(manyToMany),
							vModel: 'modelValue',
							bindValue: compute(({ row }) => {
								return row.role_info;
							}),
							displayLabel: 'name',
						},
					},
				},
				target_dept: {
					title: '目标部门',
					search: {
						disabled: true,
					},
					width: 130,
					type: 'table-selector',
					form: {
						component: {
							name: shallowRef(tableSelector),
							vModel: 'modelValue',
							displayLabel: compute(({ form }) => {
								return form.dept_info;
							}),
							tableConfig: {
								url: '/api/system/dept/all_dept/',
								label: 'name',
								value: 'id',
								isTree: true,
								isMultiple: true,
								columns: [
									{
										prop: 'name',
										label: '部门名称',
										width: 150,
									},
									{
										prop: 'status_label',
										label: '状态',
									},
									{
										prop: 'parent_name',
										label: '父级部门',
									},
								],
							},
						},
						show: compute(({ form }) => {
							return form.target_type === 2;
						}),
						rules: [
							// 表单校验规则
							{
								required: true,
								message: '必填项',
							},
						],
					},
					column: {
						show: false,
						component: {
							name: shallowRef(manyToMany),
							vModel: 'modelValue',
							bindValue: compute(({ row }) => {
								return row.dept_info;
							}),
							displayLabel: 'name',
						},
					},
				},
				content: {
					title: '内容',
					column: {
						width: 300,
						show: false,
					},
					type: ['editor-wang5', 'colspan'],
					form: {
						rules: [
							// 表单校验规则
							{
								required: true,
								message: '必填项',
							},
						],
						component: {
							disabled: false,
							id: '1', // 当同一个页面有多个editor时，需要配置不同的id
							editorConfig: {
								// 是否只读
								readOnly: compute((context) => {
									const { mode } = context;
									if (mode === 'add') {
										return false;
									}
									return true;
								}),
							},
							uploader: {
								type: 'form',
								buildUrl(res: any) {
									return res.url;
								},
							},
						},
					},
				},
			},
		},
	};
}
