<template>
  <Page :auto-content-height="true">
    <BasicTable
      table-title="请把当天不执行任务的人员选【不带】，选择【不带】后系统自动取消该岗位任务频率为每天一次的任务。此操作仅用于配合任务处理，不代表真实的考勤。"
    >
      <template #action="{ row }">
        <el-button
          v-if="!row.isEditing"
          size="small"
          type="primary"
          plain
          @click="() => (row.isEditing = true)"
          >编辑</el-button
        >
        <template v-else>
          <el-button
            size="small"
            type="primary"
            @click="() => (row.isEditing = false)"
            >保存</el-button
          >
          <el-button size="small" plain @click="() => (row.isEditing = false)"
            >取消</el-button
          >
        </template>
      </template>
      <template #Select="{ row }">
        <el-select
          v-model="row.remark"
          v-if="row.isEditing"
          placeholder="Select"
        >
          <!-- <el-options
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="row.remark"
          /> -->
        </el-select>
        <span v-else>{{ row.remark }}</span>
      </template>
    </BasicTable>
  </Page>
</template>
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns, querySchema } from './config-data';
import type { VbenFormProps } from '@vben/common-ui';
const mockData = [
  {
    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: 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 formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  // 日期选择格式化
  // fieldMappingTime: [
  //   [
  //     'createTime',
  //     ['params[beginTime]', 'params[endTime]'],
  //     ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
  //   ],
  // ],
};

// 列表中显示配置
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({
  formOptions,
  gridOptions,
});
</script>
<style scoped lang="scss">
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>
