<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, Image, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import { deleteRole } from './api';
import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';
import AuthMenu from "#/views/system/role/components/auth-menu.vue";
import MpEntry from "#/views/system/role/components/mp-entry.vue";
import QuickNav from "#/views/system/role/components/quick-nav.vue";
import WorkbenchWidget from "#/views/system/role/components/workbench-widget.vue";

// 支持配置小程序工作台入口的角色（1/2平台 3/4/6业务员线 8诊所管理员 14诊所推广员）
const MP_ENTRY_ROLE_IDS = [1, 2, 3, 4, 6, 8, 14];

const hasTopTableDropDownActions = ref(false);

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    // 表单值
    values: {
      id: data?.id,
      name: data?.name,
      value: data?.value,
      user_type: data?.user_type,
      desc: data?.desc,
    },
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};

// 授权菜单
const authMenuRef = ref();
const handleAuthMenu = (record: any) => {
  authMenuRef.value.setData({
    record,
  });
  authMenuRef.value.open();
};

// 快捷导航
const quickNavRef = ref();
const handleQuickNav = (record: any) => {
  if (quickNavRef.value && quickNavRef.value.DrawerApi) {
    quickNavRef.value.DrawerApi.setData({
      record,
    });
    quickNavRef.value.DrawerApi.open();
  }
};

// 工作台模块配置
const workbenchWidgetRef = ref();
const handleWorkbenchWidget = (record: any) => {
  if (workbenchWidgetRef.value && workbenchWidgetRef.value.DrawerApi) {
    workbenchWidgetRef.value.DrawerApi.setData({
      record,
    });
    workbenchWidgetRef.value.DrawerApi.open();
  }
};

// 小程序功能入口分配
const mpEntryRef = ref();
const handleMpEntry = (record: any) => {
  if (mpEntryRef.value && mpEntryRef.value.DrawerApi) {
    mpEntryRef.value.DrawerApi.setData({
      record,
    });
    mpEntryRef.value.DrawerApi.open();
  }
};
const deleteApi = (row: any) => {
  let ids = [];
  if (row) {
    ids.push(row);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
  }
  deleteRole({ ids }).then(() => {
    message.success('删除成功!');
    gridApi.query();
  });
};
</script>

<template>
  <Page auto-content-height title="角色管理">
    <FormModal />
    <AuthMenu ref="authMenuRef" />
    <QuickNav ref="quickNavRef" />
    <WorkbenchWidget ref="workbenchWidgetRef" />
    <MpEntry ref="mpEntryRef" />
    <Grid>
      <template #toolbar-actions>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              // auth: ['超级角色', 'sys:user:save'],
              onClick: showModal.bind(null),
            },
          ]"
          :drop-down-actions="[
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              // auth: ['超级角色', 'sys:user:save'],
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, false),
              },
            },
          ]"
        >
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #avatar="{ row }">
        <Image :src="row.avatar" height="30" width="30" />
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              // auth: ['admin', 'sys:role:detail'],
              onClick: showModal.bind(null, row, true),
            },
            {
              label: '授权菜单',
              type: 'link',
              icon: 'arcticons:microsoft-authenticator',
              size: 'small',
              // auth: ['admin', 'sys:role:detail'],
              onClick: handleAuthMenu.bind(null, row),
            },
            {
              label: '快捷导航',
              type: 'link',
              icon: 'mdi:compass-outline',
              size: 'small',
              // auth: ['admin', 'sys:role:detail'],
              onClick: handleQuickNav.bind(null, row),
            },
            {
              label: '工作台模块',
              type: 'link',
              icon: 'mdi:view-dashboard-outline',
              size: 'small',
              // auth: ['admin', 'sys:role:detail'],
              onClick: handleWorkbenchWidget.bind(null, row),
            },
            {
              label: '小程序入口',
              type: 'link',
              icon: 'mdi:cellphone-cog',
              size: 'small',
              ifShow: MP_ENTRY_ROLE_IDS.includes(Number(row.id)),
              onClick: handleMpEntry.bind(null, row),
            },
          ]"
          :drop-down-actions="[
            {
              label: '删除',
              type: 'link',
              icon: 'ant-design:delete-outlined',
              size: 'small',
              // auth: ['admin', 'sys:role:detail'],
              popConfirm: {
                title: '确定删除吗？',
                confirm: deleteApi.bind(null, row.id),
              },
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
