<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ConfigModel } from '#/api/system/config/model';

import { useVbenDrawer } from '@vben/common-ui';

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

import { tableColumns } from './config-data';
import DrawerComp from './drawer.vue';

// 列表中显示配置
const gridOptions: VxeGridProps = {
  // checkboxConfig: {
  //   // 高亮
  //   highlight: true,
  //   // 翻页时保留选中状态
  //   reserve: true,
  //   // 点击行选中
  //   trigger: 'default',
  //   checkMethod: ({ row }) => row?.roleId !== 1,
  // },
  columns: tableColumns,
  size: 'medium',
  height: 100,
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        // query: async ({ page }, formValues = {}) => {
        // const resp = await configList({
        //   ...formValues,
        //   pageNum: page.currentPage,
        //   pageSize: page.pageSize,
        // });
        const resp = {
          total: 10,
          rows: [
            {
              oilId: '1001',
              name: '油站1',
              level: '1',
              locationType: 'city',
              location: '地址1',
              networkType: 'passing_by',
              createTime: '2023-01-01 00:00:00',
              remark: '备注1',
            },
            {
              oilId: '1002',
              name: '油站2',
              level: '2',
              locationType: 'suburb',
              location: '地址2',
              networkType: 'passing_by',
              createTime: '2023-01-02 00:00:00',
              remark: '备注2',
            },
          ],
        };

        return { items: resp.rows, total: resp.total };
      },
    },
  },
  rowConfig: {
    keyField: 'oilIId',
  },
  id: 'oil-principal-index',
};
const [BasicTable, basicTableApi] = useVbenVxeGrid({
  gridOptions,
});

// 编辑修改配置
function handleEdit(configModel: ConfigModel) {
  // configDrawerApi.setData({ ...configModel, isUpdate: true }).open();
}
// 单个删除配置
async function confirmEvent(configModel: ConfigModel) {
  // await deleteConfig([configModel.configId]);
  await basicTableApi.reload();
}

const [VbenConfigDrawer, configDrawerApi] = useVbenDrawer({
  connectedComponent: DrawerComp,
});

// 新增打开配置
function openDrawer() {
  configDrawerApi.setData({ isUpdate: false }).open();
}
</script>

<template>
  <div>
    <BasicTable>
      <template #action="{ row }">
        <ElSpace>
          <ElButton
            size="small"
            type="primary"
            plain
            @click="handleEdit(row)"
            v-access:code="['system:config:edit']"
          >
            编辑
          </ElButton>
          <ElPopconfirm title="确认删除" @confirm="confirmEvent(row)">
            <template #reference>
              <ElButton
                size="small"
                type="danger"
                plain
                v-access:code="['system:config:remove']"
              >
                删除
              </ElButton>
            </template>
          </ElPopconfirm>
        </ElSpace>
      </template>
    </BasicTable>
    <VbenConfigDrawer @reload="basicTableApi.reload()" />
  </div>
</template>
