import * as api from './api';
import {
    dict,
    UserPageQuery,
    AddReq,
    DelReq,
    EditReq,
    compute,
    CreateCrudOptionsProps,
    CreateCrudOptionsRet
} from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary';
import { successMessage } from '/@/utils/message';
import { auth } from '/@/utils/authFunction';
import { SystemConfigStore } from "/@/stores/systemConfig";
import { storeToRefs } from "pinia";
import { computed, ref, h } from "vue";
import { Md5 } from 'ts-md5';
import { commonCrudConfig } from "/@/utils/commonCrud";
import { ElMessageBox, ElDialog, ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';

interface APIResponseData {
    code?: number;
    data: any;
    msg?: string;
}
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
    const pageRequest = async (query: UserPageQuery) => {
        query.user_type = '0';
        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 exportRequest = async (query: UserPageQuery) => {
        return await api.exportData(query)
    }

    const resetPasswordDialogVisible = ref(false);
    const resetPasswordForm = ref({
        newPassword: '',
        confirmPassword: ''
    });
    const resetPasswordFormRef = ref();
    const currentResetUserId = ref<number | null>(null);

    const validatePassword = (rule: any, value: string, callback: Function) => {
        const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
        if (!value) {
            callback(new Error('请输入新密码'));
        } else if (!pwdRegex.test(value)) {
            callback(new Error('密码复杂度太低(密码中必须包含字母、数字，长度8-30位)'));
        } else {
            callback();
        }
    };

    const validateConfirmPassword = (rule: any, value: string, callback: Function) => {
        if (!value) {
            callback(new Error('请再次输入密码'));
        } else if (value !== resetPasswordForm.value.newPassword) {
            callback(new Error('两次输入密码不一致'));
        } else {
            callback();
        }
    };

    const resetPasswordRules = {
        newPassword: [
            { required: true, validator: validatePassword, trigger: 'blur' }
        ],
        confirmPassword: [
            { required: true, validator: validateConfirmPassword, trigger: 'blur' }
        ]
    };

    const openResetPasswordDialog = (row: any) => {
        currentResetUserId.value = row.id;
        resetPasswordForm.value = {
            newPassword: '',
            confirmPassword: ''
        };
        resetPasswordDialogVisible.value = true;
    };

    const closeResetPasswordDialog = () => {
        resetPasswordDialogVisible.value = false;
        currentResetUserId.value = null;
        resetPasswordForm.value = {
            newPassword: '',
            confirmPassword: ''
        };
        if (resetPasswordFormRef.value) {
            resetPasswordFormRef.value.resetFields();
        }
    };

    const submitResetPassword = async () => {
        if (!resetPasswordFormRef.value) return;
        
        await resetPasswordFormRef.value.validate(async (valid: boolean) => {
            if (valid) {
                try {
                    await api.resetToDefaultPassword(currentResetUserId.value!, {
                        new_password: resetPasswordForm.value.newPassword
                    });
                    successMessage("重置密码成功");
                    closeResetPasswordDialog();
                } catch (error) {
                    console.error('重置密码失败:', error);
                }
            }
        });
    };

    const resetToDefaultPasswordRequest = async (row: EditReq) => {
        openResetPasswordDialog(row);
    }

    const systemConfigStore = SystemConfigStore()
    const { systemConfig } = storeToRefs(systemConfigStore)
    const getSystemConfig = computed(() => {
        // console.log(systemConfig.value)
        return systemConfig.value
    })


    // 创建重置密码对话框组件
    const resetPasswordDialog = () => {
        return h(ElDialog, {
            modelValue: resetPasswordDialogVisible.value,
            title: '修改密码',
            width: '400px',
            'onUpdate:modelValue': (val: boolean) => {
                if (!val) {
                    closeResetPasswordDialog();
                }
            },
            draggable: true
        }, {
            default: () => [
                h(ElForm, {
                    ref: (el: any) => {
                        if (el) {
                            resetPasswordFormRef.value = el;
                        }
                    },
                    model: resetPasswordForm.value,
                    rules: resetPasswordRules,
                    labelWidth: '100px',
                    labelPosition: 'left'
                }, {
                    default: () => [
                        h(ElFormItem, {
                            label: '新密码',
                            prop: 'newPassword',
                            required: true
                        }, {
                            default: () => h(ElInput, {
                                modelValue: resetPasswordForm.value.newPassword,
                                'onUpdate:modelValue': (val: string) => {
                                    resetPasswordForm.value.newPassword = val;
                                },
                                type: 'password',
                                placeholder: '请输入新密码',
                                showPassword: true,
                                clearable: true
                            })
                        }),
                        h(ElFormItem, {
                            label: '确认密码',
                            prop: 'confirmPassword',
                            required: true
                        }, {
                            default: () => h(ElInput, {
                                modelValue: resetPasswordForm.value.confirmPassword,
                                'onUpdate:modelValue': (val: string) => {
                                    resetPasswordForm.value.confirmPassword = val;
                                },
                                type: 'password',
                                placeholder: '请再次输入密码',
                                showPassword: true,
                                clearable: true
                            })
                        })
                    ]
                })
            ],
            footer: () => [
                h(ElButton, {
                    onClick: () => closeResetPasswordDialog()
                }, {
                    default: () => '取消'
                }),
                h(ElButton, {
                    type: 'primary',
                    onClick: () => submitResetPassword()
                }, {
                    default: () => '确定'
                })
            ]
        });
    };

    return {
        resetPasswordDialogVisible,
        resetPasswordForm,
        resetPasswordFormRef,
        resetPasswordRules,
        openResetPasswordDialog,
        closeResetPasswordDialog,
        submitResetPassword,
        resetPasswordDialog,
        crudOptions: {
            toolbar:{
                buttons:{
                    search:{show:false},
                    // 刷新按钮
                    refresh:{
                        show:false},
                    // 紧凑模式
                    compact:{show:false},
                    export:{
                      show:false  
                    },
                    // 导出按钮
                   /*  export:{
                        text: '导出',
                        type: 'primary',
                        size: 'small',
                        icon: 'upload',
                        circle: false,
                        display: true
                    }, */
                    // 列设置按钮
                    columns:{
                        show:false
                    },
                }
            },
            table: {
                remove: {
                    confirmMessage: '是否删除该用户？',
                },
            },
            request: {
                pageRequest,
                addRequest,
                editRequest,
                delRequest,
            },
            form: {
                initialForm: {
                    password: computed(() => {
                        return systemConfig.value['base.default_password']
                    }),
                }
            },
            actionbar: {
                buttons: {
                    add: {
                        show: auth('user:Create')
                    },
                    export: {
                        text: "导出",//按钮文字
                        title: "导出",//鼠标停留显示的信息
                        show: false,//auth('user:Export'),
                        click: (ctx: any) => ElMessageBox.confirm(
                            '确定重设密码吗？', '提示',
                            { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
                        ).then(() => resetToDefaultPasswordRequest(ctx.row))
                    }
                }
            },
            rowHandle: {
                //固定右侧
                fixed: 'right',
                width: 300,
                buttons: {
                    view: {
                        show: false,
                    },
                    edit: {
                        iconRight: 'Edit',
                        /* type: 'text', */
                        show: auth('user:Update'),
                    },
                    remove: {
                        iconRight: 'Delete',
                        /* type: 'text', */
                        show: auth('user:Delete'),
                    },
                    custom: {
                        text: '修改密码',
                        /* type: 'text', */
                        show: auth('user:ResetPassword'),
                        /* tooltip: {
                            placement: 'top',
                            content: '重设密码',
                        }, */
                        
                        //@ts-ignore
                        click: (ctx: any) => {
                            const { row } = ctx;
                            resetToDefaultPasswordRequest(row)
                        },
                    },
                },
            },
            columns: {
                _index: {
                    title: '序号',
                    form: { show: false },
                    column: {
                        type: 'index',
                        align: 'center',
                        width: '70px',
                        columnSetDisabled: true, //禁止在列设置中选择
                    },
                },
                username: {
                    title: '账号',
                    search: {
                        show: true,
                    },
                    type: 'input',
                    column: {
                        minWidth: 100, //最小列宽
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '账号必填项',
                            },
                        ],
                        component: {
                            placeholder: '请输入账号',
                        },
                    },
                },
                password: {
                    title: '密码',
                    type: 'password',
                    column: {
                        show: false,
                    },
                    editForm: {
                        show: true,
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '密码必填项',
                            },
                        ],
                        component: {

                            span: 12,
                            showPassword: true,
                            placeholder: '请输入密码',
                        },
                    },
                    valueResolve({ form }) {
                        if (form.password) {
                            form.password = Md5.hashStr(form.password)
                        }
                    }
                },
                name: {
                    title: '姓名',
                    search: {
                        show: true,
                    },
                    type: 'input',
                    column: {
                        minWidth: 100, //最小列宽
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '姓名必填项',
                            },
                        ],
                        component: {
                            span: 12,
                            placeholder: '请输入姓名',
                        },
                    },
                },
                dept: {
                    title: '部门',
                    search: {
                        disabled: true,
                    },
                    type: 'dict-tree',
                    dict: dict({
                        isTree: true,
                        url: '/api/system/dept/all_dept/',
                        value: 'id',
                        label: 'name'
                    }),
                    column: {
                        show: false,
                        minWidth: 200, //最小列宽
                        formatter({ value, row, index }) {
                            return row.dept_name_all
                        }
                    },
                    form: {
                        value: 1,
                        show: false,
                        component: {
                            filterable: true,
                            placeholder: '请选择',
                            props: {
                                checkStrictly: true,
                                props: {
                                    value: 'id',
                                    label: 'name',
                                },
                            },
                        },
                    },
                },
                role: {
                    title: '角色',
                    search: {
                        disabled: true,
                    },
                    type: 'dict-select',
                    dict: dict({
                        url: '/api/system/role/',
                        value: 'id',
                        label: 'name',
                    }),
                    column: {
                        minWidth: 200, //最小列宽
                        // formatter({ value, row, index }) {
                        //     const values = row.role_info.map((item: any) => item.name);
                        //     return values.join(',')
                        // }
                    },
                    form: {
                        rules: [
                            // 表单校验规则
                            {
                                required: true,
                                message: '必填项',
                            },
                        ],
                        component: {
                            multiple: true,
                            filterable: true,
                            placeholder: '请选择角色',
                        },
                    },
                },
                mobile: {
                    title: '手机号码',
                    search: {
                        show: false,
                    },
                    type: 'input',
                    column: {
                        minWidth: 120, //最小列宽
                    },
                    form: {
                        rules: [
                            {
                                max: 20,
                                message: '请输入正确的手机号码',
                                trigger: 'blur',
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: '请输入正确的手机号码',
                            },
                        ],
                        component: {
                            placeholder: '请输入手机号码',
                        },
                    },
                },
                email: {
                    title: '邮箱',
                    column: {
                        width: 260,
                    },
                    form: {
                        rules: [
                            {
                                type: 'email',
                                message: '请输入正确的邮箱地址',
                                trigger: ['blur', 'change'],
                            },
                        ],
                        component: {
                            placeholder: '请输入邮箱',
                        },
                    },
                },
                gender: {
                    title: '性别',
                    type: 'dict-select',
                    dict: dict({
                        data: dictionary('gender'),
                    }),
                    form: {
                        value: 1,
                        component: {
                            span: 12,
                        },
                    },
                    component: { props: { color: 'auto' } }, // 自动染色
                },
                user_type: {
                    title: '用户类型',
                    search: {
                        show: false,
                    },
                    type: 'dict-select',
                    dict: dict({
                        data: dictionary('user_type'),
                    }),
                    column: {
                        minWidth: 100, //最小列宽
                    },
                    form: {
                        show: false,
                        value: 0,
                        component: {
                            span: 12,
                        },
                    },
                },
                is_active: {
                    title: '状态',
                    search: {
                        show: true,
                    },
                    type: 'dict-radio',
                    form: {
                        value: true,
                    },
                    column: {
                        component: {
                            name: 'fs-dict-switch',
                            activeText: '',
                            inactiveText: '',
                            style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
                            onChange: compute((context) => {
                                return () => {
                                    api.UpdateObj(context.row).then((res: APIResponseData) => {
                                        successMessage(res.msg as string);
                                    });
                                };
                            }),
                        },
                    },
                    dict: dict({
                        data: dictionary('button_status_bool'),
                    }),
                },
                avatar: {
                    title: '头像',
                    type: 'avatar-uploader',
                    align: 'center',
                    form: {
                        show: false,
                    },
                    column: {
                        show:false,
                        minWidth: 100, //最小列宽
                    },
                },
                ...commonCrudConfig({
                    dept_belong_id: {
                        form: true,
                        table: true,
                        search: false
                    }
                })
            },
        },
    };
};
