import { defineAsyncComponent } from "vue";
import axios from 'axios';

let extension = {
    components: { //动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader: defineAsyncComponent(() =>
            import("./Sys_User/Sys_UserGridHeader.vue")),
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    text: "只能看到当前角色下的所有帐号",
    buttons: [],//扩展的按钮
    methods: { //事件扩展
        // 加载角色数据 - 添加forceRefresh参数
        async loadRoles(forceRefresh = true) {
            try {
                const http = this.$http || window.axios || axios;
                
                if (!http) {
                    console.error("HTTP请求对象不存在");
                    return;
                }
                
                console.log("开始加载角色数据...", forceRefresh ? "强制刷新" : "普通加载");
                
                const url = "/api/Sys_Role/getUserChildRoles" + (forceRefresh ? "?t=" + Date.now() : "");
                
                const res = await http.post(url);
                console.log("API返回原始数据:", res.data);
                
                if (res.data && res.data.status) {
                    const selectOptions = res.data.data.map(role => ({
                        // 兼容大写和小写属性名
                        value: role.id || role.Id,
                        label: role.roleName || role.RoleName,
                        // 同时保存原始属性，供表格显示使用
                        id: role.id || role.Id,
                        roleName: role.roleName || role.RoleName
                    }));
                    
                    console.log("转换后的下拉选项:", selectOptions);

                    if (this.editFormOptions && Array.isArray(this.editFormOptions)) {
                        let found = false;
                        for(let i = 0; i < this.editFormOptions.length; i++) {
                            const group = this.editFormOptions[i];
                            if (group && Array.isArray(group)) {
                                for(let j = 0; j < group.length; j++) {
                                    const field = group[j];
                                    if (field && field.field === "role_Id") {
                                        console.log("设置role_Id字段数据");
                                        field.data = selectOptions;
                                        found = true;
                                        break;
                                    }
                                }
                            }
                            if (found) break;
                        }
                        
                        this.$forceUpdate();
                    }
                    
                    // 同时更新表格中的角色数据源
                    if (this.columns && Array.isArray(this.columns)) {
                        for(let i = 0; i < this.columns.length; i++) {
                            const column = this.columns[i];
                            if (column && column.field === "role_Id" && column.bind) {
                                // 将角色数据转换为key-value格式，供表格显示使用
                                const bindData = res.data.data.map(role => ({
                                    key: role.id || role.Id,
                                    value: role.roleName || role.RoleName
                                }));
                                column.bind.data = bindData;
                                break;
                            }
                        }
                    }
                }
            } catch (error) {
                console.error("加载角色数据失败:", error);
            }
        },

        onInit() {
            this.boxOptions.height = 530;

            this.columns.push({
                title: '操作',
                hidden: false,
                align: "center",
                fixed: 'right',
                width: 120,
                render: (h, { row, column, index }) => {
                    return h(
                        "div", { style: { 'font-size': '13px', 'cursor': 'pointer', 'color': '#409eff' } }, [
                        h(
                            "a", {
                            style: { 'margin-right': '15px' },
                            onClick: (e) => {
                                e.stopPropagation()
                                if (this.$refs.gridHeader) {
                                    this.$refs.gridHeader.open(row);
                                }
                            }
                        }, "修改密码"
                        ),
                        h(
                            "a", {
                            style: {},
                            onClick: (e) => {
                                e.stopPropagation()
                                this.edit(row);
                            }
                        },
                            "编辑"
                        ),
                    ])
                }
            });
            
            // 初始化时加载
            setTimeout(() => {
                this.loadRoles(false);
            }, 100);
        },
        
        modelOpenAfter() {
            let isEDIT = this.currentAction == this.const.EDIT;
            
            // 设置UserName禁用状态
            if (this.editFormOptions && Array.isArray(this.editFormOptions)) {
                for(let i = 0; i < this.editFormOptions.length; i++) {
                    const group = this.editFormOptions[i];
                    if (group && Array.isArray(group)) {
                        for(let j = 0; j < group.length; j++) {
                            const field = group[j];
                            if (field && field.field === "UserName") {
                                field.disabled = isEDIT;
                            }
                        }
                    }
                }
            }
            
            if (this.currentAction == this.const.ADD) {
                this.editFormFields.Gender = "0";
            }
            
            // 每次打开编辑框时强制重新加载角色数据（带时间戳）
            setTimeout(() => {
                this.loadRoles(true); 
            }, 100);
        },
        refreshRoles() {
            this.loadRoles(true);
        },
        
        addAfter(result) {
            if (!result.status) {
                return true;
            }
            this.$confirm(result.message, '新建用户成功', { 
                confirmButtonText: '确定',
                type: 'success',
                center: true
            }).then(() => { 
                this.refreshRoles();
            })
            this.boxModel = false;
            this.refresh();
            return false;
        },
        
        // 刷新后重新加载角色数据，确保刷新后角色名称仍然显示正确
        refreshAfter() {
            setTimeout(() => {
                this.loadRoles(true);
            }, 100);
        },
        
        // 表格数据加载完成后重新加载角色数据，确保刷新后角色名称仍然显示正确
        searchAfter() {
            setTimeout(() => {
                this.loadRoles(true);
            }, 100);
            return true;
        }
    }
};
export default extension;