<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

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

import { Avatar, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';

import DetailModal from './components/DetailModal.vue';
import FormModalDemo from './components/modal.vue';
import { formOptions } from './config/search';
import { inputGridOptions } from './config/table';
import {
  inputUserDisplayName,
  normalizeInputUser,
  resolveAvatarUrl,
} from '../store-input/utils/inputUser';

const hasTopTableDropDownActions = ref(false);

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions: inputGridOptions,
  gridEvents,
});

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

const [DetailModalComponent, detailModalApi] = useVbenModal({
  connectedComponent: DetailModal,
});

const showDetail = (row: any) => {
  detailModalApi.setData({
    values: row,
  });
  detailModalApi.open();
};

const showModal = (data = {}, isUpdate = false) => {
  formModalApi.setData({
    values: data,
    update: isUpdate,
    gridApi,
  });
  formModalApi.open();
};

const getTypeText = (type: number) => {
  if (type === 1) return '中医医生';
  if (type === 2) return '西医医生';
  return '-';
};

const getStatusColor = (status: number) => {
  if (status === 0) return 'orange';
  if (status === 1) return 'success';
  return 'error';
};

const getStatusText = (status: number) => {
  if (status === 0) return '待审核';
  if (status === 1) return '审核通过';
  return '审核拒绝';
};
</script>

<template>
  <Page auto-content-height title="医生信息预填">
    <FormModal />
    <DetailModalComponent />
    <Grid>
      <template #toolbar-actions>
        <TableAction
          :actions="[
            {
              label: '新增预填',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              onClick: showModal.bind(null, {}, false),
            },
          ]"
        />
      </template>
      <template #type="{ row }">
        <Tag>{{ getTypeText(row.type) }}</Tag>
      </template>
      <template #status="{ row }">
        <Tag :color="getStatusColor(row.status)">
          {{ getStatusText(row.status) }}
        </Tag>
      </template>
      <template #inputUser="{ row }">
        <div v-if="normalizeInputUser(row)" class="flex items-center gap-2">
          <Avatar
            v-if="resolveAvatarUrl(row.inputUser?.avatar)"
            :src="resolveAvatarUrl(row.inputUser?.avatar)"
            :size="28"
          />
          <Avatar v-else :size="28">{{ inputUserDisplayName(row.inputUser).charAt(0) }}</Avatar>
          <span>{{ inputUserDisplayName(row.inputUser) }}</span>
        </div>
        <span v-else>-</span>
      </template>
      <template #mobile="{ row }">
        <SensitiveText :record="row" field="mobile" />
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看',
              type: 'link',
              icon: 'uil:eye',
              size: 'small',
              onClick: showDetail.bind(null, row),
            },
            {
              label: '编辑',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              ifShow: row.status === 0,
              onClick: showModal.bind(null, row, true),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
