<template>
  <!-- 新增角色 -->
  <a-modal class="commonModal add-roles" title="新增角色" v-model:visible="visible" @cancel="cancel" centered :maskClosable="false">
    <template #footer>
      <a-button key="cancel" type="primary" :loading="loading" @click="cancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="submit">新增</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">
          <a-tree checkable :tree-data="tableList" v-model:checkedKeys="checkedKeys" :replace-fields="replaceFields"> </a-tree>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { _closeModal } from '@/common/setup/modal/modal';
import { defineComponent, ref, watchEffect } from 'vue';
import { handleBusinessForm } from '../setup';
import { 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/user';
import { getAoletype_string, getAreaUserId } from '@/services/bus/user';
import { geLoginID_number } from '@/services/bus/login';

export default defineComponent({
  name: 'account_info_manager_btn_add',
  emits: ['cancel', 'update'],
  setup(props, context) {
    // 控制关闭弹窗
    const { visible, cancel } = _closeModal(context);
    const { rules, formState, formRef } = handleBusinessForm();
    const loading = ref<boolean>(false);
    const tableList = ref<ErmcpRoleMenuEx[]>([]);
    const name = ref<string>('');
    const replaceFields = {
      children: 'SubMenu',
      title: 'resourcename',
      key: 'resourcecode',
    };
    const checkedKeys = ref<string[]>([]);
    watchEffect(() => {
      if (visible.value) {
        // 菜单类型 1:管理端 2:交易端 3:终端(企业云平台) 4:仓单贸易 5:PCWEB(v6) ps:新加的参数,为了兼容以前,不传则默认查3
        const param = { userid: getUserId(), roleid: getAoletype_string(), menutype: 5 };

        queryResultLoadingAndInfo(QueryAccMgrRoleMenu, loading, param).then((res) => {
          const fn = (arr: any[]) => {
            arr.forEach((el) => {
              Object.assign(el, el.Menu);
              if (el.SubMenu.length) {
                fn(el.SubMenu);
              }
            });
          };
          fn(res);
          tableList.value = res;
        });
      }
    });

    function submit() {
      if (!name.value) {
        message.error('请输入角色名称');
        return;
      }
      const reqParam: ManagerRoleOperateReq = {
        autoid: getUserId(), // uint64 角色ID
        operatetype: 1, // uint32 操作类型-1:新增 2:修改
        areauserid: getAreaUserId(), // uint64 所属机构
        modifierid: Number(geLoginID_number()), // uint64 修改人ID
        rolename: name.value, // string 角色名称
        memberfuncmenus: checkedKeys.value.map((item) => {
          return {
            resourcecode: item,
          } as MemberFuncMenu;
        }), // MemberFuncMenu 机构菜单
      };
      requestResultLoadingAndInfo(roleOperate, reqParam, loading, ['新增成功', '新增失败:']).then(() => {
        cancel(true);
      });
    }

    return {
      formState,
      rules,
      formRef,
      visible,
      name,
      cancel,
      submit,
      loading,
      tableList,
      replaceFields,
      checkedKeys,
    };
  },
});
</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-grey14;
                border-radius: 3px;
            }
        }
        .ant-checkbox.ant-checkbox-checked {
            .ant-checkbox-inner {
                &::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;
            }
        }
    }
}

.ant-tree-checkbox {
    margin-right: 2px;
    .ant-tree-checkbox-inner {
        background: @m-grey21;
        border: 1px solid @m-grey14;
        border-radius: 3px;
        &::after {
            border-color: @m-blue0;
        }
    }
    &::after {
        border-color: @m-blue0;
    }
}

.ant-tree-title {
    color: @m-white0;
}
.anticon {
    color: @m-white0;
}
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background: none;
}
.ant-tree li .ant-tree-node-content-wrapper:hover {
    background: none;
}
</style>
