<template>
  <Page :auto-content-height="true">
    <template #description>
      <div style="display: flex; justify-content: space-between" ;>
        <div>
          <span style="font-size: 14px; margin-right: 8px">班次名称</span
          ><el-input
            v-model="ClassName"
            style="width: 240px"
            placeholder="Please input"
          />
        </div>
        <div>
          <el-button type="primary">添加</el-button
          ><el-button type="primary">搜索</el-button
          ><el-button type="primary">重置</el-button>
        </div>
      </div>
    </template>
    <BasicTable>
      <template #action="{ row }">
        <el-button size="small" type="primary" plain>编辑</el-button>
        <el-button size="small" plain>删除</el-button>
      </template>
    </BasicTable>
  </Page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns } from './config-data';
const ClassName = ref('');
const mockData = [
  {
    roleId: 2,
    Name: '王保瑞',
    Position: '当班经理',
    roleSort: 1,
    status: '0',
    Startdate: '2024-01-15 10:00:00',
    remark: '当班',
    isEditing: false,
  },
  {
    roleId: 2,
    Name: '王凯',
    Position: '当班经理',
    roleSort: 1,
    status: '0',
    createTime: '2024-01-15 10:00:00',
    remark: '当班',
    isEditing: false,
  },
  {
    roleId: 2,
    Name: '威威',
    Position: '当班经理',
    roleSort: 1,
    status: '0',
    createTime: '2024-01-15 10:00:00',
    remark: '当班',
    isEditing: false,
  },
  // {
  //   roleId: 3,
  //   Name: '普通用户',
  //   roleKey: 'user',
  //   roleSort: 2,
  //   status: '0',
  //   createTime: '2024-01-16 12:00:00',
  //   remark: '测试用户',
  // },
];
// 列表中显示配置
const gridOptions: VxeGridProps = {
  checkboxConfig: {
    // 高亮
    highlight: true,
    // 翻页时保留选中状态
    reserve: true,
    // 点击行选中
    trigger: 'default',
    checkMethod: ({ row }) => row?.roleId !== 1,
  },
  columns,
  size: 'medium',
  height: 'auto',
  data: mockData,
  // proxyConfig: {
  //   ajax: {
  //     query: async ({ page }, formValues = {}) => {
  //       const resp = await getRoleList({
  //         ...formValues,
  //         pageNum: page.currentPage,
  //         pageSize: page.pageSize,
  //       });
  //       return { items: resp.rows, total: resp.total };
  //     },
  //   },
  // },
  rowConfig: {
    keyField: 'roleId',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
  id: 'system-role-index',
};
const [BasicTable, BasicTableApi] = useVbenVxeGrid({
  gridOptions,
});
</script>
<style scoped lang="scss">
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>
