<template>
  <BasicTable @register="registerTimeTable">
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '详情',
            ifShow:getCheckPerm('accountlist-detail'),
            onClick: handleEdit.bind(null, record),
          }
        ]"
      />
    </template>
  </BasicTable>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable, FormProps, TableAction } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
import { ListApi } from '/@/api/account';
import { userListSchema } from './data';
import { useI18n } from '/@/hooks/web/useI18n';
import { useRouter } from 'vue-router'
import { otherInfoStore } from '/@/store/modules/other'
import { usePermissionStore } from '/@/store/modules/permission';
export default defineComponent({
components: {
BasicTable,
TableAction,
PageWrapper,
[Divider.name]: Divider,
[Card.name]: Card,
Empty,
[Descriptions.name]: Descriptions,
[Descriptions.Item.name]: Descriptions.Item,
[Steps.name]: Steps,
[Steps.Step.name]: Steps.Step,
[Tabs.name]: Tabs,
[Tabs.TabPane.name]: Tabs.TabPane,
},
setup() {
const { t } = useI18n();
const { setOverviewInfo } = otherInfoStore();
const router = useRouter()
const permissionStore = usePermissionStore();
const { getCheckPerm } = permissionStore;
const searchForm: Partial<FormProps> = {
  labelWidth: 100,
  schemas: [
    {
      field: 'userName',
      label: '用户账号',
      component: 'Input',
      componentProps: {
        maxLength: 100,
      },
      colProps: {
        xl: 6,
        xxl: 6,
      },
    },{
      field: 'email',
      label: '用户邮箱',
      component: 'Input',
      componentProps: {
        maxLength: 100,
      },
      colProps: {
        xl: 8,
        xxl: 8,
      },
    }
  ],
};
const [registerTimeTable, { reload }] = useTable({
  api: ListApi,
  title: '用户列表',
  columns: userListSchema,
  useSearchForm: true,
  formConfig: searchForm,
  showTableSetting: true,
  showIndexColumn:false,
  rowKey: 'id',
  fetchSetting: {
    pageField: 'pageNum',
    sizeField: 'pageSize',
    listField: 'list',
    totalField: 'total',
  },
  actionColumn: {
    width: 100,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
  },
  canResize:true,
});
function tabChange(val: string) {
  console.log('tabChange', val);
  reload();
}
function handleOpen(record: Recordable) {
  console.log('点击了启用', record);
}
function handleEdit(record: Recordable) {
  console.log('record', record);
  setOverviewInfo(record)
  router.push({path:'details'})
}
return {
  registerTimeTable,
  handleOpen,
  tabChange,
  reload,
  handleEdit,
  getCheckPerm,
  t,
};
},
});
</script>
<style lang="less" scoped>
.desc-wrap-BasicTable {
background-color: #f0f2f5;
.vben-basic-table-form-container {
padding: 0;
}
}
</style>
