<template>
  <!-- 权限设置 -->
  <a-modal class="commonModal"
           title="权限设置"
           v-model:visible="visible"
           @cancel="cancel"
           :loading="loading"
           centered
           :maskClosable="false"
           width="890px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="cancel">完成</a-button>
    </template>
    <a-table :columns="columns"
             class="dialogTable topTable hiddenFirstCol"
             :data-source="tableList"
             rowKey="key"
             :expandedRowKeys="expandedRowKeys"
             :customRow="Rowclick"
             :pagination="false">
      <!-- 额外的展开行 -->
      <template #expandedRowRender="{ record }">
        <BtnList :selectedData="record"
                 :btnList="btnList"
                 class="btn-list-sticky"
                 @onClick="btnClick" />
      </template>
      <template #rolestatus="{ text }">
        <span>{{ text === 1 ? '正常' : "2：停用" }}</span>
      </template>
    </a-table>
    <Modify :selectedData="selectedRow"
            @refresh="queryTable" />
    <Delete :selectedData="selectedRow"
            @refresh="queryTable" />
    <Detail :selectedData="selectedRow"
            @refresh="queryTable" />
  </a-modal>
</template>

<script lang="ts">
import { closeModal, openModal } from '@/common/setup/modal/index';
import { ref, watchEffect } from 'vue';
import { ErmcpRole } from '@/services/go/ermcp/account/interface';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { QueryAccMgrRole } from '@/services/go/ermcp/account';
import { defineComponent, getTableEvent, BtnList } from '@/common/export/table';
import { BtnList as btnType } from '@/common/setup/table/interface';
import Modify from '../managers-permission-modify/index.vue';
import Delete from '../managers-permission-delete/index.vue';
import Detail from '../managers-permission-detail/index.vue';

export default defineComponent({
    name: 'account_info_manager_btn_setting',
    components: {
        BtnList,
        Modify,
        Delete,
        Detail,
    },
    setup() {
        // 控制关闭弹窗
        const { visible, cancel } = closeModal('account_info_manager_btn_setting');
        const loading = ref<boolean>(false);
        const columns = [
            { title: '角色名称', dataIndex: 'rolename', key: 'rolename', align: 'center' },
            { title: '创建人', dataIndex: 'modifiername', key: 'modifiername', align: 'center' },
            { title: '创建时间', dataIndex: 'modifytime', key: 'modifytime', align: 'center' },
            { title: '状态', dataIndex: 'rolestatus', key: 'rolestatus', align: 'center', slots: { customRender: 'rolestatus' } },
        ];
        // 表格事件
        const { expandedRowKeys, selectedRow, Rowclick, btnClick } = getTableEvent<ErmcpRole>({});
        // 按钮
        const btnList = ref<btnType[]>([
            { lable: '修改', callback: openModal('account_info_manager_btn_setting_modify').openAction, className: 'btnPrimary' },
            { lable: '删除', callback: openModal('account_info_manager_btn_setting_delete').openAction, className: 'btnDanger' },
            { lable: '详情', callback: openModal('account_info_manager_btn_setting_detail').openAction, className: 'btnDeafault' },
        ]);
        const tableList = ref<ErmcpRole[]>([]);

        function queryTable() {
            queryResultLoadingAndInfo(QueryAccMgrRole, loading).then((res) => {
                console.log(res);

                tableList.value = res.map((e: ErmcpRole, i: number) => Object.assign(e, { key: `${i}` }));
            });
        }
        watchEffect(() => {
            if (visible.value) {
                queryTable();
            }
        });
        return {
            visible,
            cancel,
            expandedRowKeys,
            selectedRow,
            Rowclick,
            btnClick,
            queryTable,
            loading,
            tableList,
            columns,
            btnList,
        };
    },
});
</script>

<style lang="less">
</style
>;
