<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 {
  deleteHomeZones,
} from './api';
import HomeZoneModal from './components/modal.vue';
import SortModal from './components/sort-modal.vue';
import { formOptions as searchFormOptions } from './config/search';
import { gridOptions } from './config/table';

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: searchFormOptions,
  gridOptions,
  gridEvents,
});

const [HomeZoneFormModal, homeZoneFormModalApi] = useVbenModal({
  connectedComponent: HomeZoneModal,
});

const [SortModalComponent, sortModalApi] = useVbenModal({
  connectedComponent: SortModal,
});

const showHomeZoneModal = (data = {}, isUpdate = false) => {
  homeZoneFormModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  homeZoneFormModalApi.open();
};

const showSortModal = () => {
  sortModalApi.setData({
    gridApi,
  });
  sortModalApi.open();
};

const deleteZonesApi = (row: any) => {
  let ids: (string | number)[] = [];
  if (row) {
    ids.push(row);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item: any) => item.id);
  }
  deleteHomeZones({ ids }).then(() => {
    message.success('删除成功!');
    gridApi.query();
  });
};
</script>

<template>
  <Page auto-content-height title="首页专区管理">
    <!-- 专区编辑弹窗 -->
    <HomeZoneFormModal />
    <!-- 排序弹窗 -->
    <SortModalComponent />

    <div class="p-4">
      <TableAction
        :actions="[
          {
            label: '新增专区',
            type: 'primary',
            icon: 'ant-design:plus-outlined',
            onClick: () => showHomeZoneModal({}, false),
          },
          {
            label: '排序',
            icon: 'ant-design:sort-ascending-outlined',
            onClick: showSortModal,
          },
        ]"
      />

      <Grid>
        <template #icon="{ row }">
          <Image
            v-if="row.icon"
            :width="60"
            :height="60"
            :src="row.icon"
            :fallback="'/static/mine/avatar_1.png'"
          />
        </template>

        <template #toolbar-actions>
          <Button
            v-if="hasTopTableDropDownActions"
            danger
            type="primary"
            @click="deleteZonesApi()"
          >
            删除
          </Button>
        </template>

        <template #action="{ row }">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: () => showHomeZoneModal(row, true),
              },
              {
                label: '删除',
                color: 'error',
                popConfirm: {
                  title: '确定要删除该专区吗？',
                  onConfirm: () => deleteZonesApi(row.id),
                },
              },
            ]"
          />
        </template>
      </Grid>
    </div>
  </Page>
</template>

