<template>
  <div class="im-biz-record-message">
    <div v-if="showNoPermission" class="im-biz-record-no-permission">暂无当前消息权限</div>

    <template v-else>
      <!-- 单条：详情表 -->
      <template v-if="isSingleItem">
        <div class="im-biz-record-item">
          <div class="im-biz-record-table-wrap">
            <table class="im-biz-record-table im-biz-record-table--detail">
              <tbody>
                <tr v-for="field in resolveItemFields(singleItem)" :key="field.label">
                  <th>{{ field.label }}</th>
                  <td>{{ field.value }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 审批卡片：底部操作按钮 -->
          <div v-if="isApprovalCard" class="im-biz-record-actions">
            <a-button size="small" @click="handleDetail(singleItem)">
              <Icon icon="ant-design:file-search-outlined" />
              <span>查看详情</span>
            </a-button>
            <template v-if="liveActionable">
              <a-button size="small" type="primary" :loading="approving" @click="handleApprove(singleItem)">
                <Icon icon="ant-design:check-outlined" />
                <span>{{ singleItem.actionLabel || '审批' }}</span>
              </a-button>
              <a-button size="small" danger @click="openReject(singleItem)">
                <Icon icon="ant-design:close-outlined" />
                <span>拒绝</span>
              </a-button>
            </template>
            <!-- 不可办理(已处理/已流转/非当前处理人)：置灰提示 -->
            <span v-else-if="!props.mine && disabledText" class="im-biz-record-disabled">{{ disabledText }}</span>
            <a v-if="canLocate" class="im-biz-record-link" @click.prevent="handleLinkClick(singleItem.linkPath)">
              <Icon icon="ant-design:unordered-list-outlined" />
              <span>跳转至列表</span>
            </a>
          </div>

          <!-- 普通分享卡片：定位链接 -->
          <a v-else class="im-biz-record-link" @click.prevent="handleLinkClick(singleItem.linkPath)">
            <Icon icon="ant-design:link-outlined" />
            <span>查看并定位到此数据</span>
          </a>
        </div>
      </template>

      <!-- 多条：列表表，第一列为定位链接 -->
      <template v-else>
        <div class="im-biz-record-table-wrap im-biz-record-table-wrap--list">
          <table class="im-biz-record-table im-biz-record-table--list">
            <thead>
              <tr>
                <th class="im-biz-record-link-col">链接</th>
                <th v-for="columnLabel in listColumnLabels" :key="columnLabel">{{ columnLabel }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in payload.items" :key="item.recordId || index">
                <td class="im-biz-record-link-col">
                  <a class="im-biz-record-link" @click.prevent="handleLinkClick(item.linkPath)">
                    <Icon icon="ant-design:link-outlined" />
                    <span>定位</span>
                  </a>
                </td>
                <td v-for="columnLabel in listColumnLabels" :key="columnLabel">
                  {{ getFieldValue(item, columnLabel) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </template>

      <div v-if="showPeerNoPermissionTip" class="im-biz-record-peer-tip">对方无此功能权限</div>
    </template>

    <!-- 查看详情弹窗 -->
    <ImApprovalDetailModal ref="detailModalRef" />

    <!-- 驳回理由弹窗 -->
    <a-modal v-model:open="rejectOpen" title="驳回审批" :confirmLoading="rejecting" okText="确认驳回" @ok="confirmReject">
      <a-form layout="vertical">
        <a-form-item label="驳回理由" required>
          <a-textarea v-model:value="rejectReason" :rows="3" placeholder="请填写驳回理由" :maxlength="500" show-count />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, onMounted, watch } from 'vue';
  import type { ImBizRecordItem, ImBizRecordPayload } from './imBizRecordMessage';
  import { getImBizRecordFieldValueByLabel, resolveImBizRecordItemFields, resolveImBizRecordListColumnLabels } from './imBizRecordMessage';
  import { navigateImBizRecordLink } from './imRecordLocate';
  import { hasImBizRecordPagePermission } from './imBizRecordPermission';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { approveApproval, rejectApproval, getApprovalStatus } from '/@/views/approval/flow/approvalHandle.api';
  import ImApprovalDetailModal from './ImApprovalDetailModal.vue';

  defineOptions({ name: 'ImBizRecordMessageContent' });

  const props = defineProps<{
    payload: ImBizRecordPayload;
    mine?: boolean;
    receiverHasBizPagePermission?: boolean;
  }>();

  // 办理成功后通知父级(ImChat)刷新当前会话，使下一节点卡片/结果通知即时出现
  const emit = defineEmits(['handled']);

  const { createMessage } = useMessage();

  const detailModalRef = ref();
  const approving = ref(false);
  const rejecting = ref(false);
  const rejectOpen = ref(false);
  const rejectReason = ref('');
  const rejectItem = ref<ImBizRecordItem | null>(null);
  // 本地办理结果：approved / rejected（卡片消息为静态，办理后本地标记）
  const actionDone = ref<'' | 'approved' | 'rejected'>('');

  // 审批实例实时状态（用于旧节点卡片置灰）
  interface LiveStatus {
    exists: boolean;
    status?: string;
    statusText?: string;
    currentNodeId?: string;
    currentHandlersText?: string;
    canApprove?: boolean;
  }
  const liveStatus = ref<LiveStatus | null>(null);
  const liveLoaded = ref(false);

  const isSingleItem = computed(() => props.payload.items.length === 1);
  const singleItem = computed(() => props.payload.items[0]);
  const listColumnLabels = computed(() => resolveImBizRecordListColumnLabels(props.payload.items));

  // 审批卡片：单条且带审批实例ID
  const isApprovalCard = computed(() => isSingleItem.value && !!singleItem.value?.instanceId);

  // 是否仍可办理：本地未办理 且 实例审批中 且 卡片节点==当前节点 且 本人为当前处理人
  const liveActionable = computed(() => {
    if (!isApprovalCard.value || actionDone.value || props.mine) {
      return false;
    }
    const s = liveStatus.value;
    if (!s || !s.exists || s.status !== '0' || !s.canApprove) {
      return false;
    }
    // 携带 nodeId 时严格比对当前节点，区分同一实例的新旧卡片
    const cardNodeId = singleItem.value?.nodeId;
    if (cardNodeId) {
      return s.currentNodeId === cardNodeId;
    }
    return true;
  });

  // 不可办理时的置灰提示文案
  const disabledText = computed(() => {
    if (actionDone.value) {
      return actionDone.value === 'rejected' ? '已驳回' : '已处理';
    }
    const s = liveStatus.value;
    if (!s) {
      return liveLoaded.value ? '加载失败' : '';
    }
    if (!s.exists) {
      return '审批已失效';
    }
    if (s.status === '1') return '已通过';
    if (s.status === '2') return '已驳回';
    if (s.status === '3') return '已撤销';
    // 审批中但本卡片不可办理
    const cardNodeId = singleItem.value?.nodeId;
    if (cardNodeId && s.currentNodeId !== cardNodeId) {
      return '已流转，无需处理';
    }
    return '等待他人处理';
  });

  async function loadLiveStatus() {
    const id = singleItem.value?.instanceId;
    if (!isApprovalCard.value || props.mine || !id) {
      return;
    }
    try {
      const res: any = await getApprovalStatus(id);
      liveStatus.value = (res || { exists: false }) as LiveStatus;
    } catch {
      liveStatus.value = null;
    } finally {
      liveLoaded.value = true;
    }
  }

  onMounted(loadLiveStatus);
  watch(() => singleItem.value?.instanceId, loadLiveStatus);

  const hasPagePermission = computed(() => hasImBizRecordPagePermission(props.payload.pagePath));
  // 审批卡片即使无列表页权限也应可办理/查看详情，仅"跳转至列表"受页面权限约束
  const showNoPermission = computed(() => !props.mine && !hasPagePermission.value && !isApprovalCard.value);
  const canLocate = computed(() => props.mine || hasPagePermission.value);

  const showPeerNoPermissionTip = computed(() => !!props.mine && props.receiverHasBizPagePermission === false);

  function resolveItemFields(item: ImBizRecordItem) {
    return resolveImBizRecordItemFields(item);
  }

  function getFieldValue(item: ImBizRecordItem, label: string) {
    return getImBizRecordFieldValueByLabel(item, label);
  }

  async function handleLinkClick(linkPath: string) {
    if (!linkPath || showNoPermission.value) {
      return;
    }
    await navigateImBizRecordLink(linkPath);
  }

  function handleDetail(item: ImBizRecordItem) {
    if (!item.instanceId) return;
    detailModalRef.value?.openModal(item.instanceId);
  }

  async function handleApprove(item: ImBizRecordItem) {
    if (!item.instanceId || approving.value) return;
    try {
      approving.value = true;
      const res: any = await approveApproval({ instanceId: item.instanceId });
      createMessage.success(typeof res === 'string' ? res : '已审批');
      actionDone.value = 'approved';
      // 立即刷新本卡片状态(置灰)，再通知父级刷新会话
      await loadLiveStatus();
      emit('handled');
    } finally {
      approving.value = false;
    }
  }

  function openReject(item: ImBizRecordItem) {
    rejectItem.value = item;
    rejectReason.value = '';
    rejectOpen.value = true;
  }

  async function confirmReject() {
    const item = rejectItem.value;
    if (!item?.instanceId) return;
    if (!rejectReason.value.trim()) {
      createMessage.warning('请填写驳回理由');
      return;
    }
    try {
      rejecting.value = true;
      await rejectApproval({ instanceId: item.instanceId, reason: rejectReason.value.trim() });
      createMessage.success('已驳回');
      actionDone.value = 'rejected';
      rejectOpen.value = false;
      await loadLiveStatus();
      emit('handled');
    } finally {
      rejecting.value = false;
    }
  }
</script>

<style lang="less" scoped>
  .im-biz-record-message {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
    max-width: 420px;
  }

  .im-biz-record-no-permission {
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #8c8c8c;
    text-align: center;
  }

  .im-biz-record-peer-tip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fff7e6;
    border: 1px solid #ffd591;
    font-size: 12px;
    line-height: 1.5;
    color: #d46b08;
  }

  .im-biz-record-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* 审批办理按钮栏 */
  .im-biz-record-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed #f0f0f0;

    .im-biz-record-done {
      font-size: 12px;
      color: #52c41a;
      font-weight: 500;
    }

    /* 不可办理置灰提示 */
    .im-biz-record-disabled {
      display: inline-flex;
      align-items: center;
      padding: 1px 8px;
      border-radius: 10px;
      background: #f5f5f5;
      border: 1px solid #e0e0e0;
      font-size: 12px;
      color: #bfbfbf;
    }
  }

  .im-biz-record-table-wrap {
    overflow: hidden;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background: #fff;

    &--list {
      overflow-x: auto;
    }
  }

  .im-biz-record-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;

    th,
    td {
      padding: 8px 10px;
      border-bottom: 1px solid #f0f0f0;
      vertical-align: top;
      word-break: break-word;
    }

    tr:last-child {
      th,
      td {
        border-bottom: none;
      }
    }

    &--detail {
      table-layout: fixed;

      th {
        width: 38%;
        background: #fafafa;
        color: #595959;
        font-weight: 500;
        text-align: left;
      }

      td {
        color: #262626;
        background: #fff;
      }
    }

    &--list {
      min-width: 100%;
      table-layout: auto;

      thead th {
        background: #fafafa;
        color: #595959;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
      }

      tbody td {
        color: #262626;
        background: #fff;
      }
    }
  }

  .im-biz-record-link-col {
    width: 72px;
    min-width: 72px;
    white-space: nowrap;
  }

  .im-biz-record-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #1677ff;
    text-decoration: underline;
    cursor: pointer;

    &:hover {
      color: #0958d9;
    }
  }
</style>
