<script setup lang="ts">
import type { Flow } from '#/api/workflow/instance/model';

import { computed, ref } from 'vue';

import { VbenAvatar } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';
import { cn } from '@vben/utils';

import { Message, User, Timer, Document } from '@element-plus/icons-vue';
import { ElAvatar, ElTimelineItem, ElTag } from 'element-plus';
import { renderDict } from '#/utils/render';

defineOptions({
  name: 'ApprovalTimelineItem',
});

const props = defineProps<{ item: Flow }>();

interface AttachmentInfo {
  url: string;
  name: string;
}

/**
 * 处理附件信息
 */
const processAttachments = computed(() => {
  const records = props.item.workOrderProcessRecords?.[0];
  if (!records?.attachments) return [];
  const names = records.attachments.split(',');
  const urls = records.attachmentsUrl || [];
  return names.map((name, index) => ({
    name,
    url: urls[index] || ''
  }));
});

const delayAttachments = computed(() => {
  const delayData = props.item.workOrderDelay?.[0];
  if (!delayData?.applyFile) return [];
  const names = delayData.applyFile.split(',');
  const urls = delayData.applyFileUrl || [];
  return names.map((name, index) => ({
    name,
    url: urls[index] || ''
  }));
});

const isMultiplePerson = computed(
  () => props.item.operatorName?.split(',').length > 1,
);

// 处理审批状态显示
function renderApproveStatus(status: number) {
  const statusMap = {
    0: { label: '未审批', type: 'info' },
    1: { label: '已同意', type: 'success' },
    2: { label: '已拒绝', type: 'danger' },
    3: { label: '已废除', type: 'warning' },
  };
  
  return statusMap[status] || { label: '未知状态', type: 'default' };
}
</script>

<template>
  <ElTimelineItem>
    <template #dot>
      <div class="relative rounded-full border">
        <ElAvatar class="bg-primary-400" v-if="isMultiplePerson" :size="36"/>
        <VbenAvatar
          v-else
          :alt="props.item?.operatorName ?? 'unknown'"
          class="bg-primary size-[36px] rounded-full text-white"
          src=""
        />
        <div
          :class="
            cn(
              'absolute bottom-0 right-[-2px]',
              'size-[12px] rounded-full bg-green-500',
              'border-[2px] border-white',
            )
          "
        ></div>
      </div>
    </template>
    <div class="mb-5 ml-2 flex flex-col gap-1" style="padding-left: 15px;">
      <div class="flex items-center gap-1">
        <div class="font-bold">{{ props.item.operationContent }}</div>
        <component :is="renderDict(props.item.status, DictEnum.TICKET_STATUS)" />
      </div>

      <div :class="cn('mt-2 flex flex-wrap gap-2')" v-if="isMultiplePerson">
        <!-- 如果昵称中带, 这里的处理是不准确的 -->
        <div
          :class="cn('bg-foreground/5 flex items-center rounded-full', 'p-1')"
          v-for="(name, index) in props.item.approveName.split(',')"
          :key="index">
          <span class="px-1">{{ name }}</span>
        </div>
      </div>
      <div>{{ props.item.operatorName }}</div>

      <div>{{ props.item.operationTime }}</div>
      
      <!-- 处理工单内容 -->
      <div v-if="props.item.operationType === 'PROCESS' && (props.item.workOrderProcessRecords?.[0]?.processContent || processAttachments.length > 0)" class="mt-2 rounded-lg border p-3">
        <div v-if="props.item.workOrderProcessRecords?.[0]?.processContent" class="flex flex-wrap gap-2">
          <div class="flex items-center gap-1 font-medium">
            <el-icon :size="16"><Message /></el-icon>
            <span>处理内容：</span>
          </div>
          <div class="text-foreground/75 break-all flex-1">{{ props.item.workOrderProcessRecords[0].processContent }}</div>
        </div>
        <div v-if="processAttachments.length > 0" class="mt-2 flex flex-wrap gap-2">
          <div class="font-medium">附件：</div>
          <div class="flex flex-wrap gap-2">
            <a
              v-for="(attachment, index) in processAttachments"
              :key="index"
              :href="attachment.url"
              class="text-primary"
              target="_blank"
            >
              <div class="flex items-center gap-1">
                <span class="icon-[mingcute--attachment-line] size-[14px]"></span>
                <span>{{ attachment.name }}</span>
              </div>
            </a>
          </div>
        </div>
      </div>
      
      <!-- 申请延时内容 -->
      <div v-else-if="props.item.operationType === 'APPLY_DELAY' && props.item.workOrderDelay?.[0] && (props.item.workOrderDelay[0].delayReason || props.item.workOrderDelay[0].delayDuration || delayAttachments.length > 0)" class="mt-2 rounded-lg border p-3">
        <div v-if="props.item.workOrderDelay[0].delayReason" class="flex flex-wrap gap-2">
          <div class="flex items-center gap-1 font-medium">
            <el-icon :size="16"><Message /></el-icon>
            <span>延时原因：</span>
          </div>
          <div class="text-foreground/75 break-all flex-1">{{ props.item.workOrderDelay[0].delayReason }}</div>
        </div>
        <div v-if="props.item.workOrderDelay[0].delayDuration" class="mt-2 flex flex-wrap gap-2">
          <div class="flex items-center gap-1 font-medium">
            <el-icon :size="16"><Timer /></el-icon>
            <span>延时时长：</span>
          </div>
          <div class="text-foreground/75">{{ props.item.workOrderDelay[0].delayDuration }} 小时</div>
        </div>
        <div v-if="delayAttachments.length > 0" class="mt-2 flex flex-wrap gap-2">
          <div class="font-medium">附件：</div>
          <div class="flex flex-wrap gap-2">
            <a
              v-for="(attachment, index) in delayAttachments"
              :key="index"
              :href="attachment.url"
              class="text-primary"
              target="_blank"
            >
              <div class="flex items-center gap-1">
                <span class="icon-[mingcute--attachment-line] size-[14px]"></span>
                <span>{{ attachment.name }}</span>
              </div>
            </a>
          </div>
        </div>
      </div>
      
      <!-- 审核延时内容 -->
      <div v-else-if="props.item.operationType === 'AUDIT_DELAY' && props.item.workOrderDelay?.[0] && (props.item.workOrderDelay[0].approveRemark || props.item.workOrderDelay[0].approveStatus !== undefined || props.item.workOrderDelay[0].approveTime)" class="mt-2 rounded-lg border p-3">
        <div v-if="props.item.workOrderDelay[0].approveRemark" class="flex flex-wrap gap-2">
          <div class="flex items-center gap-1 font-medium">
            <el-icon :size="16"><Message /></el-icon>
            <span>审批意见：</span>
          </div>
          <div class="text-foreground/75 break-all flex-1">{{ props.item.workOrderDelay[0].approveRemark }}</div>
        </div>
        <div v-if="props.item.workOrderDelay[0].approveStatus !== undefined" class="mt-2 flex flex-wrap gap-2">
          <div class="flex items-center gap-1 font-medium">
            <el-icon :size="16"><User /></el-icon>
            <span>审核状态：</span>
          </div>
          <ElTag :type="renderApproveStatus(props.item.workOrderDelay[0].approveStatus).type">
            {{ renderApproveStatus(props.item.workOrderDelay[0].approveStatus).label }}
          </ElTag>
        </div>
        <div v-if="props.item.workOrderDelay[0].approveTime" class="mt-2 flex flex-wrap gap-2">
          <div class="flex items-center gap-1 font-medium">
            <el-icon :size="16"><Timer /></el-icon>
            <span>新截止时间：</span>
          </div>
          <div class="text-foreground/75">{{ props.item.workOrderDelay[0].approveTime }}</div>
        </div>
      </div>
      
      <!-- 原有消息内容 -->
      <div
        v-if="props.item.message && !['PROCESS', 'APPLY_DELAY', 'AUDIT_DELAY'].includes(props.item.operationType)"
        class="mt-2 rounded-lg border px-3 py-1"
        :class="cn('flex gap-2')"
      >
        <Message />
        <div class="text-foreground/75 break-all">{{ props.item.message }}</div>
      </div>
    </div>
  </ElTimelineItem>
</template>



