<template>
    <!-- 角色详情 -->
    <a-modal
        class="commonModal add-roles"
        title="角色详情"
        v-model:visible="visible"
        @cancel="cancel"
        centered
        :maskClosable="false"
        width="100%"
    >
        <template #footer>
            <a-button key="cancel" type="primary" :loading="loading" @click="cancel">完成</a-button>
        </template>
        <a-form class="inlineForm" ref="formRef" :model="formState" :rules="rules">
            <a-row :gutter="24">
                <a-col :span="24">
                    <a-form-item label="角色名称">
                        <a-input
                            class="dialogInput"
                            style="width: 200px"
                            v-model:value="name"
                            placeholder="请输入模板名称"
                        />
                    </a-form-item>
                </a-col>
                <a-col :span="24">
                    <a-form-item label="权限功能" name></a-form-item>
                </a-col>
                <a-col :span="24">
                    <div class="powerTable">
                        <div class="powerRow" v-for="(item, i) in tableList" :key="i + '0'">
                            <div class="powerLeft">
                                <a-checkbox
                                    v-model:checked="item.Menu.ishadrole"
                                    disabled
                                >{{item.Menu.resourcename}}</a-checkbox>
                            </div>
                            <div class="powerRight">
                                <div class="line" v-for="(sub, j) in item.SubMenu" :key="j + '1'">
                                    <div class="left">
                                        <a-checkbox
                                            v-model:checked="sub.Menu.ishadrole"
                                            @change="secondChange(item, sub)"
                                            :value="sub.Menu.resourcecode"
                                            disabled
                                        >{{sub.Menu.resourcename}}</a-checkbox>
                                    </div>
                                    <div class="right">
                                        <a-checkbox
                                            v-for="(subNext, l) in sub.SubMenu"
                                            :key="l + '3'"
                                            v-model:checked="subNext.Menu.ishadrole"
                                            @change="thirdChange(item, sub, subNext)"
                                            :value="subNext.Menu.resourcecode"
                                            disabled
                                        >{{subNext.Menu.resourcename}}</a-checkbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { closeModal } from '@/common/setup/modal/index';
import { defineComponent, PropType, ref, watchEffect } from 'vue';
import { handleBusinessForm } from '../setup';
import { ErmcpRole, ErmcpRoleMenuEx } from '@/services/go/ermcp/account/interface';
import { queryResultLoadingAndInfo, requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { QueryAccMgrRoleMenu } from '@/services/go/ermcp/account';
import { message } from 'ant-design-vue';
import { roleOperate } from '@/services/proto/accountinfo';
import { ManagerRoleOperateReq, MemberFuncMenu } from '@/services/proto/accountinfo/interface';
import { getUserId } from '@/services/bus/account';
import { getAreaUserId } from '@/services/bus/user';
import { getLongTypeLoginID } from '@/services/bus/login';

export default defineComponent({
    name: 'account_info_manager_btn_setting_detail',
    props: {
        selectedData: {
            default: {},
            type: Object as PropType<ErmcpRole>,
        },
    },
    setup(props, context) {
        // 控制关闭弹窗
        const { visible, cancel } = closeModal('account_info_manager_btn_setting_detail');
        const { rules, formState, formRef } = handleBusinessForm();
        const loading = ref<boolean>(false);
        const tableList = ref<ErmcpRoleMenuEx[]>([]);
        const name = ref<string>('');
        watchEffect(() => {
            if (visible.value) {
                const { rolename, areauserid, autoid } = props.selectedData;
                name.value = rolename;
                const param = { userid: areauserid, roleid: autoid.toString() };
                queryResultLoadingAndInfo(QueryAccMgrRoleMenu, loading, param).then((res) => {
                    tableList.value = res;
                });
            }
        });

        function submit() {
            const result: string[] = [];
            // 处理已经勾选的数据
            tableList.value.forEach((first) => {
                if (first.Menu.ishadrole) {
                    result.push(first.Menu.resourcecode);
                    first.SubMenu.forEach((second) => {
                        if (second.Menu.ishadrole) {
                            result.push(second.Menu.resourcecode);
                            second.SubMenu.forEach((third) => {
                                if (third.Menu.ishadrole) {
                                    result.push(third.Menu.resourcecode);
                                }
                            });
                        }
                    });
                }
            });
            if (!name) {
                message.error('请输入模板名称');
                return;
            }
            if (result.length === 0) {
                message.error('请至少选择一个权限');
                return;
            }
            const reqParam: ManagerRoleOperateReq = {
                autoid: getUserId(), // uint64 角色ID
                operatetype: 1, // uint32 操作类型-1:新增 2:修改
                areauserid: getAreaUserId(), // uint64 所属机构
                modifierid: Number(getLongTypeLoginID()), // uint64 修改人ID
                rolename: name.value, // string 角色名称
                memberfuncmenus: result.map((item) => {
                    return {
                        resourcecode: item,
                    } as MemberFuncMenu;
                }), // MemberFuncMenu 机构菜单
            };
            requestResultLoadingAndInfo(roleOperate, reqParam, loading, ['新增成功', '新增失败:']).then(() => {
                cancel();
                context.emit('refresh');
            });
        }

        function secondChange(item: ErmcpRoleMenuEx, sub: ErmcpRoleMenuEx) {
            if (sub.Menu.ishadrole) {
                item.Menu.ishadrole = true;
            }
        }

        function thirdChange(item: ErmcpRoleMenuEx, sub: ErmcpRoleMenuEx, subNext: ErmcpRoleMenuEx) {
            if (subNext.Menu.ishadrole) {
                sub.Menu.ishadrole = true;
                item.Menu.ishadrole = true;
            }
        }

        return {
            formState,
            rules,
            formRef,
            visible,
            name,
            cancel,
            submit,
            secondChange,
            thirdChange,
            loading,
            tableList,
        };
    },
});
</script>

<style lang="less">
.add-roles {
    .ant-modal-content {
        .ant-modal-body {
            overflow-x: hidden;
        }
    }

    .powerTable {
        width: 100%;
        height: 100%;
        border: 3px solid @m-grey11;
        background-color: @m-black12;
        font-size: 14px;
        color: @m-white0;
        .flex;
        flex-direction: column;
        overflow-x: auto;
        overflow-y: hidden;

        .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
            width: 120px;

            span + span {
                margin-right: 0;
            }
        }

        .powerRow {
            width: 100%;
            display: inline-flex;
            border-bottom: 3px solid @m-grey11;

            > div {
                align-self: center;
                align-items: center;
                white-space: nowrap;
                line-height: 40px;
            }

            .powerLeft {
                width: 250px;
                padding: 0 8px;
            }

            .powerRight {
                flex: 1;
                max-width: calc(100% - 120px);
                .flex;
                flex-direction: column;

                .line {
                    width: 100%;
                    display: inline-flex;
                    border-bottom: 3px solid @m-grey11;

                    > div {
                        padding: 0 8px;
                    }

                    .left {
                        width: 200px;
                        min-width: 200px;
                        border-left: 3px solid @m-grey11;
                        border-right: 3px solid @m-grey11;
                    }

                    .right {
                        flex: 1;
                        // width: calc(100% - 120px);
                    }
                }

                .line:last-child {
                    border-bottom: 0;
                }
            }

            // .powerMiddle {
            //     width: 180px;
            //     .flex;
            //     flex-direction: column;
            //     div {
            //         width: 100%;
            //         height: 40px;
            //         line-height: 40px;
            //         padding: 0 8px;
            //         border: 3px solid @m-grey11;
            //         border-top: 0;
            //     }
            //     div:last-child {
            //         border-bottom: 0;
            //     }
            // }
            // .powerRight {
            //     flex: 1;
            //     .flex;
            //     flex-direction: column;
            //     div {
            //         width: 100%;
            //         height: 40px;
            //         line-height: 40px;
            //         padding: 0 8px;
            //         justify-content: flex-start;
            //         border-bottom: 3px solid @m-grey11;
            //     }
            //     div:last-child {
            //         border-bottom: 0;
            //     }
            // }
        }
    }
    .ant-checkbox-wrapper {
        color: @m-white0;
        font-size: 14px;
        .ant-checkbox {
            margin-right: 2px;
            .ant-checkbox-inner {
                background: @m-grey21;
                border: 1px solid @m-black29;
                border-radius: 3px;
            }
        }
        .ant-checkbox.ant-checkbox-checked {
            .ant-checkbox-inner {
                background: @m-black30;
                &::after {
                    border-color: @m-blue0;
                }
            }
            &::after {
                border-color: @m-blue0;
            }
        }
        span + span {
            margin-right: 15px;
            color: @m-white0;
            font-size: 14px;
        }
    }
    .ant-checkbox-wrapper-disabled {
        .ant-checkbox-disabled {
            outline-color: @m-grey14;
            .ant-checkbox-input {
                color: @m-white0;
                font-size: 14px;
            }
            .ant-checkbox-inner {
                border-color: @m-grey14 !important;
            }
        }
    }
}
</style
>;
