<script setup lang="ts">
import { computed } from 'vue';

import { confirm, Page, useVbenModal } from '@vben/common-ui';

import {
  Button as TButton,
  Link as TLink,
  Space as TSpace,
  Switch as TSwitch,
  Tag as TTag
} from 'tdesign-vue-next';

import { message } from '#/adapter/tdesign';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { changeAdminStatus, getAdminListByPage } from '#/api';
import { toObject } from '#/enum';
import { CommonStatusEnum } from '#/enum/CommonStatus';

import { useGridSchema, useSearchFormSchema } from './data';
import Form from './form.vue';

const [FormModel, formModelApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

function onStatusChange(value: any, row: any) {
  confirm(`确认${value === 1 ? '启用' : '禁用'}用户`, `切换状态`)
    .then(async () => {
      await changeAdminStatus({ id: row.id, status: value });
      row.status = value;
      message.success(`${value === 1 ? '启用' : '禁用'}成功`);
    })
    .catch(() => {
      message.warning('取消操作');
    });
}

const [Grid, GridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useSearchFormSchema(),
    showCollapseButton: false,
    submitButtonOptions: {
      content: '查询',
    },
    submitOnChange: true,
    submitOnEnter: true,
  },
  gridOptions: {
    minHeight: 600,
    columns: useGridSchema(),
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getAdminListByPage({
            current: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
        },
      },
    },
  },
  // 完全移除分隔条
  separator: false,
  // 你也可以使用下面的代码来移除分隔条
  // separator: { show: false },
  // 或者使用下面的代码来改变分隔条的颜色
  // separator: { backgroundColor: 'rgba(100,100,0,0.5)' },
});

const addEvent = () => {
  formModelApi.setData({}).open();
};
const editEvent = (row) => {
  formModelApi.setData(row).open();
};
const onRefresh = () => {
  GridApi.reload();
};

const roleOptionsMap = computed(() => {
  return toObject(
    GridApi.formApi.getFieldComponentRef('roleIds')?.getOptions() ?? [],
    'value',
    'label',
  );
});
const deptOptionsMap = computed(() => {
  return toObject(
    GridApi.formApi.getFieldComponentRef('deptId')?.getOptions() ?? [],
    'value',
    'label',
  );
});
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="用户列表">
      <template #toolbar-tools>
        <TButton class="mr-2" type="primary" @click="addEvent">
          新增用户
        </TButton>
      </template>

      <template #status="{ row }">
        <TSwitch
          :value="row.status"
          :checked-value="true"
          :unchecked-value="false"
          :on-update:value="(value) => onStatusChange(value, row)"
        >
          {{ toObject(CommonStatusEnum, 'value', 'label')[row.status] }}
        </TSwitch>
      </template>

      <template #roleIds="{ row }">
        <TSpace>
          <TTag theme="primary" v-for="id in row.roleIds" :key="id">
            {{ roleOptionsMap[id] }}
          </TTag>
        </TSpace>
      </template>

      <template #deptId="{ row }"> {{ deptOptionsMap[row.deptId] }} </template>

      <template #actions="{ row }">
        <TSpace>
          <TLink theme="primary" @click="editEvent(row)">编辑</TLink>
        </TSpace>
      </template>
    </Grid>

    <FormModel @success="onRefresh" />
  </Page>
</template>
