<script lang="ts" setup>
import type { VbenFormProps } from '@vben/common-ui';

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

import { Page, useVbenModal } from '@vben/common-ui';
import { MdiDetail, MdiEdit } from '@vben/icons';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
// import { getCustomerListApi } from '#/api/customer-manage';
import { $t } from '#/locales';

import CustomerForm from './form.vue';

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: true,
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: true,
  schema: [
    {
      component: 'Input',
      fieldName: 'usersname',
      label: '用户名称',
      componentProps: {
        placeholder: $t('ui.placeholder.input'),
        allowClear: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'usersphone',
      label: '用户手机号',
      componentProps: {
        placeholder: $t('ui.placeholder.input'),
        allowClear: true,
      },
    },
  ],
};

const gridOptions: VxeGridProps<any> = {
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
  height: 'auto',
  exportConfig: {},
  pagerConfig: {},
  rowConfig: {
    isHover: true,
  },
  stripe: true,

  proxyConfig: {
    response: {
      result: 'Data',
      total: 'Total',
    },
    // ajax: {
    //   query: async ({ page }, formValues) => {
    //     return await getCustomerListApi({
    //       pageindex: page.currentPage,
    //       rows: page.pageSize,
    //       ...formValues,
    //     });
    //   },
    // },
  },

  columns: [
    { title: '用户名称', field: 'usersname' },
    { title: '用户性质', field: 'usersnature' },
    { title: '用户证件号码', field: 'usersidcardnumber' },
    { title: '用户开户银行名称', field: 'usersbankname' },
    { title: '用户开户银行账号', field: 'usersbanknumber' },
    { title: '用户手机号', field: 'usersphone' },
    { title: '用户邮箱', field: 'usersemail' },
    { title: '用户地址', field: 'usersaddress' },
    { title: '用户联系手机号', field: 'userscontactphone' },
    { title: '用户联系邮箱', field: 'userscontactemail' },
    { title: '用户联系地址', field: 'userscontactaddress' },
    {
      title: '操作',
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      width: 140,
    },
  ],
};

const [Grid] = useVbenVxeGrid({ gridOptions, formOptions });

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  closeOnClickModal: false,
  closeOnPressEscape: false,
  connectedComponent: CustomerForm,
});

/* 创建 */
function handleCreate() {
  modalApi.setData({ create: true }).open();
}

/* 编辑 */
function handleEdit(row: any) {
  modalApi.setData({ row }).open();
}

/* 详情 */
function handleDetail(row: any) {
  modalApi.setData({ row }).open();
  // router.push(`/system/users/detail/${row.userName}`);
}
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="字典列表">
      <template #toolbar-tools>
        <el-button type="primary" @click="handleCreate"> 新增 </el-button>
      </template>
      <template #action="{ row }">
        <el-button
          round
          @click="() => handleDetail(row)"
          :icon="MdiDetail"
          class="!p-2"
        />
        <el-button
          round
          @click="() => handleEdit(row)"
          :icon="MdiEdit"
          class="!p-2"
        />
      </template>
    </Grid>
    <Modal />
  </Page>
</template>
