<script setup lang="ts">
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { Button, Card, Space } from 'ant-design-vue';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { AdminConfig } from '#/api/core/admin.user';
import { getAdminConfigList } from '#/api/core/admin.user';
import { useVbenModal } from '@vben/common-ui';
import addConfigModal from './add-config.vue';
import editConfigModal from './edit-config.vue';
const gridOptions: VxeGridProps<AdminConfig> = {
  columns: [
    { field: 'key', title: 'Key', },
    { field: 'value', title: '值' },
    { field: 'remark', title: '备注', },
    {title: '操作',width: 200,fixed: 'right',slots: {default:"operation"},},
  ],
  minHeight: 650,
  pagerConfig: {},
  proxyConfig: {
    response: {
      total: 'total',
      result: 'data',
    },
    ajax: {
      query: async (
        { page }: { page: { pageSize: number; currentPage: number } },
      ) => {
        return await getAdminConfigList({
            page: page.currentPage,
            pageSize: page.pageSize,
        });
      },
    },
  },

  rowConfig: {
    isHover: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({ gridOptions });
const [addConfigM, addConfigApi] = useVbenModal({
  connectedComponent: addConfigModal,
  onClosed: async () => {
    addConfigApi.close();
    GridApi.reload();
  },
});
const addConfig = () => {
  addConfigApi.open();
};
const [editConfigM, editConfigApi] = useVbenModal({
  connectedComponent: editConfigModal,
  onClosed: async () => {
    editConfigApi.close();
    GridApi.reload();
  },
});
const editConfig = (row: AdminConfig) => {
  editConfigApi.setData(row);
  editConfigApi.open();
};
const deleteConfig = (row: AdminConfig) => {
  // 这里可以调用删除接口
  console.log('删除配置', row);
};
</script>

<template>
  <Page auto-content-height>
    <addConfigM class="w-[50%]" />
    <editConfigM class="w-[50%]" />
    <Card class="mb-5" title="配置操作">
      <Space>
        <Button @click="addConfig">新增</Button>
        <Button> 删除 </Button>
      </Space>
    </Card>
    <Grid>
        <template #operation="{ row }">
            <Space>
            <Button type="primary" @click="editConfig(row)">编辑</Button>
            <Button type="dashed" @click="deleteConfig(row)">删除</Button>
            </Space>
        </template>
    </Grid>
  </Page>
</template>
