<template>
  <BasicLayout>
    <view class="px-15 pb-15">
      <!-- 公文基本信息 -->
      <view class="gw-info-section">
        <view class="section-title">公文信息</view>
        <view class="info-item">
          <text class="label">公文标题：</text>
          <text class="value title-bold">{{ gwInfo.title }}</text>
        </view>
        <view class="info-item">
          <text class="label">公文类型：</text>
          <text class="value">{{ gwInfo.docType }}</text>
        </view>
        <view class="info-item">
          <text class="label">紧急程度：</text>
          <text class="value">{{ getUrgencyText(gwInfo.urgencyLevel) }}</text>
        </view>
        <view class="info-item">
          <text class="label">创建人：</text>
          <text class="value">{{ getCreatorName(gwInfo.tjrId) }}</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间：</text>
          <text class="value">{{ formatTime(gwInfo.createdTime) }}</text>
        </view>
      </view>

      <!-- 文件信息 -->
      <view class="file-section">
        <view class="section-title">附件</view>
        <view class="file-list" v-if="hasAttachments">
          <!-- 处理单个附件（从gwInfo直接获取） -->
          <view 
            v-if="gwInfo.fileUrl" 
            class="file-item"
            @click="previewSingleFile"
          >
            <view class="file-icon">
              <text v-if="isImage(gwInfo.fileFormat || '')">🖼️</text>
              <text v-else-if="isVideo(gwInfo.fileFormat || '')">🎥</text>
              <text v-else-if="canPreview(gwInfo.fileFormat || '')">📄</text>
              <text v-else>📎</text>
            </view>
            <view class="file-info">
              <text class="file-name">{{ gwInfo.fileName || '未知文件' }}</text>
              <text class="file-type">{{ (gwInfo.fileFormat || 'unknown').toUpperCase() }}</text>
            </view>
            <view class="file-actions">
              <u-button 
                v-if="canPreview(gwInfo.fileFormat || '') && !isVideo(gwInfo.fileFormat || '')" 
                text="预览" 
                size="mini" 
                type="primary" 
                @click.stop="previewSingleFile"
              />
              <u-button 
                v-if="isVideo(gwInfo.fileFormat || '')" 
                text="播放" 
                size="mini" 
                type="success"
                @click.stop="previewSingleFile"
              />
              <u-button 
                v-if="isImage(gwInfo.fileFormat || '')" 
                text="查看" 
                size="mini" 
                type="warning"
                @click.stop="previewSingleFile"
              />
              <u-button 
                text="下载" 
                size="mini" 
                type="info"
                @click.stop="downloadSingleFile"
              />
            </view>
          </view>
          
          <!-- 处理多个附件（从files数组获取） -->
          <view 
            v-for="(file, index) in gwInfo.files" 
            :key="index" 
            class="file-item"
            @click="previewFile(file)"
          >
            <view class="file-icon">
              <text v-if="isImage(getFileSuffix(file))">🖼️</text>
              <text v-else-if="isVideo(getFileSuffix(file))">🎥</text>
              <text v-else-if="canPreview(getFileSuffix(file))">📄</text>
              <text v-else>📎</text>
            </view>
            <view class="file-info">
              <text class="file-name">{{ getFileName(file) }}</text>
              <text class="file-size">{{ formatFileSize(file.size) }}</text>
              <text class="file-type">{{ getFileSuffix(file).toUpperCase() }}</text>
            </view>
            <view class="file-actions">
              <u-button 
                v-if="canPreview(getFileSuffix(file)) && !isVideo(getFileSuffix(file))" 
                text="预览" 
                size="mini" 
                type="primary" 
                @click.stop="previewFile(file)"
              />
              <u-button 
                v-if="isVideo(getFileSuffix(file))" 
                text="播放" 
                size="mini" 
                type="success"
                @click.stop="previewFile(file)"
              />
              <u-button 
                v-if="isImage(getFileSuffix(file))" 
                text="查看" 
                size="mini" 
                type="warning"
                @click.stop="previewFile(file)"
              />
              <u-button 
                text="下载" 
                size="mini" 
                type="info"
                @click.stop="downloadFile(file)"
              />
            </view>
          </view>
        </view>
        <view v-else class="no-files">
          <text>暂无附件</text>
        </view>
      </view>

      <!-- 当前处理人 -->
      <view class="approver-section">
        <view class="section-title">当前审批人</view>
        <view class="approver-list">
          <view 
            v-for="approver in approvers" 
            :key="approver.id" 
            class="approver-item"
          >
            <view class="approver-info">
              <text class="order">{{ approver.order }}</text>
              <text class="name">{{ approver.userName }}</text>
              <text class="dept">{{ approver.deptName }}</text>
              <text class="status" :class="getApproverStatusClass(approver.approveStatus)">
                {{ getApproverStatusText(approver.approveStatus) }}
              </text>
            </view>
            <!-- 显示审批意见和审批时间 -->
            <view class="approver-detail" v-if="approver.approveRemark || approver.approveTime">
              <view class="approval-info" v-if="approver.approveRemark">
                <text class="info-label">审批意见：</text>
                <text class="info-value">{{ approver.approveRemark }}</text>
              </view>
              <view class="approval-info" v-if="approver.approveTime">
                <text class="info-label">审批时间：</text>
                <text class="info-value">{{ formatTime(approver.approveTime) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 抄送人 -->
      <view class="cc-section">
        <view class="section-title">抄送人</view>
        <view class="cc-list">
          <view 
            v-for="ccUser in displayedCcUsers" 
            :key="ccUser.id" 
            class="cc-item"
          >
            <view class="cc-info">
              <text class="name">{{ ccUser.userName }}</text>
              <text class="dept">{{ ccUser.deptName }}</text>
              <text class="status" :class="getCCStatusClass(ccUser.status)">
                {{ getCCStatusText(ccUser.status) }}
              </text>
            </view>
          </view>
        </view>
        <!-- 更多按钮 -->
        <view 
          v-if="ccUsers.length > 2" 
          class="more-button"
          @click="toggleCcExpanded"
        >
          <text class="more-text">
            {{ ccExpanded ? '收起' : `更多(${ccUsers.length - 2})` }}
          </text>
          <text class="more-icon" :class="{ expanded: ccExpanded }">▼</text>
        </view>
      </view>

      <!-- 操作记录 -->
      <view class="log-section">
        <view class="section-title">操作记录</view>
        <view class="log-list">
          <view 
            v-for="log in displayedOperationLogs" 
            :key="log.id" 
            class="log-item"
          >
            <view class="log-header">
              <text class="operator">{{ log.operatorName }}</text>
              <text class="time">{{ formatTime(log.operationTime) }}</text>
            </view>
            <view class="log-content">
              <text class="type">{{ log.operationType }}</text>
              <text class="content">{{ log.operationContent }}</text>
            </view>
            <view class="log-detail" v-if="log.beforeChange || log.afterChange">
              <u-button 
                text="详情" 
                size="mini" 
                @click="showLogDetail(log)"
              />
            </view>
          </view>
        </view>
        <!-- 更多按钮 -->
        <view 
          v-if="operationLogs.length > 2" 
          class="more-button"
          @click="toggleLogExpanded"
        >
          <text class="more-text">
            {{ logExpanded ? '收起' : `更多(${operationLogs.length - 2})` }}
          </text>
          <text class="more-icon" :class="{ expanded: logExpanded }">▼</text>
        </view>
      </view>

    </view>



    <!-- 底部固定按钮 -->
    <view class="bottom-actions" v-if="canCurrentUserOperate">
      <!-- 驳回按钮暂时隐藏 -->
      <!-- <u-button 
        text="驳回" 
        type="error" 
        size="large" 
        @click="handleReject"
      /> -->
      <u-button 
        text="转办" 
        type="warning" 
        size="large" 
        @click="handleTransfer"
      />
      <u-button 
        text="同意" 
        type="primary" 
        size="large" 
        @click="handleApprove"
      />
    </view>





    <!-- 操作记录详情弹窗 -->
    <u-popup v-model="showLogDetailModal" mode="center">
      <view class="detail-modal">
        <view class="detail-header">
          <text class="detail-title">操作详情</text>
          <u-button text="关闭" @click="showLogDetailModal = false" />
        </view>
        <view class="detail-content">
          <view class="detail-item" v-if="currentLog.beforeChange">
            <text class="detail-label">变更前：</text>
            <text class="detail-value">{{ currentLog.beforeChange }}</text>
          </view>
          <view class="detail-item" v-if="currentLog.afterChange">
            <text class="detail-label">变更后：</text>
            <text class="detail-value">{{ currentLog.afterChange }}</text>
          </view>
          <view class="detail-item" v-if="currentLog.remark">
            <text class="detail-label">备注：</text>
            <text class="detail-value">{{ currentLog.remark }}</text>
          </view>
        </view>
      </view>
    </u-popup>
  </BasicLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import BasicLayout from "@/components/BasicLayout/Layout.vue";
import { navigateTo } from "@/utils/uniapp";

import { getGwFlowByIdApi, gwApproveApi } from "@/api/routine/gw";
import dayjs from "dayjs";
import { useUserStore } from "@/store/modules/user";
import { imagUrl } from "@/utils";
import { 
  isVideo, 
  isImage, 
  canPreview, 
  previewFile as previewFileUtil, 
  previewVideo as previewVideoUtil, 
  previewImage as previewImageUtil
} from "@/utils/filePreview";

// 类型定义
interface GwInfo {
  id: string;
  title: string;
  gwNo: string;
  gwType: string;
  status: string;
  createdBy: string;
  createdTime: Date;
  files?: FileInfo[]; // 改为可选，因为实际数据中可能没有这个字段
  approvers?: Approver[];
  ccUsers?: CCUser[];
  operationLogs?: OperationLog[];
  docType: string; // 新增
  urgencyLevel: string; // 新增
  tjrId: string; // 新增
  spRule?: string; // 新增审批规则字段
  // 附件相关字段（根据实际数据结构）
  fileUrl?: string; // 文件URL
  fileName?: string; // 文件名
  fileFormat?: string; // 文件格式
}

interface FileInfo {
  name: string;
  size: number;
  url: string;
  resourName?: string; // 资源名称
  resourUrl?: string;  // 资源URL
  resSuf?: string;     // 文件后缀
}

interface Approver {
  id: string;
  userId?: string; // 用户ID
  userName: string;
  deptName: string;
  order: number;
  status: string;
  approveStatus?: string; // 审批状态
  approveRemark?: string; // 审批意见
  approveTime?: Date; // 审批时间
}

interface CCUser {
  id: string;
  userName: string;
  deptName: string;
  status: string;
}

interface OperationLog {
  id: string;
  operatorName: string;
  operationType: string;
  operationContent: string;
  operationTime: Date;
  beforeChange?: string;
  afterChange?: string;
  remark?: string;
}





// 获取页面参数
const gwId = ref("");

// 弹窗控制
const showLogDetailModal = ref(false);

// 用户store
const { getUser, getJs } = useUserStore();

// 数据
const gwInfo = ref<GwInfo>({} as GwInfo);
const approvers = ref<Approver[]>([]);
const ccUsers = ref<CCUser[]>([]);
const operationLogs = ref<OperationLog[]>([]);
const currentLog = ref<OperationLog>({} as OperationLog);

// 抄送人展开状态
const ccExpanded = ref(false);

// 操作记录展开状态
const logExpanded = ref(false);

// 计算属性：是否有附件
const hasAttachments = computed(() => {
  return gwInfo.value.fileUrl || (gwInfo.value.files && gwInfo.value.files.length > 0);
});

// 计算属性：显示的抄送人列表
const displayedCcUsers = computed(() => {
  if (ccExpanded.value || ccUsers.value.length <= 2) {
    return ccUsers.value;
  }
  return ccUsers.value.slice(0, 2);
});

// 计算属性：显示的操作记录列表
const displayedOperationLogs = computed(() => {
  if (logExpanded.value || operationLogs.value.length <= 2) {
    return operationLogs.value;
  }
  return operationLogs.value.slice(0, 2);
});

// 计算属性：当前用户是否可以操作（转办/同意）
const canCurrentUserOperate = computed(() => {
  const userStore = useUserStore();
  const getUser = userStore.getUser;
  const getJs = userStore.getJs;
  const currentUserId = getJs?.id;
  
  if (!currentUserId || !approvers.value || approvers.value.length === 0) {
    return false;
  }
  
  // 查找当前用户对应的审批人记录
  const currentUserApprover = approvers.value.find(approver => {
    return approver.userId === currentUserId || approver.id === currentUserId;
  });
  
  if (!currentUserApprover) {
    return false;
  }
  
  // 如果审批状态是approved或rejected，则不能操作
  const approveStatus = currentUserApprover.approveStatus;
  if (approveStatus === 'approved' || approveStatus === 'rejected') {
    return false;
  }
  
  return true;
});


// 获取公文信息
const getGwInfo = async () => {
  try {
    // 调用新的API接口获取公文流程信息
    const response = await getGwFlowByIdApi(gwId.value);
    
    if (response.resultCode === 1) {
      // 设置公文信息
      gwInfo.value = response.result.gwInfo;
      
      // 设置审批人、抄送人、操作日志信息
      approvers.value = response.result.approvers || [];
      ccUsers.value = response.result.ccUsers || [];
      operationLogs.value = response.result.operationLogs || [];
    } else {
      throw new Error(response.message || '获取数据失败');
    }
  } catch (error) {
    // 清空所有数据
    gwInfo.value = {} as GwInfo;
    approvers.value = [];
    ccUsers.value = [];
    operationLogs.value = [];
  }
};















// 显示操作日志详情
const showLogDetail = (log: OperationLog) => {
  currentLog.value = log;
  showLogDetailModal.value = true;
};

// 切换抄送人展开状态
const toggleCcExpanded = () => {
  ccExpanded.value = !ccExpanded.value;
};

// 切换操作记录展开状态
const toggleLogExpanded = () => {
  logExpanded.value = !logExpanded.value;
};

// 驳回处理
const handleReject = () => {
  uni.showModal({
    title: "驳回公文",
    content: "确定要驳回这个公文吗？",
    success: async (res) => {
      if (res.confirm) {
        try {
          // 这里调用驳回API
          console.log("驳回公文:", gwId.value);
          uni.showToast({
            title: "驳回成功",
            icon: "success",
          });
        } catch (error) {
          console.error("驳回失败:", error);
          uni.showToast({
            title: "驳回失败",
            icon: "error",
          });
        }
      }
    },
  });
};

// 转办处理
const handleTransfer = () => {
  // 构建跳转参数，包含所有必要的数据
  const params = {
    id: gwId.value,
    title: encodeURIComponent(gwInfo.value.title || ''),
    xxtsInfo: encodeURIComponent(JSON.stringify({
      id: gwId.value, // 这里应该是xxtsInfo的ID，需要根据实际数据结构调整
      // 其他xxtsInfo相关字段
    })),
    gwInfo: encodeURIComponent(JSON.stringify(gwInfo.value)),
    approvers: encodeURIComponent(JSON.stringify(approvers.value)),
    ccUsers: encodeURIComponent(JSON.stringify(ccUsers.value)) // 添加抄送人数据
  };
  
  // 同时存储到本地存储，作为备用方案
  uni.setStorageSync('transferData', {
    xxtsInfo: { id: gwId.value },
    gwInfo: gwInfo.value,
    approvers: approvers.value,
    ccUsers: ccUsers.value // 添加抄送人数据
  });
  
  // 跳转到转办页面
  navigateTo(`/pages/view/routine/gwlz/gwTransfer?id=${params.id}&title=${params.title}&xxtsInfo=${params.xxtsInfo}&gwInfo=${params.gwInfo}&approvers=${params.approvers}&ccUsers=${params.ccUsers}`);
};

// 同意处理
const handleApprove = () => {
  uni.showModal({
    title: "同意公文",
    content: "请您再次确认是否同意，公文审批内容",
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用同意API
          await approveGw();
        } catch (error) {
          console.error("同意失败:", error);
          uni.showToast({
            title: "同意失败",
            icon: "error",
          });
        }
      }
    },
  });
};

// 同意公文API调用
const approveGw = async () => {
  try {
    // 显示加载提示
    uni.showLoading({
      title: '正在处理...',
      mask: true
    });
    
    // 获取当前用户ID - 应该从jsData中获取
    const currentUserId = getJs?.id;
    if (!currentUserId) {
      throw new Error('无法获取当前用户信息');
    }
    
    // 获取当前用户在审批人列表中的ID
    const currentUserApproverId = getCurrentUserApproverId(currentUserId);
    
    if (!currentUserApproverId) {
      throw new Error('无法获取当前用户的审批人记录');
    }
    
    // 构建同意数据
    const approveData = {
      xxtsId: gwId.value, // 这里应该是xxtsInfo的ID，需要根据实际数据结构调整
      gwId: gwInfo.value?.id || gwId.value,
      spId: currentUserApproverId,
      approveRemark: "同意", // 默认审批意见
      spRule: gwInfo.value?.spRule, // 从gwInfo中获取spRule字段
      currentUserId: currentUserId
    };
    
    // 调用同意API - 使用正确的API函数
    const response = await gwApproveApi(approveData);
    
    // 隐藏加载提示
    uni.hideLoading();
    
    if (response.resultCode === 1) {
      uni.showToast({
        title: "同意成功",
        icon: "success",
        duration: 1500
      });
      
      // 延迟返回上一级并刷新
      setTimeout(() => {
        // 返回上一级页面
        uni.navigateBack({
          delta: 1,
          success: () => {
            // 通过事件总线通知上一级页面刷新
            uni.$emit('refreshGwList');
          }
        });
      }, 1500);
    } else {
      throw new Error(response.message || '同意失败');
    }
    
  } catch (error: any) {
    // 隐藏加载提示
    uni.hideLoading();
    
    uni.showToast({
      title: error.message || "同意失败",
      icon: "error",
    });
  }
};

// 获取当前用户的审批状态
const getCurrentUserApproverStatus = () => {
  const userStore = useUserStore();
  const getJs = userStore.getJs;
  const currentUserId = getJs?.id;
  
  if (!currentUserId || !approvers.value || approvers.value.length === 0) {
    return '未知';
  }
  
  const currentUserApprover = approvers.value.find(approver => {
    return approver.userId === currentUserId || approver.id === currentUserId;
  });
  
  return currentUserApprover?.approveStatus || '未知';
};

// 获取当前用户在审批人列表中的ID
const getCurrentUserApproverId = (currentUserId: string) => {
  if (!approvers.value || approvers.value.length === 0) {
    return null;
  }
  
  // 查找当前用户对应的审批人记录
  const currentUserApprover = approvers.value.find(approver => {
    const matchByUserId = approver.userId === currentUserId;
    const matchById = approver.id === currentUserId;
    return matchByUserId || matchById;
  });
  
  return currentUserApprover?.id || null;
};

// 预览单个附件（从gwInfo直接获取）
const previewSingleFile = () => {
  if (!gwInfo.value.fileUrl) {
    return;
  }
  
  const fileUrl = imagUrl(gwInfo.value.fileUrl);
  const fileName = gwInfo.value.fileName || '未知文件';
  const fileFormat = gwInfo.value.fileFormat || '';
  
  // 根据文件类型选择预览方式
  if (isVideo(fileFormat)) {
    handlePreviewVideoSingle(fileUrl, fileName);
  } else if (isImage(fileFormat)) {
    handlePreviewImageSingle(fileUrl);
  } else if (canPreview(fileFormat)) {
    handlePreviewDocumentSingle(fileUrl, fileName, fileFormat);
  } else {
    // 不支持预览的文件类型，直接下载
    downloadSingleFile();
  }
};

// 下载单个附件
const downloadSingleFile = () => {
  if (!gwInfo.value.fileUrl) {
    return;
  }
  
  const fileUrl = imagUrl(gwInfo.value.fileUrl);
  const fileName = gwInfo.value.fileName || '未知文件';
  const fileFormat = gwInfo.value.fileFormat || '';
  const fullFileName = fileFormat ? `${fileName}.${fileFormat}` : fileName;
  
  // 方法1: 使用 fetch 和 blob 方式强制下载
  fetch(fileUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error('网络请求失败');
      }
      return response.blob();
    })
    .then(blob => {
      const downloadUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = fullFileName; // 使用 download 属性强制下载
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(downloadUrl);
      
      uni.showToast({
        title: '开始下载',
        icon: 'success'
      });
    })
    .catch(error => {
      console.error('fetch下载失败:', error);
      // 方法2: 如果fetch失败，尝试直接打开链接
      try {
        const link = document.createElement('a');
        link.href = fileUrl;
        link.download = fullFileName;
        link.target = '_blank';
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        uni.showToast({
          title: '开始下载',
          icon: 'success'
        });
      } catch (fallbackError) {
        console.error('备用下载也失败:', fallbackError);
        uni.showToast({
          title: '下载失败',
          icon: 'error'
        });
      }
    });
};

// 文件预览
const previewFile = (file: FileInfo) => {
  // 确定文件URL和名称
  const fileUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  const fileName = file.resourName ? `${file.resourName}.${file.resSuf}` : file.name;
  const fileSuf = file.resSuf || file.name.split('.').pop() || '';
  
  // 根据文件类型选择预览方式
  if (isVideo(fileSuf)) {
    handlePreviewVideo(file);
  } else if (isImage(fileSuf)) {
    handlePreviewImage(file);
  } else if (canPreview(fileSuf)) {
    handlePreviewDocument(file);
  } else {
    // 不支持预览的文件类型，直接下载
    downloadFileAction(file);
  }
};

// 文档预览
const handlePreviewDocument = (file: FileInfo) => {
  const fileUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  const fileName = file.resourName ? `${file.resourName}.${file.resSuf}` : file.name;
  const fileSuf = file.resSuf || file.name.split('.').pop() || '';
  
  previewFileUtil(fileUrl, fileName, fileSuf)
    .catch((error: any) => {
      // 预览失败时尝试下载
      downloadFileAction(file);
    });
};

// 单个附件文档预览
const handlePreviewDocumentSingle = (fileUrl: string, fileName: string, fileFormat: string) => {
  const fullFileName = fileFormat ? `${fileName}.${fileFormat}` : fileName;
  
  previewFileUtil(fileUrl, fullFileName, fileFormat)
    .catch((error: any) => {
      // 预览失败时尝试下载
      downloadSingleFile();
    });
};

// 视频预览
const handlePreviewVideo = (file: FileInfo) => {
  const videoUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  const videoName = file.resourName || file.name;
  
  previewVideoUtil(videoUrl, videoName)
    .catch((error: any) => {
      // 视频预览失败时的处理
    });
};

// 单个附件视频预览
const handlePreviewVideoSingle = (videoUrl: string, videoName: string) => {
  previewVideoUtil(videoUrl, videoName)
    .catch((error: any) => {
      // 视频预览失败时的处理
    });
};

// 图片预览
const handlePreviewImage = (file: FileInfo) => {
  const imageUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  
  previewImageUtil(imageUrl)
    .catch((error: any) => {
      // 图片预览失败时的处理
    });
};

// 单个附件图片预览
const handlePreviewImageSingle = (imageUrl: string) => {
  previewImageUtil(imageUrl)
    .catch((error: any) => {
      // 图片预览失败时的处理
    });
};

// 文件下载
const downloadFile = (file: FileInfo) => {
  downloadFileAction(file);
};

// 文件下载实现
const downloadFileAction = (file: FileInfo) => {
  const fileUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  const fileName = file.resourName ? `${file.resourName}.${file.resSuf}` : file.name;
  
  // 方法1: 使用 fetch 和 blob 方式强制下载
  fetch(fileUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error('网络请求失败');
      }
      return response.blob();
    })
    .then(blob => {
      const downloadUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = fileName; // 使用 download 属性强制下载
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(downloadUrl);
      
      uni.showToast({
        title: '开始下载',
        icon: 'success'
      });
    })
    .catch(error => {
      console.error('fetch下载失败:', error);
      // 方法2: 如果fetch失败，尝试直接打开链接
      try {
        const link = document.createElement('a');
        link.href = fileUrl;
        link.download = fileName;
        link.target = '_blank';
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        uni.showToast({
          title: '开始下载',
          icon: 'success'
        });
      } catch (fallbackError) {
        console.error('备用下载也失败:', fallbackError);
        uni.showToast({
          title: '下载失败',
          icon: 'error'
        });
      }
    });
};

// 格式化时间
const formatTime = (time: any) => {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
};

// 格式化文件大小
const formatFileSize = (size: any) => {
  if (!size) return "0B";
  if (size < 1024) return size + "B";
  if (size < 1024 * 1024) return (size / 1024).toFixed(2) + "KB";
  return (size / (1024 * 1024)).toFixed(2) + "MB";
};

// 获取文件名
const getFileName = (file: FileInfo) => {
  if (file.resourName) {
    return file.resourName;
  }
  if (file.name) {
    // 如果name包含扩展名，去掉扩展名
    const lastDotIndex = file.name.lastIndexOf('.');
    if (lastDotIndex > 0) {
      return file.name.substring(0, lastDotIndex);
    }
    return file.name;
  }
  return '未知文件';
};

// 获取文件后缀
const getFileSuffix = (file: FileInfo) => {
  if (file.resSuf) {
    return file.resSuf;
  }
  if (file.name) {
    const lastDotIndex = file.name.lastIndexOf('.');
    if (lastDotIndex > 0) {
      return file.name.substring(lastDotIndex + 1);
    }
  }
  return 'unknown';
};

// 获取状态样式类
const getStatusClass = (status: any) => {
  const statusMap: Record<string, string> = {
    draft: "status-draft",
    pending: "status-pending",
    approved: "status-approved",
    rejected: "status-rejected",
  };
  return statusMap[status] || "status-default";
};

// 获取状态文本
const getStatusText = (status: any) => {
  const statusMap: Record<string, string> = {
    draft: "草稿",
    pending: "待审批",
    approved: "已通过",
    rejected: "已驳回",
  };
  return statusMap[status] || "未知";
};

// 获取审批人状态样式类
const getApproverStatusClass = (status: any) => {
  const statusMap: Record<string, string> = {
    pending: "status-pending",
    approved: "status-approved",
    rejected: "status-rejected",
    skipped: "status-skipped",
  };
  return statusMap[status] || "status-default";
};

// 获取审批人状态文本
const getApproverStatusText = (status: any) => {
  const statusMap: Record<string, string> = {
    pending: "待审批",
    approved: "已同意",
    rejected: "已驳回",
    skipped: "已跳过",
  };
  return statusMap[status] || "未知";
};

// 获取抄送人状态样式类
const getCCStatusClass = (status: any) => {
  const statusMap: Record<string, string> = {
    unread: "status-unread",
    read: "status-read",
  };
  return statusMap[status] || "status-default";
};

// 获取抄送人状态文本
const getCCStatusText = (status: any) => {
  const statusMap: Record<string, string> = {
    unread: "未读",
    read: "已读",
  };
  return statusMap[status] || "未知";
};

// 获取紧急程度样式类
const getUrgencyClass = (level: string) => {
  const levelMap: Record<string, string> = {
    normal: "urgency-normal",
    high: "urgency-high",
    urgent: "urgency-urgent",
    "普通": "urgency-normal", // 添加中文值映射
    "高": "urgency-high",     // 添加中文值映射
    "紧急": "urgency-urgent", // 添加中文值映射
  };
  return levelMap[level] || "urgency-default";
};

// 获取紧急程度文本
const getUrgencyText = (level: string) => {
  const levelMap: Record<string, string> = {
    normal: "普通",
    high: "高",
    urgent: "紧急",
    "普通": "普通", // 添加中文值映射
    "高": "高",     // 添加中文值映射
    "紧急": "紧急", // 添加中文值映射
  };
  return levelMap[level] || "未知";
};

// 获取创建人名称
const getCreatorName = (tjrId: string) => {
  if (!tjrId) return "未知";
  
  try {
    // 尝试从多种缓存中获取用户信息，参考gwAdd.vue的实现
    const teacherCache = uni.getStorageSync('teacherCache');
    const globalTeacherData = uni.getStorageSync('globalTeacherData');
    const localData = uni.getStorageSync('data');
    
    // 方式1: 从teacherCache获取
    if (teacherCache && teacherCache[tjrId]) {
      return teacherCache[tjrId].jsxm || tjrId;
    }
    
    // 方式2: 从globalTeacherData获取
    if (globalTeacherData && globalTeacherData.length > 0) {
      const teacher = globalTeacherData.find((t: any) => t.id === tjrId);
      if (teacher && teacher.jsxm) {
        return teacher.jsxm;
      }
    }
    
    // 方式3: 从data缓存中的allJs获取（参考gwAdd.vue）
    if (localData && localData.allJs && localData.allJs.result) {
      const allTeachers = localData.allJs.result;
      const teacher = allTeachers.find((t: any) => t.id === tjrId);
      if (teacher && teacher.jsxm) {
        return teacher.jsxm;
      }
    }
    
    // 如果缓存中没有找到，返回ID
    return `用户${tjrId}`;
  } catch (error) {
    return `用户${tjrId}`;
  }
};

onMounted(() => {
  // 尝试多种方式获取页面参数
  let pageId = "";
  
  // 方式1: 通过 getCurrentPages() 获取
  const pages = getCurrentPages();
  
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1];
    
    // 尝试不同的属性获取参数
    const options = (currentPage as any).options || {};
    
    pageId = options.id || "";
  }
  
  // 方式2: 如果方式1没有获取到，尝试从URL解析
  if (!pageId) {
    try {
      // 获取当前页面URL
      const currentUrl = window.location.href;
      
      // 在uni-app H5环境中，参数通常在hash部分
      const hash = window.location.hash;
      
      if (hash && hash.includes('?')) {
        // 从hash中提取查询参数
        const queryString = hash.split('?')[1];
        
        // 解析查询参数
        const urlParams = new URLSearchParams(queryString);
        pageId = urlParams.get('id') || "";
      } else {
        // 尝试从search部分解析（备用方案）
        const urlParams = new URLSearchParams(window.location.search);
        pageId = urlParams.get('id') || "";
      }
    } catch (error) {
      // URL解析失败
    }
  }
  
  // 方式3: 如果前两种方式都没有获取到，尝试从路由参数获取
  if (!pageId) {
    try {
      // 获取当前页面的完整路径
      const currentPath = window.location.pathname;
      
      // 从路径中提取参数（如果路径包含参数）
      const pathMatch = currentPath.match(/\/gwFlow\/([^/?]+)/);
      if (pathMatch) {
        pageId = pathMatch[1];
      }
    } catch (error) {
      // 路径解析失败
    }
  }
  
  // 设置gwId
  gwId.value = pageId;
  
  if (gwId.value) {
    getGwInfo();
  }
});
</script>

<style lang="scss" scoped>
.gw-info-section,
.file-section,
.approver-section,
.cc-section,
.log-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.log-section {
  margin-bottom: 40px; // 操作记录区域增加底部间距
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 2px solid #007aff;
  padding-bottom: 5px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  
  .label {
    width: 80px;
    color: #666;
    font-size: 14px;
  }
  
  .value {
    flex: 1;
    color: #333;
    font-size: 14px;
    
    &.title-bold {
      font-weight: bold;
      font-size: 16px;
    }
  }
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  
  &.status-draft { background: #f0f0f0; color: #666; }
  &.status-pending { background: #fff7e6; color: #fa8c16; }
  &.status-approved { background: #f6ffed; color: #52c41a; }
  &.status-rejected { background: #fff2f0; color: #ff4d4f; }
}

.urgency-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  
  &.urgency-normal { background: #f0f0f0; color: #666; }
  &.urgency-high { background: #fff7e6; color: #fa8c16; }
  &.urgency-urgent { background: #fff2f0; color: #ff4d4f; }
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fafafa;
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .file-icon {
    margin-right: 12px;
    font-size: 24px;
    width: 32px;
    text-align: center;
  }
  
  .file-info {
    flex: 1;
    
    .file-name {
      display: block;
      font-weight: 500;
      margin-bottom: 4px;
      color: #333;
      font-size: 14px;
    }
    
    .file-size {
      font-size: 12px;
      color: #666;
      margin-right: 8px;
    }
    
    .file-type {
      font-size: 11px;
      color: #999;
      background: #f0f0f0;
      padding: 2px 6px;
      border-radius: 4px;
    }
  }
  
  .file-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    
    .u-button {
      min-width: 20px;
      height: 26px;
      font-size: 12px;
      border-radius: 13px;
      padding: 0 6px;
    }
  }
}

.no-files {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.approver-item,
.cc-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  
  .approver-info,
  .cc-info {
    flex: 1;
    
    .order {
      background: #007aff;
      color: white;
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 12px;
      margin-right: 8px;
    }
    
    .name {
      font-weight: 500;
      margin-right: 8px;
    }
    
    .dept {
      color: #666;
      font-size: 12px;
      margin-right: 8px;
    }
    
    .status {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      
      &.status-pending { background: #fff7e6; color: #fa8c16; }
      &.status-approved { background: #f6ffed; color: #52c41a; }
      &.status-rejected { background: #fff2f0; color: #ff4d4f; }
      &.status-skipped { background: #f0f0f0; color: #666; }
      &.status-unread { background: #fff7e6; color: #fa8c16; }
      &.status-read { background: #f6ffed; color: #52c41a; }
    }
  }
}

.approver-detail {
  margin-top: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #007aff;
  
  .approval-info {
    display: flex;
    margin-bottom: 8px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      width: 80px;
      color: #666;
      font-size: 12px;
      flex-shrink: 0;
    }
    
    .info-value {
      flex: 1;
      color: #333;
      font-size: 12px;
      word-break: break-all;
    }
  }
}

.more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  margin-top: 10px;
  margin-bottom: 20px; // 增加底部间距，避免被底部按钮挡住
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    background: #e9ecef;
    transform: translateY(1px);
  }
  
  .more-text {
    font-size: 14px;
    color: #007aff;
    margin-right: 6px;
  }
  
  .more-icon {
    font-size: 12px;
    color: #007aff;
    transition: transform 0.3s ease;
    
    &.expanded {
      transform: rotate(180deg);
    }
  }
}

.log-item {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  
  .log-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    
    .operator {
      font-weight: 500;
      color: #007aff;
    }
    
    .time {
      font-size: 12px;
      color: #666;
    }
  }
  
  .log-content {
    margin-bottom: 8px;
    
    .type {
      background: #f0f0f0;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 8px;
    }
    
    .content {
      color: #333;
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15px;
  z-index: 1000;
}

.bottom-actions .u-button {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.modal-content {
  padding: 20px;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .modal-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
  
  .search-section {
    margin-bottom: 20px;
  }
  
  .position-section {
    display: flex;
    align-items: center;
    
    .position-label {
      margin-right: 10px;
    }
  }
}

.detail-modal {
  width: 80vw;
  max-width: 400px;
  padding: 20px;
  
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .detail-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
  
  .detail-content {
    .detail-item {
      margin-bottom: 15px;
      
      .detail-label {
        font-weight: 500;
        color: #666;
        margin-right: 10px;
      }
      
      .detail-value {
        color: #333;
        word-break: break-all;
      }
    }
  }
}
</style>
