<script setup lang="ts">
import type { TablePaginationConfig } from 'antdv-next';
import type { Dayjs } from 'dayjs';

import { computed, ref, watch } from 'vue';

import { useAccessStore } from '@vben/stores';

import { $t } from '@/locales';
import {
  Button,
  DatePicker,
  Input,
  Menu,
  message,
  Modal,
  Radio,
  RadioGroup,
  Select,
  Switch,
  Table,
  Upload,
} from 'antdv-next';
import dayjs from 'dayjs';

import {
  addApplicationApi,
  addUserToApplicationApi,
  associateUserApi,
  deleteUserFromApplicationApi,
  generateSystemSecretApi,
  getAddUsersApi,
  getApplicationDetailApi,
  getAssociatedUsersApi,
  getCloneApplicationsApi,
  getCustomerRelationsApi,
  getPartnersApi,
  getSystemSecretApi,
  updateApplicationApi,
} from '#/api';

interface Props {
  open: boolean;
  mode: 'add' | 'edit';
  applicationData?: any;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'save', data: any): void;
  (e: 'update:open', value: boolean): void;
}>();

const activeMenu = ref('basic');

const accessStore = useAccessStore();

const token = accessStore.accessToken;

const formData = ref({
  code: '',
  id: '',
  logo: null,
  fileId: '',
  imgLogoFileId: '',
  fileList: [] as any[],
  partner: '',
  projectCode: '',
  cloneProject: '',
  nameCn: '',
  nameEn: '',
  customerRelation: '',
  contact: '',
  phone: '',
  email: '',
  address: '',
  description: '',
  isEnabled: true,
  type: 'application',
  processCount: 0,
  pageCount: 0,
  tableCount: 0,
  designerCount: 0,
  scenarioCount: 0,
  userCount: 0,
});

const keyData = ref({
  startTime: null as Dayjs | null,
  encryptionType: 'DES3',
  validDays: 0,
  isPermanent: false,
  errorDescription: '',
  systemKey: '',
});

const relatedUsers = ref<any[]>([]);

const userSearchKeyword = ref('');
const userModalOpen = ref(false);
const selectedUsers = ref<any[]>([]);

const menuItems = computed(() => [
  {
    key: 'basic',
    label: $t('applicationManagement.modal.menu.basic'),
    title: $t('applicationManagement.modal.menu.basic'),
  },
  {
    key: 'users',
    label: $t('applicationManagement.modal.menu.users'),
    title: $t('applicationManagement.modal.menu.users'),
  },
  {
    key: 'keys',
    label: $t('applicationManagement.modal.menu.keys'),
    title: $t('applicationManagement.modal.menu.keys'),
  },
]);

const roleOptions = [
  { value: '普通人员', label: '普通人员' },
  { value: '兼职人员', label: '兼职人员' },
  { value: '内部人员', label: '内部人员' },
  { value: '管理员', label: '管理员' },
];

const applicationMenu = ref<Array<{ label: string; value: string }>>([]);
const applications = ref<Array<{ label: string; value: string }>>([]);
const customerRelationsOptions = ref<Array<{ label: string; value: string }>>(
  [],
);
const allUsers = ref<any[]>([]);
const userPagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

async function fetchPartners() {
  try {
    const result = await getPartnersApi();
    if (result?.result) {
      applicationMenu.value = result.result.map(
        (item: { id: string; name: string }) => ({
          value: item.id,
          label: item.name,
        }),
      );
    }
  } catch {}
}

async function fetchCloneApplications() {
  try {
    const result = await getCloneApplicationsApi({
      currentPage: 1,
      pageSize: 999,
      orderByProperty: 'name',
      Ascending: true,
      totalPage: 1,
      totalCount: 2,
      filters: [{ name: 'isEnabled', value: 1 }],
    });
    if (result?.result?.model) {
      applications.value = result.result.model.map(
        (item: { code: string; name: string }) => ({
          value: item.code,
          label: item.name,
        }),
      );
    }
  } catch {}
}

async function fetchCustomerRelations() {
  try {
    const result = await getCustomerRelationsApi();
    if (result?.result) {
      customerRelationsOptions.value = result.result.map(
        (item: { code: string; name: string }) => ({
          value: item.code,
          label: item.name,
        }),
      );
    }
  } catch {}
}

async function fetchApplicationDetail() {
  try {
    const result = await getApplicationDetailApi(formData.value.code);
    if (result?.result) {
      const data = result.result;
      formData.value.code = data.code;
      formData.value.projectCode = data.code;
      formData.value.cloneProject = data.from_code;
      formData.value.contact = data.contact;
      formData.value.phone = data.cellPhone;
      formData.value.email = data.email;
      formData.value.address = data.address;
      formData.value.description = data.memo;
      formData.value.isEnabled = data.isEnable;
      formData.value.type = data.type || 'application';
      formData.value.processCount = data.number0fWorkFlow;
      formData.value.pageCount = data.number0fPages;
      formData.value.tableCount = data.number0fTables;
      formData.value.designerCount = data.number0fDesigners;
      formData.value.scenarioCount = data.number0fBusinessScenarios;
      formData.value.userCount = data.number0fCSiteMaxUser;
      formData.value.fileId = data.imgLogoFileId;
      formData.value.imgLogoFileId = data.imgLogoFileId;
      formData.value.partner = data.partner_id;
      formData.value.id = data.id;
      formData.value.customerRelation = data.client_code;
      formData.value.nameEn =
        data.langNameList.find((item: any) => item.name === 'en')?.value || '';
      if (data.name) {
        formData.value.nameCn = data.name;
      }

      if (data.imgLogoFileId) {
        formData.value.fileList = [
          {
            uid: '-1',
            name: 'logo.png',
            status: 'done',
            url: `/File/Download?fileId=${data.imgLogoFileId}`,
            response: {
              result: [
                {
                  id: data.imgLogoFileId,
                },
              ],
            },
          },
        ];
      }
    }
  } catch {}
}

async function fetchSystemSecret() {
  try {
    const result = await getSystemSecretApi(formData.value.code);
    if (result?.result?.generateSystemEncryptInfo) {
      keyData.value.startTime = result.result.generateSystemEncryptInfo
        .begin_date
        ? dayjs(result.result.generateSystemEncryptInfo.begin_date)
        : null;
      keyData.value.validDays =
        result.result.generateSystemEncryptInfo.period_day;
      keyData.value.isPermanent =
        result.result.generateSystemEncryptInfo.is_permanent;
      keyData.value.errorDescription =
        result.result.generateSystemEncryptInfo.error_msg;
      keyData.value.systemKey = result.result.encryptInfo ?? '';
    }
  } catch {}
}

async function getAssociatedUsers() {
  try {
    const result = await getAssociatedUsersApi(formData.value.code);
    if (result?.result) {
      relatedUsers.value = result.result;
    }
  } catch {}
}

async function getAddUsers() {
  try {
    const result = await getAddUsersApi({
      currentPage: userPagination.value.currentPage,
      pageSize: userPagination.value.pageSize,
      orderByProperty: 'name',
      Ascending: true,
      filters: [
        {
          name: 'filterText',
          value: userSearchKeyword.value,
        },
      ],
    });
    if (result?.result?.model) {
      allUsers.value = result.result.model;
      userPagination.value.total = result.result.totalCount;
    }
  } catch {}
}

watch(
  () => props.open,
  (val) => {
    if (val && props.mode === 'edit' && props.applicationData) {
      Object.assign(formData.value, props.applicationData);
      fetchApplicationDetail();
      fetchSystemSecret();
      getAssociatedUsers();
      getAddUsers();
    }
    if (val) {
      if (props.mode === 'add') {
        resetFormData();
      }
      fetchPartners();
      fetchCloneApplications();
      fetchCustomerRelations();
      activeMenu.value = 'basic';
    }
  },
);

const isOpen = computed({
  get: () => props.open,
  set: (val) => emit('update:open', val),
});

function handleMenuClick({
  key,
}: {
  domEvent: Event;
  item: any;
  key: string;
  keyPath: string[];
}) {
  activeMenu.value = key;
}

function handleLogoUpload(info: any) {
  if (info.file.status === 'done') {
    formData.value.logo = info.file;
    if (info.file.response?.result?.[0]?.id) {
      formData.value.fileId = info.file.response.result[0].id;
      formData.value.imgLogoFileId = info.file.response.result[0].id;
    }
  }
}

async function handleSave() {
  const data = {
    id: formData.value.id,
    langNameList: [
      {
        name: 'zh-CN',
        value: formData.value.nameCn,
      },
      {
        name: 'en',
        value: formData.value.nameEn,
      },
    ],
    client_code: formData.value.customerRelation,
    code: formData.value.projectCode,
    fileId: formData.value.fileId,
    imgLogoFileId: formData.value.imgLogoFileId,
    partnerInfoId: formData.value.partner,
    from_code: formData.value.cloneProject,
    contact: formData.value.contact,
    cellPhone: formData.value.phone,
    email: formData.value.email,
    address: formData.value.address,
    memo: formData.value.description,
    isEnable: formData.value.isEnabled,
    type: formData.value.type,
    number0fWorkFlow: formData.value.processCount,
    number0fPages: formData.value.pageCount,
    number0fTables: formData.value.tableCount,
    number0fDesigners: formData.value.designerCount,
    number0fBusinessScenarios: formData.value.scenarioCount,
    number0fCSiteMaxUser: formData.value.userCount,
  };
  try {
    const result = formData.value.id
      ? await updateApplicationApi(data)
      : await addApplicationApi(data);
    if (result?.isSuccess) {
      emit('save', data);
      isOpen.value = false;
      message.success($t('applicationManagement.saveSuccess'));
    }
  } catch {}
}

function handleCancel() {
  isOpen.value = false;
}

function handleAddUser() {
  userModalOpen.value = true;
  userSearchKeyword.value = '';
  selectedUsers.value = [];
  getAddUsers();
}

function handleUserSearch() {
  userPagination.value.currentPage = 1;
  getAddUsers();
}

function handleUserPageChange(pagination: TablePaginationConfig) {
  if (pagination.current && pagination.pageSize) {
    userPagination.value.currentPage = pagination.current;
    userPagination.value.pageSize = pagination.pageSize;
    getAddUsers();
  }
}

async function handleUserSelect(user: any) {
  try {
    const result = await addUserToApplicationApi(
      user.account,
      formData.value.code,
    );
    if (result?.isSuccess) {
      message.success($t('applicationManagement.addUserSuccess'));
      getAssociatedUsers();
      userModalOpen.value = false;
    }
  } catch {}
}

async function handleUserDelete(user: any) {
  Modal.confirm({
    title: $t('applicationManagement.deleteConfirm'),
    content: $t('applicationManagement.deleteDescription'),
    okText: $t('btn.yes'),
    okType: 'danger',
    cancelText: $t('btn.no'),
    type: 'warning',
    onOk: async () => {
      try {
        const result = await deleteUserFromApplicationApi(user.id, [
          formData.value.id,
        ]);
        if (result?.isSuccess) {
          message.success($t('applicationManagement.deleteSuccess'));
          getAssociatedUsers();
        }
      } catch {}
    },
    onCancel: () => {},
  });
}

async function handleAssociateUser(user: any) {
  try {
    const data = {
      enterpriseId: formData.value.id,
      userId: user.id,
      roleTypes: user.roleTypes,
    };
    const result = await associateUserApi(data);
    if (result?.isSuccess) {
      message.success($t('applicationManagement.associateUserSuccess'));
    }
  } catch {}
}

async function handleGenerateKey() {
  try {
    const data = {
      begin_date: keyData.value.startTime
        ? (keyData.value.startTime as Dayjs).format('YYYY-MM-DD')
        : '',
      encrypt_type: 1,
      enterprise_code: formData.value.code,
      error_msg: keyData.value.errorDescription,
      is_permanent: keyData.value.isPermanent,
      period_day: keyData.value.validDays,
    };
    const result = await generateSystemSecretApi(data);
    if (result?.result) {
      message.success($t('applicationManagement.generateKeySuccess'));
      fetchSystemSecret();
    }
  } catch {}
}

function handleCopyKey() {
  if (keyData.value.systemKey) {
    navigator.clipboard.writeText(keyData.value.systemKey);
    message.success($t('applicationManagement.copyKeySuccess'));
  }
}

function resetFormData() {
  formData.value = {
    code: '',
    id: '',
    logo: null,
    fileId: '',
    imgLogoFileId: '',
    fileList: [] as any[],
    partner: '',
    projectCode: '',
    cloneProject: '',
    nameCn: '',
    nameEn: '',
    customerRelation: '',
    contact: '',
    phone: '',
    email: '',
    address: '',
    description: '',
    isEnabled: true,
    processCount: 0,
    pageCount: 0,
    tableCount: 0,
    designerCount: 0,
    scenarioCount: 0,
    userCount: 0,
    type: 'application',
  };

  keyData.value = {
    startTime: null,
    encryptionType: 'DES3',
    validDays: 0,
    isPermanent: false,
    errorDescription: '',
    systemKey: '',
  };

  relatedUsers.value = [];
}
</script>

<template>
  <Modal
    v-model:open="isOpen"
    :footer="null"
    :title="
      mode === 'add'
        ? $t('applicationManagement.modal.addTitle')
        : $t('applicationManagement.modal.editTitle')
    "
    width="1200px"
  >
    <div class="flex h-[600px]">
      <div v-if="mode !== 'add'" class="w-[200px] border-r border-gray-200">
        <Menu
          :items="menuItems"
          :selected-keys="[activeMenu]"
          mode="vertical"
          @click="handleMenuClick"
          @update:selected-keys="(keys) => (activeMenu = keys[0] ?? 'basic')"
        />
      </div>

      <div class="flex-1 overflow-y-auto p-6">
        <div v-show="activeMenu === 'basic'" class="space-y-4">
          <div class="flex items-center gap-4">
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.enterpriseLogo')
              }}</label>
              <Upload
                v-model:file-list="formData.fileList"
                :headers="{ Authorization: String(token) }"
                :max-count="1"
                action="/fileApi/File/UploadFiles"
                list-type="picture-card"
                @change="handleLogoUpload"
              >
                <div
                  class="flex h-[100px] w-[200px] items-center justify-center border-2 border-dashed"
                >
                  <div class="text-center">
                    <div class="text-4xl">+</div>
                    <div class="text-sm text-gray-500">
                      {{ $t('applicationManagement.modal.uploadLogo') }}
                    </div>
                  </div>
                </div>
              </Upload>
            </div>
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.partner')
              }}</label>
              <Select
                v-model:value="formData.partner"
                :disabled="props.mode === 'edit'"
                :options="applicationMenu"
                :placeholder="$t('applicationManagement.modal.selectPartner')"
                class="h-[32px]"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.projectCode')
              }}</label>
              <Input
                v-model:value="formData.projectCode"
                :disabled="props.mode === 'edit'"
                :placeholder="
                  $t('applicationManagement.modal.enterProjectCode')
                "
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.cloneProject')
              }}</label>
              <Select
                v-model:value="formData.cloneProject"
                :disabled="props.mode === 'edit'"
                :options="applications"
                :placeholder="
                  $t('applicationManagement.modal.selectCloneProject')
                "
                class="h-[32px]"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.projectNameCn')
              }}</label>
              <Input
                v-model:value="formData.nameCn"
                :placeholder="
                  $t('applicationManagement.modal.enterProjectName')
                "
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.projectNameEn')
              }}</label>
              <Input
                v-model:value="formData.nameEn"
                :placeholder="
                  $t('applicationManagement.modal.enterProjectName')
                "
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.customerRelation')
              }}</label>
              <Select
                v-model:value="formData.customerRelation"
                :options="customerRelationsOptions"
                :placeholder="
                  $t('applicationManagement.modal.selectCustomerRelation')
                "
                class="h-[32px]"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.contact')
              }}</label>
              <Input
                v-model:value="formData.contact"
                :placeholder="$t('applicationManagement.modal.enterContact')"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.phone')
              }}</label>
              <Input
                v-model:value="formData.phone"
                :placeholder="$t('applicationManagement.modal.enterPhone')"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.email')
              }}</label>
              <Input
                v-model:value="formData.email"
                :placeholder="$t('applicationManagement.modal.enterEmail')"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.address')
              }}</label>
              <Input
                v-model:value="formData.address"
                :placeholder="$t('applicationManagement.modal.enterAddress')"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.isEnabled')
              }}</label>
              <Switch v-model:checked="formData.isEnabled" class="w-[40px]" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.type')
              }}</label>
              <RadioGroup v-model:value="formData.type">
                <Radio value="application">
                  {{ $t('auth.application') }}
                </Radio>
                <Radio value="product">{{ $t('auth.product') }}</Radio>
              </RadioGroup>
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.description')
              }}</label>
              <Input
                v-model:value="formData.description"
                :placeholder="
                  $t('applicationManagement.modal.enterDescription')
                "
                :rows="3"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.processCount')
              }}</label>
              <Input v-model:value="formData.processCount" type="number" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.pageCount')
              }}</label>
              <Input v-model:value="formData.pageCount" type="number" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.tableCount')
              }}</label>
              <Input v-model:value="formData.tableCount" type="number" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.designerCount')
              }}</label>
              <Input v-model:value="formData.designerCount" type="number" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.scenarioCount')
              }}</label>
              <Input v-model:value="formData.scenarioCount" type="number" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.userCount')
              }}</label>
              <Input v-model:value="formData.userCount" type="number" />
            </div>
          </div>
        </div>

        <div v-show="activeMenu === 'users'" class="space-y-4">
          <div class="mb-4 flex items-center justify-between">
            <Button type="primary" @click="handleAddUser">
              {{ $t('applicationManagement.modal.users.addUser') }}
            </Button>
          </div>

          <Table
            :columns="[
              {
                title: $t('applicationManagement.modal.users.account'),
                dataIndex: 'account',
                key: 'account',
              },
              {
                title: $t('applicationManagement.modal.users.role'),
                dataIndex: 'roleTypes',
                key: 'roleTypes',
              },
              {
                title: $t('applicationManagement.modal.users.action'),
                key: 'action',
                width: 200,
              },
            ]"
            :data-source="relatedUsers"
            :pagination="false"
            :scroll="{ y: 460 }"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'roleTypes'">
                <Select
                  v-model:value="record.roleTypes"
                  :options="roleOptions"
                  style="width: 120px"
                />
              </template>
              <template v-if="column.key === 'action'">
                <div class="flex">
                  <Button
                    size="small"
                    type="primary"
                    @click="handleAssociateUser(record)"
                  >
                    {{ $t('applicationManagement.modal.users.save') }}
                  </Button>
                  <Button
                    class="ml-[10px]"
                    danger
                    size="small"
                    @click="handleUserDelete(record)"
                  >
                    {{ $t('applicationManagement.modal.users.delete') }}
                  </Button>
                </div>
              </template>
            </template>
          </Table>
        </div>

        <div v-show="activeMenu === 'keys'" class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.keys.startTime')
              }}</label>
              <DatePicker
                v-model:value="keyData.startTime"
                format="YYYY-MM-DD"
                style="width: 100%"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.keys.encryptionType')
              }}</label>
              <Input
                v-model:value="keyData.encryptionType"
                :placeholder="
                  $t('applicationManagement.modal.keys.encryptionType')
                "
                disabled
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.keys.validDays')
              }}</label>
              <Input
                v-model:value="keyData.validDays"
                :placeholder="
                  $t('applicationManagement.modal.keys.enterValidDays')
                "
                type="number"
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.keys.isPermanent')
              }}</label>
              <Switch v-model:checked="keyData.isPermanent" class="w-[40px]" />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.keys.errorDescription')
              }}</label>
              <Input
                v-model:value="keyData.errorDescription"
                :placeholder="
                  $t('applicationManagement.modal.keys.enterErrorDescription')
                "
              />
            </div>
            <div class="flex flex-col gap-2">
              <label class="text-sm font-medium">{{
                $t('applicationManagement.modal.keys.systemKey')
              }}</label>
              <Input
                v-model:value="keyData.systemKey"
                :placeholder="$t('applicationManagement.modal.keys.systemKey')"
                disabled
              />
            </div>
          </div>
          <div class="mt-6 flex justify-end gap-2">
            <Button type="primary" @click="handleGenerateKey">
              {{ $t('applicationManagement.modal.keys.generate') }}
            </Button>
            <Button
              v-if="keyData.systemKey"
              type="primary"
              @click="handleCopyKey"
            >
              {{ $t('applicationManagement.modal.keys.copy') }}
            </Button>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="activeMenu === 'basic'"
      class="flex justify-end gap-2 border-t pt-4"
    >
      <Button @click="handleCancel">
        {{ $t('applicationManagement.modal.cancel') }}
      </Button>
      <Button type="primary" @click="handleSave">
        {{ $t('applicationManagement.modal.save') }}
      </Button>
    </div>

    <Modal
      v-model:open="userModalOpen"
      :footer="null"
      :title="$t('applicationManagement.modal.users.addUser')"
      width="700"
    >
      <div class="space-y-4">
        <Input
          v-model:value="userSearchKeyword"
          :placeholder="
            $t('applicationManagement.modal.users.searchPlaceholder')
          "
          @change="handleUserSearch"
        />
        <Table
          :columns="[
            {
              title: $t('applicationManagement.modal.users.account'),
              dataIndex: 'account',
              key: 'account',
              ellipsis: true,
              width: 120,
            },
            {
              title: $t('applicationManagement.modal.users.name'),
              dataIndex: 'name',
              key: 'name',
              ellipsis: true,
              width: 120,
            },
            {
              title: $t('applicationManagement.modal.users.emailAddress'),
              dataIndex: 'emailAddress',
              key: 'emailAddress',
              ellipsis: true,
              width: 150,
            },
            {
              title: $t('applicationManagement.modal.users.cellPhone'),
              dataIndex: 'cellPhone',
              key: 'cellPhone',
              ellipsis: true,
              width: 120,
            },
            {
              title: $t('applicationManagement.modal.users.action'),
              key: 'action',
            },
          ]"
          :data-source="allUsers"
          :pagination="{
            current: userPagination.currentPage,
            pageSize: userPagination.pageSize,
            total: userPagination.total,
            showSizeChanger: true,
            showTotal: (total: number) =>
              $t('applicationManagement.modal.users.total', { total }),
          }"
          :scroll="{ y: 460 }"
          class="user-table"
          @change="handleUserPageChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <Button
                size="small"
                type="primary"
                @click="handleUserSelect(record)"
              >
                {{ $t('applicationManagement.modal.users.select') }}
              </Button>
            </template>
          </template>
        </Table>
      </div>
    </Modal>
  </Modal>
</template>

<style lang="scss">
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light > .ant-menu .ant-menu-item-selected {
  background-color: #f4f2f2;

  .ant-menu-title-content {
    color: #462424;
  }
}

.ant-table-wrapper .ant-table-tbody > tr > th,
.ant-table-wrapper .ant-table-tbody > tr > td {
  padding: 8px 16px;
}

.ant-table-wrapper .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-thead > tr > td {
  padding: 8px 16px;
}
</style>
