import * as api from './api';
import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
import tableSelector from '/@/components/tableSelector/index.vue';
import {shallowRef, computed, ref, inject} from 'vue';
import manyToMany from '/@/components/manyToMany/index.vue';

const { compute } = useCompute();

interface CreateCrudOptionsTypes {
	crudOptions: CrudOptions;
}

export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudExpose: CrudExpose; tabActivted: any }): CreateCrudOptionsTypes {
	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 hasPermissions = inject("$hasPermissions")

	return {
		crudOptions: {
			request: {
				pageRequest,
				addRequest,
				editRequest,
				delRequest,
			},
			rowHandle: {
				fixed:'right',
				width:150,
				buttons: {
					edit: {
						show: false,
					},
					view: {
						text:"查看",
						type:'text',
						iconRight:'View',
						show:hasPermissions("messageCenter:Search"),
						click({ index, row }) {
							crudExpose.openView({ index, row });
							if (tabActivted.value === 'receive') {
								viewRequest({ row });
								crudExpose.doRefresh();
							}
						},
					},
					remove: {
						iconRight: 'Delete',
						type: 'text',
						show:hasPermissions('messageCenter:Delete')
					},
				},
			},
			columns: {
				id: {
					title: 'id',
					form: {
						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.target_dept_name;
							}),
							tableConfig: {
								url: '/api/system/dept/all_dept/',
								label: 'name',
								value: 'id',
								isTree: true,
								isMultiple: true,
								columns: [
									{
										prop: 'name',
										label: '部门名称',
									},
									{
										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: true,
							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;
								},
							},
						},
					},
				},
			},
		},
	};
};