<script lang="ts" setup>
import {
  computed,
  nextTick,
  reactive,
  ref,
} from 'vue';

import { Page } from '@vben/common-ui';
import {
  Ellipsis,
  RotateCw,
  Search as SearchIcon,
  SquarePen,
} from '@vben/icons';
import { useAccessStore } from '@vben/stores';

import {
  Button,
  Empty,
  Input,
  InputNumber,
  message,
  Popover,
  Select,
  Switch,
  Tooltip,
} from 'antdv-next';

import {
  addOrUpdatePropsStore,
  mapPropsStoreBySourceIds,
  offShelfPropsSource,
  pagePropsSource,
  updatePropsSource,
} from '#/api/legacy/props';
import AdminConfigTable from '#/views/_shared/admin-config-table.vue';
import { getAllowedSysOrigins } from '#/views/system/shared';

import ResourceBatchDrawer from './components/resource-batch-drawer.vue';
import ResourceConfigModal from './components/resource-config-modal.vue';
import ResourceOverviewModal from './components/resource-overview-modal.vue';
import RewardIcon from './components/reward-icon.vue';
import { PROPS_DEL_OPTIONS, PROPS_RESOURCE_CONFIG_TYPES } from './shared';

defineOptions({ name: 'PropsResourceConfig' });

const accessStore = useAccessStore();

const accessCodes = computed(() => accessStore.accessCodes || []);
const sysOriginOptions = computed(() => {
  const options = getAllowedSysOrigins(accessCodes.value);
  return options.length > 0 ? options : getAllowedSysOrigins([]);
});

function hasPermission(code: string) {
  const codes = accessCodes.value;
  return codes.length === 0 || codes.includes(code);
}

const canQuery = computed(() => hasPermission('props:config:query'));
const canCreate = computed(() => hasPermission('props:config:add'));
const canEdit = computed(() => hasPermission('props:config:edit'));
const canQueryOverviewSales = computed(() => hasPermission('props:config:sales:total'));
const hasPageActions = computed(() => canCreate.value || canQueryOverviewSales.value);

const loading = ref(false);
const total = ref(0);
const list = ref<Array<Record<string, any>>>([]);
const batchOpen = ref(false);
const formOpen = ref(false);
const overviewOpen = ref(false);
const activeRow = ref<null | Record<string, any>>(null);
const amountEditingId = ref<null | string>(null);
const amountSavingId = ref<null | string>(null);
const amountDraft = ref<null | number>(null);
const filterOpen = reactive<Record<string, boolean>>({});
const pageActionOpen = ref(false);
const amountFormatter = new Intl.NumberFormat('zh-CN', {
  maximumFractionDigits: 2,
});
const adminFreeOptions = [
  { label: '是', value: true as any },
  { label: '否', value: false as any },
];
const DEFAULT_STORE_CURRENCY_TYPES = 'GOLD';
const DEFAULT_STORE_VALID_DAYS = '7';
const DEFAULT_RESOURCE_CONFIG_TYPE =
  (PROPS_RESOURCE_CONFIG_TYPES[0]?.value as string | undefined) ?? 'AVATAR_FRAME';

const query = reactive({
  cursor: 1,
  adminFree: undefined as boolean | undefined,
  amountMax: undefined as number | undefined,
  amountMin: undefined as number | undefined,
  code: '',
  del: false as boolean | undefined,
  id: '',
  limit: 20,
  name: '',
  sysOrigin: sysOriginOptions.value[0]?.value ?? 'LIKEI',
  type: DEFAULT_RESOURCE_CONFIG_TYPE as string | undefined,
});

const columns = [
  { align: 'center' as const, dataIndex: 'cover', key: 'cover', title: '资源', width: 104 },
  { dataIndex: 'code', key: 'code', title: '编号', width: 150 },
  { dataIndex: 'typeName', key: 'typeName', title: '类型', width: 120 },
  { dataIndex: 'name', key: 'name', title: '名称', width: 180 },
  { align: 'right' as const, dataIndex: 'amount', key: 'amount', title: '底价', width: 120 },
  { align: 'center' as const, className: 'switch-column', dataIndex: 'del', fixed: 'right' as const, key: 'del', title: '上/下架', width: 84 },
  { align: 'center' as const, className: 'switch-column', dataIndex: 'adminFree', fixed: 'right' as const, key: 'adminFree', title: '经理赠送', width: 96 },
  { align: 'center' as const, className: 'switch-column', dataIndex: 'storeShelfStatus', fixed: 'right' as const, key: 'storeShelfStatus', title: '道具商店', width: 72 },
  { align: 'center' as const, className: 'action-column', dataIndex: 'actions', fixed: 'right' as const, key: 'actions', title: '操作', width: 92 },
];

const filterableColumnKeys = new Set([
  'adminFree',
  'amount',
  'code',
  'del',
  'name',
  'typeName',
]);

function stringifyCellValue(value: any) {
  if (value === undefined || value === null || value === '') {
    return '-';
  }
  return String(value);
}

function getColumnValue(record: Record<string, any>, column: Record<string, any>) {
  const dataIndex = column?.dataIndex;
  if (Array.isArray(dataIndex)) {
    let value = record;
    for (const key of dataIndex) {
      value = value?.[String(key)];
    }
    return value;
  }
  if (dataIndex === undefined || dataIndex === null) {
    return undefined;
  }
  return record?.[String(dataIndex)];
}

function isFilterableColumn(key: unknown) {
  return filterableColumnKeys.has(String(key));
}

function setFilterOpen(key: unknown, open: boolean) {
  filterOpen[String(key)] = open;
}

function hasColumnFilter(key: unknown) {
  switch (String(key)) {
    case 'adminFree': {
      return query.adminFree !== undefined;
    }
    case 'amount': {
      return query.amountMin !== undefined || query.amountMax !== undefined;
    }
    case 'code': {
      return query.code.trim() !== '';
    }
    case 'del': {
      return query.del !== undefined;
    }
    case 'name': {
      return query.name.trim() !== '';
    }
    case 'typeName': {
      return Boolean(query.type);
    }
    default: {
      return false;
    }
  }
}

function resetColumnFilter(key: unknown) {
  switch (String(key)) {
    case 'adminFree': {
      query.adminFree = undefined;
      break;
    }
    case 'amount': {
      query.amountMin = undefined;
      query.amountMax = undefined;
      break;
    }
    case 'code': {
      query.code = '';
      break;
    }
    case 'del': {
      query.del = undefined;
      break;
    }
    case 'name': {
      query.name = '';
      break;
    }
    case 'typeName': {
      query.type = DEFAULT_RESOURCE_CONFIG_TYPE;
      break;
    }
  }
}

function validateAmountFilter() {
  const { amountMax, amountMin } = query;
  if (
    amountMin !== undefined &&
    amountMax !== undefined &&
    Number(amountMin) > Number(amountMax)
  ) {
    message.warning('底价最小值不能大于最大值');
    return false;
  }
  return true;
}

function applyColumnFilter(key: unknown) {
  if (String(key) === 'amount' && !validateAmountFilter()) {
    return;
  }
  filterOpen[String(key)] = false;
  void loadData(true);
}

function clearColumnFilter(key: unknown) {
  resetColumnFilter(key);
  applyColumnFilter(key);
}

function resetAllColumnFilters() {
  query.adminFree = undefined;
  query.amountMax = undefined;
  query.amountMin = undefined;
  query.code = '';
  query.del = undefined;
  query.id = '';
  query.name = '';
  query.type = DEFAULT_RESOURCE_CONFIG_TYPE;
  void loadData(true);
}

function formatAmount(value: any) {
  const numeric = Number(value ?? 0);
  if (!Number.isFinite(numeric)) {
    return stringifyCellValue(value);
  }
  return amountFormatter.format(numeric);
}

async function loadData(reset = false) {
  if (!canQuery.value || !query.sysOrigin) {
    return;
  }
  if (reset) {
    query.cursor = 1;
  }
  loading.value = true;
  try {
    const result = await pagePropsSource({ ...query });
    const records = result.records || [];
    list.value = await attachStoreCommodities(records);
    total.value = result.total || 0;
  } finally {
    loading.value = false;
  }
}

async function attachStoreCommodities(records: Array<Record<string, any>>) {
  const sourceIds = [
    ...new Set(
      records
        .map((record) => String(record.id || '').trim())
        .filter(Boolean),
    ),
  ];
  if (sourceIds.length === 0) {
    return records;
  }
  const commodityMap = await mapPropsStoreBySourceIds({
    sourceIds,
    sysOrigin: query.sysOrigin,
  });
  return records.map((record) => ({
    ...record,
    storeCommodity: commodityMap[String(record.id)] || null,
  }));
}

function handlePageChange(page: number, pageSize: number) {
  query.cursor = page;
  query.limit = pageSize;
  void loadData();
}

async function handleStatusChange(record: Record<string, any>, checked: boolean) {
  const previous = record.del;
  record.del = !checked;
  try {
    await offShelfPropsSource(record.id, record.del);
    message.success('状态已更新');
  } catch (error) {
    record.del = previous;
    throw error;
  }
}

function getRecordId(record: Record<string, any>) {
  return String(record.id || '');
}

function isAmountEditing(record: Record<string, any>) {
  return amountEditingId.value === getRecordId(record);
}

function isAmountSaving(record: Record<string, any>) {
  return amountSavingId.value === getRecordId(record);
}

async function focusAmountInput() {
  await nextTick();
  const input = document.querySelector<HTMLInputElement>('.amount-input input');
  input?.focus();
  input?.select();
}

function startAmountEdit(record: Record<string, any>) {
  if (!canEdit.value) {
    return;
  }
  amountEditingId.value = getRecordId(record);
  amountDraft.value = Number(record.amount ?? 0);
  void focusAmountInput();
}

function cancelAmountEdit() {
  amountEditingId.value = null;
  amountDraft.value = null;
}

function getNextAmountEditableRecord(record: Record<string, any>) {
  const currentIndex = list.value.findIndex(
    (item) => getRecordId(item) === getRecordId(record),
  );
  if (currentIndex === -1) {
    return null;
  }
  return list.value[currentIndex + 1] || null;
}

function buildPropsSourceUpdatePayload(
  record: Record<string, any>,
  overrides: Record<string, any> = {},
) {
  return {
    adminFree: Boolean(record.adminFree),
    amount: Number(record.amount ?? 0),
    code: record.code,
    cover: record.cover,
    expand: record.expand,
    id: record.id,
    name: record.name,
    sourceUrl: record.sourceUrl,
    sysOrigin: record.sysOrigin,
    type: record.type,
    ...overrides,
  };
}

async function handleAmountConfirm(record: Record<string, any>) {
  if (!isAmountEditing(record) || isAmountSaving(record)) {
    return false;
  }
  const amount = Number(amountDraft.value);
  if (!Number.isFinite(amount) || amount < 0) {
    message.warning('请输入正确的底价');
    return false;
  }
  const previous = record.amount;
  if (Number(previous ?? 0) === amount) {
    cancelAmountEdit();
    return true;
  }
  amountSavingId.value = getRecordId(record);
  record.amount = amount;
  try {
    await updatePropsSource(buildPropsSourceUpdatePayload(record, { amount }));
    message.success('底价已更新');
    cancelAmountEdit();
    return true;
  } catch (error) {
    record.amount = previous;
    throw error;
  } finally {
    amountSavingId.value = null;
  }
}

async function handleAmountEnter(record: Record<string, any>) {
  const nextRecord = getNextAmountEditableRecord(record);
  const confirmed = await handleAmountConfirm(record);
  if (confirmed && nextRecord) {
    startAmountEdit(nextRecord);
  }
}

async function handleAdminFreeChange(record: Record<string, any>, checked: boolean) {
  const previous = record.adminFree;
  record.adminFree = checked;
  try {
    await updatePropsSource(buildPropsSourceUpdatePayload(record, { adminFree: checked }));
    message.success('经理赠送权限已更新');
  } catch (error) {
    record.adminFree = previous;
    throw error;
  }
}

function getStoreCommodity(record: Record<string, any>) {
  return record.storeCommodity || null;
}

function buildStoreShelfPayload(record: Record<string, any>, checked: boolean) {
  const commodity = getStoreCommodity(record) || {};
  return {
    ...commodity,
    currencyTypes: commodity.currencyTypes || DEFAULT_STORE_CURRENCY_TYPES,
    del: commodity.del ?? false,
    discount: commodity.discount ?? 0,
    label: commodity.label || '',
    propsType: commodity.propsType || record.type,
    shelfStatus: checked,
    sort: commodity.sort ?? 0,
    sourceId: commodity.sourceId || record.id,
    sysOrigin: commodity.sysOrigin || record.sysOrigin,
    validDays: commodity.validDays || DEFAULT_STORE_VALID_DAYS,
  };
}

async function handleStoreShelfStatusChange(record: Record<string, any>, checked: boolean) {
  const commodity = getStoreCommodity(record);
  const previous = commodity?.shelfStatus;
  const nextCommodity = buildStoreShelfPayload(record, checked);
  record.storeCommodity = nextCommodity;
  try {
    await addOrUpdatePropsStore(nextCommodity);
    message.success('道具商店状态已更新');
  } catch (error) {
    if (commodity) {
      commodity.shelfStatus = previous;
      record.storeCommodity = commodity;
    } else {
      record.storeCommodity = null;
    }
    throw error;
  }
}

function openCreate() {
  pageActionOpen.value = false;
  activeRow.value = null;
  formOpen.value = true;
}

function openBatchCreate() {
  pageActionOpen.value = false;
  activeRow.value = null;
  batchOpen.value = true;
}

function openOverview() {
  pageActionOpen.value = false;
  overviewOpen.value = true;
}

function openEdit(record: Record<string, any>) {
  activeRow.value = { ...record };
  formOpen.value = true;
}

loadData(true);
</script>

<template>
  <div class="resource-config-root">
    <Page
      auto-content-height
      content-class="resource-page-content"
      title="资源配置"
    >
    <ResourceConfigModal
      :open="formOpen"
      :record="activeRow"
      :sys-origin-options="sysOriginOptions"
      @close="formOpen = false"
      @success="loadData()"
    />

    <AdminConfigTable
      v-if="canQuery"
      auto-height
      :columns="columns"
      :current="query.cursor"
      :data-source="list"
      :loading="loading"
      :page-size="query.limit"
      :scroll-x="1000"
      :total="total"
      @page-change="handlePageChange"
    >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'actions'">
              <div class="column-title column-title--actions">
                <span>{{ column.title }}</span>
                <Tooltip title="重置筛选">
                  <Button
                    class="filter-reset-button"
                    size="small"
                    type="text"
                    @click="resetAllColumnFilters"
                  >
                  <RotateCw class="filter-icon-svg" />
                </Button>
              </Tooltip>
              <Popover
                v-if="hasPageActions"
                v-model:open="pageActionOpen"
                overlay-class-name="resource-action-popover"
                placement="bottomRight"
                trigger="click"
              >
                <template #content>
                  <div class="table-action-menu">
                    <Button
                      v-if="canCreate"
                      class="table-action-menu__item table-action-menu__item--primary"
                      type="text"
                      @click="openBatchCreate"
                    >
                      批量导入
                    </Button>
                    <Button
                      v-if="canCreate"
                      class="table-action-menu__item"
                      type="text"
                      @click="openCreate"
                    >
                      新增单个
                    </Button>
                    <Button
                      v-if="canQueryOverviewSales"
                      class="table-action-menu__item"
                      type="text"
                      @click="openOverview"
                    >
                      销售情况
                    </Button>
                  </div>
                </template>
                <Button
                  class="table-action-trigger"
                  size="small"
                  title="页面操作"
                  type="text"
                >
                  <Ellipsis class="filter-icon-svg" />
                </Button>
              </Popover>
            </div>
          </template>
            <template v-else-if="isFilterableColumn(column.key)">
              <div class="column-title">
                <Popover
                  :open="Boolean(filterOpen[String(column.key)])"
                  overlay-class-name="resource-filter-popover"
                  placement="bottomLeft"
                  trigger="click"
                  @open-change="(open: boolean) => setFilterOpen(column.key, open)"
                >
                  <template #content>
                    <div class="column-filter-panel">
                      <template v-if="column.key === 'code'">
                        <Input
                          v-model:value="query.code"
                          allow-clear
                          autofocus
                          placeholder="输入编号"
                          @press-enter="applyColumnFilter(column.key)"
                        />
                      </template>
                      <template v-else-if="column.key === 'typeName'">
                        <Select
                          v-model:value="query.type"
                          option-label-prop="label"
                          placeholder="选择类型"
                          :options="PROPS_RESOURCE_CONFIG_TYPES.map((item) => ({ label: `${item.name}`, value: item.value as any }))"
                        />
                      </template>
                      <template v-else-if="column.key === 'name'">
                        <Input
                          v-model:value="query.name"
                          allow-clear
                          autofocus
                          placeholder="输入名称"
                          @press-enter="applyColumnFilter(column.key)"
                        />
                      </template>
                      <template v-else-if="column.key === 'del'">
                        <Select
                          v-model:value="query.del"
                          allow-clear
                          option-label-prop="label"
                          placeholder="选择上/下架"
                          :options="PROPS_DEL_OPTIONS.map((item) => ({ label: `${item.name}`, value: item.value as any }))"
                        />
                      </template>
                      <template v-else-if="column.key === 'amount'">
                        <div class="amount-range-filter">
                          <InputNumber
                            v-model:value="query.amountMin"
                            :min="0"
                            placeholder="最小"
                            @keydown.enter.prevent="applyColumnFilter(column.key)"
                          />
                          <span class="range-separator">-</span>
                          <InputNumber
                            v-model:value="query.amountMax"
                            :min="0"
                            placeholder="最大"
                            @keydown.enter.prevent="applyColumnFilter(column.key)"
                          />
                        </div>
                      </template>
                      <template v-else-if="column.key === 'adminFree'">
                        <Select
                          v-model:value="query.adminFree"
                          allow-clear
                          option-label-prop="label"
                          placeholder="选择权限"
                          :options="adminFreeOptions"
                        />
                      </template>
                      <div class="column-filter-actions">
                        <Button size="small" @click="clearColumnFilter(column.key)">
                          清空
                        </Button>
                        <Button
                          :loading="loading"
                          size="small"
                          type="primary"
                          @click="applyColumnFilter(column.key)"
                        >
                          查询
                        </Button>
                      </div>
                    </div>
                  </template>
                  <Button
                    class="column-filter-button"
                    :class="{ 'column-filter-button--active': hasColumnFilter(column.key) }"
                    size="small"
                    type="text"
                    @click.stop
                  >
                    <SearchIcon class="filter-icon-svg" />
                  </Button>
                </Popover>
                <span>{{ column.title }}</span>
              </div>
            </template>
            <template v-else>
              {{ column.title }}
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'cover'">
              <RewardIcon :item="record" :size="42" />
            </template>
            <template v-else-if="column.key === 'del'">
              <Switch
                class="compact-switch"
                :checked="!record.del"
                size="small"
                @change="(checked: boolean) => handleStatusChange(record, checked)"
              />
            </template>
            <template v-else-if="column.key === 'amount'">
              <InputNumber
                v-if="isAmountEditing(record)"
                class="amount-input"
                v-model:value="amountDraft"
                autofocus
                :disabled="isAmountSaving(record)"
                :min="0"
                size="small"
                @blur="() => handleAmountConfirm(record)"
                @keydown.enter.prevent="() => handleAmountEnter(record)"
                @keydown.esc="cancelAmountEdit"
              />
              <span
                v-else
                class="amount-value"
                :class="{ 'amount-value--editable': canEdit }"
                @click="startAmountEdit(record)"
              >
                {{ formatAmount(record.amount) }}
              </span>
            </template>
            <template v-else-if="column.key === 'storeShelfStatus'">
              <Tooltip
                :title="getStoreCommodity(record) ? '' : '点击后默认以金币售卖 7 天'"
              >
                <Switch
                  class="compact-switch"
                  :checked="Boolean(getStoreCommodity(record)?.shelfStatus)"
                  size="small"
                  @change="
                    (checked: boolean) => handleStoreShelfStatusChange(record, checked)
                  "
                />
              </Tooltip>
            </template>
            <template v-else-if="column.key === 'adminFree'">
              <Switch
                class="compact-switch"
                :checked="Boolean(record.adminFree)"
                size="small"
                @change="(checked: boolean) => handleAdminFreeChange(record, checked)"
              />
          </template>
          <template v-else-if="column.key === 'actions'">
            <div class="table-actions">
              <Tooltip v-if="canEdit" title="编辑">
                <Button
                  aria-label="编辑"
                  class="edit-icon-button"
                  size="small"
                  type="text"
                  @click="openEdit(record)"
                >
                  <SquarePen class="filter-icon-svg" />
                </Button>
              </Tooltip>
            </div>
          </template>
          <template v-else>
            {{ stringifyCellValue(getColumnValue(record, column)) }}
          </template>
          </template>
    </AdminConfigTable>
    <div v-else class="resource-permission-empty">
      <Empty description="暂无查看权限" />
    </div>

    <ResourceBatchDrawer
      :initial-sys-origin="query.sysOrigin"
      :initial-type="query.type"
      :open="batchOpen"
      :sys-origin-options="sysOriginOptions"
      @close="batchOpen = false"
      @success="loadData(true)"
    />

    <ResourceOverviewModal
      :open="overviewOpen"
      @close="overviewOpen = false"
    />
    </Page>
  </div>
</template>

<style scoped>
.resource-config-root {
  height: 100%;
  min-height: 0;
}

.column-title {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.column-title--actions {
  justify-content: center;
  width: 100%;
}

.column-filter-button,
.filter-reset-button,
.table-action-trigger {
  align-items: center;
  color: rgb(102 112 133);
  display: inline-flex;
  height: 22px;
  justify-content: center;
  padding: 0;
  width: 22px;
}

.column-filter-button:hover,
.filter-reset-button:hover,
.table-action-trigger:hover {
  background: rgb(242 244 247);
  color: rgb(23 92 211);
}

.column-filter-button--active {
  background: rgb(230 240 255);
  color: rgb(22 119 255);
}

.filter-icon-svg {
  height: 14px;
  width: 14px;
}

.column-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}

.column-filter-panel :deep(.ant-input),
.column-filter-panel :deep(.ant-input-number),
.column-filter-panel :deep(.ant-select) {
  width: 100%;
}

.amount-range-filter {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
}

.range-separator {
  color: rgb(152 162 179);
}

.column-filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

:global(.resource-filter-popover .ant-popover-inner-content) {
  padding: 12px;
}

:global(.resource-action-popover .ant-popover-inner-content) {
  padding: 6px;
}

:global(.table-action-menu) {
  display: flex;
  flex-direction: column;
  width: 112px;
}

:global(.table-action-menu__item) {
  color: rgb(71 84 103);
  height: var(--density-button-height) !important;
  justify-content: flex-start;
  padding-inline: 10px;
  text-align: left;
  width: 100%;
}

:global(.table-action-menu__item--primary) {
  color: rgb(22 119 255);
}

.resource-permission-empty {
  align-items: center;
  background: #fff;
  border: 1px solid rgb(229 231 235);
  border-radius: 8px;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
}

.compact-switch {
  min-width: 32px;
}

.compact-switch.ant-switch-checked {
  background: rgb(64 125 238);
}

.compact-switch.ant-switch-disabled {
  opacity: 0.45;
}

.amount-input {
  width: 112px;
}

.amount-input :deep(input) {
  text-align: right;
}

.amount-value {
  color: rgb(52 64 84);
  display: block;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
  text-align: right;
}

.amount-value--editable {
  border-bottom: 1px dashed transparent;
  cursor: pointer;
}

.amount-value--editable:hover {
  border-bottom-color: rgb(64 125 238);
  color: rgb(23 92 211);
}

.table-actions {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.edit-icon-button {
  align-items: center;
  color: rgb(23 92 211);
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.edit-icon-button:hover {
  background: rgb(230 240 255);
  color: rgb(22 119 255);
}

:global(.resource-page-content) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden !important;
  padding: 12px !important;
}
</style>
