<script lang="ts" setup>
import type { TSimChannelsModel } from '#/api/iotlcm/tChannel/tSimChannels/type';

import { h, ref } from 'vue';

import { AccessControl } from '@vben/access';
import { Page, useVbenModal } from '@vben/common-ui';
import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
import { getVxePopupContainer } from '@vben/utils';

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { Delete, Export, List } from '#/api/iotlcm/tChannel/tSimChannels';
import BetterVben from '#/constants/BetterVben';
import { commonDownloadExcel } from '#/utils/file/download';

import editModal from './edit.vue';
import { IndexGridColumns, IndexGridSchema } from './model';
import viewModal from './view.vue';

/** ====================  常量  ==================== */

/** ====================  数据  ==================== */
/** 表格选中行 */
const selectRows = ref<TSimChannelsModel[]>([]);

/** ====================  方法  ==================== */
function handlePreview(row: TSimChannelsModel) {
  viewModalApi.setData({ row }).open();
}
function handleEdit(row?: TSimChannelsModel) {
  editModalApi.setData({ data: row, isUpdate: !!row }).open();
}
async function handleDelete(row: TSimChannelsModel) {
  await Delete({ id: [row.id] });
  message.success('删除成功');
  await handleRefresh();
}
async function handleRefresh() {
  await gridApi.query();
}
function handleMultiDelete() {
  const rows = gridApi.grid.getCheckboxRecords();
  const ids: number[] = rows.map((row) => row.id);
  if (ids.length === 0) {
    message.error('请至少选择一项要删除的数据');
    return;
  }
  Modal.confirm({
    title: '提示',
    okType: 'danger',
    centered: true,
    content: `确认删除选中的${ids.length}条记录吗？`,
    onOk: async () => {
      await Delete({ id: ids });
      message.success('删除成功');
      await handleRefresh();
    },
  });
}
async function handleExport() {
  const formValues = gridApi.formApi.form.values;
  await commonDownloadExcel(Export, '通道管理', {
    ...formValues,
    page: 1,
    pageSize: 2000,
  });
  message.success('导出成功');
}

/** ====================  组件  ==================== */
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    ...(BetterVben.grid.formOptions.default as any),
    schema: IndexGridSchema,
  },
  gridOptions: {
    ...(BetterVben.grid.gridOptions.default as any),
    columns: IndexGridColumns,
    proxyConfig: {
      ajax: {
        query: async ({ page }: any, formValues: any) => {
          selectRows.value = [];
          return await List({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
        },
      },
    },
  },
});
BetterVben.function.gridCheckBoxInit(gridApi, selectRows);

const [EditModal, editModalApi] = useVbenModal({
  connectedComponent: editModal,
});

const [ViewModal, viewModalApi] = useVbenModal({
  connectedComponent: viewModal,
});
/** ====================  周期  ==================== */
</script>
<template>
  <Page auto-content-height>
    <Grid table-title="通道管理">
      <template #toolbar-tools>
        <div class="flex items-center justify-center gap-2">
          <Button
            class="flex items-center"
            type="primary"
            :icon="h(MdiPlus)"
            @click="handleEdit(undefined)"
            v-access:code="'cpm:iot:tSimChannels:edit'"
          >
            新增
          </Button>
          <Button
            v-if="selectRows.length > 0"
            class="flex items-center"
            type="primary"
            danger
            :icon="h(MdiDelete)"
            @click="handleMultiDelete"
            v-access:code="'cpm:iot:tSimChannels:delete'"
          >
            删除
          </Button>
          <Button
            class="flex items-center"
            type="primary"
            :icon="h(MdiExport)"
            @click="handleExport"
            v-access:code="'cpm:iot:tSimChannels:export'"
          >
            导出
          </Button>
        </div>
      </template>
      <template #action="{ row }">
        <div class="flex items-center justify-center gap-2">
          <Button
            class="border-none p-0"
            :block="false"
            type="link"
            @click="handlePreview(row)"
            v-access:code="'cpm:iot:tSimChannels:view'"
          >
            查看
          </Button>
          <Button
            class="border-none p-0"
            :block="false"
            type="link"
            @click="handleEdit(row)"
            v-access:code="'cpm:iot:tSimChannels:edit'"
          >
            修改
          </Button>
          <AccessControl :codes="['cpm:iot:tSimChannels:delete']" type="code">
            <Popconfirm
              title="确定删除吗？"
              :get-popup-container="getVxePopupContainer"
              placement="left"
              @confirm="handleDelete(row)"
            >
              <Button class="border-none p-0" :block="false" type="link" danger>
                删除
              </Button>
            </Popconfirm>
          </AccessControl>
        </div>
      </template>
    </Grid>
    <EditModal @confirm="handleRefresh" />
    <ViewModal />
  </Page>
</template>
