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} 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'
    })

    return {
        crudOptions: {
            request: {
                pageRequest,
                addRequest,
                editRequest,
                delRequest
            },
            rowHandle: {
                buttons: {
                    edit: {
                        show: false
                    },
                    view: {
                        click({index,row}) {
                            crudExpose.openView({index,row})
                            if(tabActivted.value === 'receive'){
                                viewRequest({row})
                                crudExpose.doRefresh()
                            }
                        }
                    }
                }
            },
            columns: {
                id: {
                    title: 'id',
                    form: {
                        show: false,
                    }
                },
                title: {
                    title: '标题',
                    search: {
                        show: true,
                    },
                    type: ["text", "colspan"],
                    form: {
                        rules: [ // 表单校验规则
                            {
                                required: true,
                                message: '必填项'
                            }
                        ],
                        component: {span: 24, placeholder: '请输入标题'}
                    }
                },
                is_read: {
                    title: '是否已读',
                    type: 'dict-select',
                    column: {
                        show: IsReadFunc,
                    },
                    dict: dict({
                        data: [
                            {label: '已读', value: true, color: 'success'},
                            {label: '未读', value: false, color: 'danger'}
                        ]
                    }),
                    form: {
                        show: false
                    }
                },
                target_type: {
                    title: '目标类型',
                    type: ['dict-radio', 'colspan'],
                    width: 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: '必选项',
                                trigger: ['blur', 'change']
                            }
                        ]
                    }
                },
                target_user: {
                    title: '目标用户',
                    search: {
                        disabled: true
                    },
                    width: 130,
                    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;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}