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

import { computed, ref } from 'vue';

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

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

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import AuditModal from './components/AuditModal.vue';
import DetailModal from './components/DetailModal.vue';
import { auditFormOptions } from './config/search';
import { auditGridOptions } from './config/table';

const userStore = useUserStore();

const isPlatformAdmin = computed(() => {
  return userStore?.userInfo?.roles?.user_type === 2;
});

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: auditFormOptions,
  gridOptions: auditGridOptions,
  gridEvents,
});

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

const [AuditModalComponent, auditModalApi] = useVbenModal({
  connectedComponent: AuditModal,
});

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

const showAudit = (row: any) => {
  auditModalApi.setData({
    values: row,
    gridApi,
  });
  auditModalApi.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="医生信息审核">
    <DetailModalComponent />
    <AuditModalComponent />
    <Grid>
      <template #type="{ row }">
        <Tag>{{ getTypeText(row.type) }}</Tag>
      </template>
      <template #status="{ row }">
        <Tag :color="getStatusColor(row.status)">
          {{ getStatusText(row.status) }}
        </Tag>
      </template>
      <template #audit_time="{ row }">
        <span v-if="row.audit_time">
          {{ new Date(row.audit_time * 1000).toLocaleString() }}
        </span>
        <span v-else>-</span>
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看详情',
              type: 'link',
              icon: 'uil:eye',
              size: 'small',
              onClick: showDetail.bind(null, row),
            },
            {
              label: '审核',
              type: 'link',
              icon: 'uil:check',
              size: 'small',
              ifShow: row.status === 0 && isPlatformAdmin,
              onClick: showAudit.bind(null, row),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
