<script lang="ts" setup>
/**
 * 医生排班变更日志列表（日志审计）
 * 记录日历排班的每次修改：操作人、门店、医生、动作、涉及日期与前后快照；
 * 同一次多医生批量操作通过批次号串联，详情弹窗展示前后排班对照
 */
import { onMounted } from 'vue';

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

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

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

import { getScheduleLogActionOption } from './api';
import DetailModal from './components/detail-modal.vue';
import { scheduleActionColor } from './config/constants';
import { formOptions } from './config/search';
import { gridOptions } from './config/table';

defineOptions({ name: 'DoctorScheduleLog' });

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

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

/** 打开详情弹窗（传行数据兜底，详情接口失败时仍可看列表字段） */
function openDetail(row: Record<string, any>) {
  detailModalApi.setData({ id: Number(row?.id || 0), values: row });
  detailModalApi.open();
}

onMounted(async () => {
  try {
    const opts = await getScheduleLogActionOption();
    const options = Array.isArray(opts) ? opts : [];
    gridApi.formApi?.updateSchema?.([
      {
        fieldName: 'action',
        componentProps: { allowClear: true, options, placeholder: '全部' },
      },
    ]);
  } catch {
    // 接口失败时沿用 constants 兜底选项
  }
});
</script>

<template>
  <Page auto-content-height title="排班变更日志">
    <DetailModalComp />
    <Grid>
      <template #toolbar-actions />
      <template #user_type="{ row }">
        <Tag :color="Number(row.user_type) === 2 ? 'geekblue' : 'green'">
          {{ row.user_type_txt || row.user_type }}
        </Tag>
      </template>
      <template #action_type="{ row }">
        <Tag :color="scheduleActionColor(Number(row.action))">
          {{ row.action_txt || row.action }}
        </Tag>
      </template>
      <template #dates_count="{ row }">
        {{ row.dates_count || (Array.isArray(row.dates) ? row.dates.length : 0) }} 天
      </template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '详情',
              type: 'link',
              size: 'small',
              onClick: () => openDetail(row),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
