<!-- src/pages/view/notice/detail.vue -->
<template>
  <BasicLayout>
    <view class="notice-detail-page">
      <view v-if="isLoading" class="loading-indicator">加载中...</view>
      <view v-else-if="noticeDetail" class="detail-container">
        <!-- 1. 主要内容卡片 -->
        <view class="info-card main-content-card">
          <view v-if="noticeDetail.jlfm" class="cover-image-container">
            <image
              :src="imagUrl(noticeDetail.jlfm)"
              mode="aspectFill"
              class="cover-image"
            ></image>
          </view>
          <text class="notice-title">{{ noticeDetail.jlmc }}</text>
          
          <!-- 发布人和结束时间 -->
          <view class="notice-meta">
            <text class="meta-item">发布人: {{ noticeDetail.jsxm }}</text>
            <text class="meta-item">结束时间: {{ noticeDetail.jljstime || noticeDetail.endTime }}</text>
          </view>

          <view class="notice-content">
            <view v-if="!descExpanded">
              <text class="desc-preview">{{ descPreview }}</text>
              <u-button type="text" size="mini" class="more-btn" @click="descExpanded = true">更多</u-button>
            </view>
            <view v-else>
              <rich-text :nodes="noticeDetail.jlms" class="desc-rich-text"></rich-text>
              <u-button type="text" size="mini" class="more-btn" @click="descExpanded = false">收起</u-button>
            </view>
          </view>
        </view>
        <!-- 2. 附件卡片 -->
        <view v-if="noticeDetail.jlfj" class="info-card attachment-card">
          <text class="attachment-title">附件</text>
          <view class="attachment-list">
            <view
              class="attachment-item"
              @click="previewAttachment(noticeDetail.jlfj)"
            >
              <uni-icons type="paperplane" size="16" color="#409eff"></uni-icons>
              <text class="attachment-name">{{ getFileName(noticeDetail.jlfj) }}</text>
            </view>
          </view>
        </view>
        <!-- 3. 学生完成状态卡片 -->
        <view class="info-card feedback-card">
          <text class="feedback-title">接龙完成情况 ({{ receivedCount }}/{{ totalStudents }})</text>
          <view class="name-tags">
            <view
              v-for="stu in studentList"
              :key="stu.id || stu.xsId"
              class="name-tag"
              :class="{ received: stu.jlwc_status === 'A' }"
            >
              <text>{{ stu.xsxm || stu.name }}</text>
              <view v-if="stu.jlwc_status === 'A'" class="checkmark-icon">
                <uni-icons type="checkmarkempty" size="12" color="#ffffff"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="empty-state">通知详情未找到</view>
    </view>
    <template #bottom>
      <view class="bottom-actions">
        <button class="action-btn publish-btn">接龙</button>
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getByJlIdApi, jlzxFindByJlParamsApi } from "@/api/base/server";
import { imagUrl } from "@/utils";
import { BASE_IMAGE_URL } from "@/config";

const noticeId = ref<string>("");
const noticeDetail = ref<any>(null);
const isLoading = ref(false);
const studentList = ref<any[]>([]);
const descExpanded = ref(false);
const descPreview = computed(() => {
  if (!noticeDetail.value?.jlms) return '';
  const div = document.createElement('div');
  div.innerHTML = noticeDetail.value.jlms;
  return div.innerText.replace(/\n/g, '').slice(0, 100) + (div.innerText.length > 100 ? '...' : '');
});

// 获取文件名
const getFileName = (filePath: string) => {
  if (!filePath) return '';
  const parts = filePath.split('/');
  return parts[parts.length - 1] || filePath;
};

// Computed properties for feedback status
const receivedCount = computed(() => {
  return studentList.value.filter((s) => s.jlwc_status === 'A').length;
});
const totalStudents = computed(() => studentList.value.length);

onLoad(async (options) => {
  if (options && options.id) {
    noticeId.value = options.id;
    isLoading.value = true;
    // 1. 获取接龙详情（新接口）
    try {
      const detailRes = await getByJlIdApi({ jlId: noticeId.value });
      noticeDetail.value = Array.isArray(detailRes) ? detailRes[0] : {};
    } catch (e) {
      uni.showToast({ title: "加载接龙详情失败", icon: "none" });
    }
    // 2. 获取学生完成状态
    try {
      const stuRes = await jlzxFindByJlParamsApi({ jlId: noticeId.value });
      studentList.value = stuRes?.rows || stuRes?.result || [];
    } catch (e) {
      uni.showToast({ title: "加载学生状态失败", icon: "none" });
    }
    isLoading.value = false;
    uni.setNavigationBarTitle({ title: "接龙情况" });
  } else {
    uni.showToast({ title: "加载失败，缺少通知ID", icon: "none" });
  }
});

// 附件预览函数
const previewAttachment = (filePath: string) => {
  if (!filePath) {
    uni.showToast({ title: "附件链接无效", icon: "none" });
    return;
  }

  // 构建完整的文件URL
  const baseUrl = BASE_IMAGE_URL; // 使用配置文件中的URL
  const fullUrl = filePath.startsWith('http') ? filePath : baseUrl + filePath;
  
  // 判断文件类型
  const fileExtension = filePath.split('.').pop()?.toLowerCase();
  const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileExtension || '');
  
  // 如果是图片类型，直接预览
  if (isImage) {
    uni.previewImage({
      urls: [fullUrl],
      current: fullUrl
    });
    return;
  }

  uni.showLoading({ title: "正在准备附件..." });

  uni.downloadFile({
    url: fullUrl,
    success: (res) => {
      if (res.statusCode === 200) {
        const tempFilePath = res.tempFilePath;
        uni.hideLoading();
        // Attempt to open the downloaded file
        uni.openDocument({
          filePath: tempFilePath,
          success: function (res) {
            // 打开文档成功
          },
          fail: function (err) {
            uni.showToast({ title: "无法打开该文件类型", icon: "none" });
            uni.hideLoading(); // Ensure loading is hidden on failure too
          },
        });
      } else {
        uni.hideLoading();
        uni.showToast({ title: "下载附件失败", icon: "none" });
      }
    },
    fail: (err) => {
      uni.hideLoading();
      uni.showToast({ title: "下载附件失败", icon: "none" });
    },
  });
};

watch(noticeDetail, (val) => {
  // 监听数据变化
}, { immediate: true, deep: true });

// 添加学生列表数据监听器，处理状态字段兼容性
watch(studentList, (list) => {
  list.forEach(stu => {
    // 兼容后端返回的驼峰写法
    if (stu.jlwcStatus && !stu.jlwc_status) {
      stu.jlwc_status = stu.jlwcStatus;
    }
    // 兼容数字状态，将'1'转换为'A'
    if (stu.jlwc_status === '1') {
      stu.jlwc_status = 'A';
    }
  });
}, { immediate: true, deep: true });
</script>

<style scoped lang="scss">
.notice-detail-page {
  background-color: #f4f5f7;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.bottom-actions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 15px; 
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;

  .action-btn {
    width: 90%;
    min-width: 90px;
    margin: 0 5px;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    padding: 0 20px;

    &::after {
      border: none;
    }

    &.draft-btn {
      background-color: #f4f4f5;
      color: #909399;
      border: 1px solid #e9e9eb;
    }
    &.preview-btn {
      background-color: #ecf5ff;
      color: #409eff;
      border: 1px solid #d9ecff;
    }
    &.publish-btn {
      background-color: #409eff;
      color: #ffffff;
      border: none;
    }
    &.draft-btn:active {
      background-color: #e0e0e0;
    }
    &.preview-btn:active {
      background-color: #d9ecff;
    }
    &.publish-btn:active {
      background-color: #3a8ee6;
    }
  }
}

.loading-indicator,
.empty-state {
  text-align: center;
  color: #999;
  padding: 40px 15px;
  font-size: 14px;
}

.detail-container {
  // 卡片之间的间距由卡片自身的 margin-bottom 控制
}

/* 通用卡片样式 */
.info-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 主要内容卡片 */
.main-content-card {
  .cover-placeholder {
    background-color: #f0f0f0;
    height: 120px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-size: 14px;
    margin-bottom: 15px;
    text {
      margin-top: 5px;
    }
  }
  .cover-image-container {
    margin-bottom: 15px;
    .cover-image {
      width: 100%;
      height: 150px; // Or adjust as needed
      border-radius: 6px;
      display: block;
    }
  }

  .notice-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
  }
  
  .notice-meta {
    margin-bottom: 15px;
    .meta-item {
      display: block;
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }
  }
  
  .notice-content {
    position: relative;
    .desc-preview {
      display: block;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 4px;
    }
    .desc-rich-text {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }
  }

  // 设计稿中的添加附件占位
  .add-attachment-placeholder {
    display: flex;
    align-items: center;
    border: 1px dashed #dcdcdc;
    border-radius: 6px;
    padding: 15px;
    margin-top: 15px;
    .add-icon {
      width: 30px;
      height: 30px;
      border: 1px solid #dcdcdc;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
    }
    .placeholder-text {
      font-size: 14px;
      color: #999;
    }
  }
}

/* 附件区域 */
.attachments-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
  .sub-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    display: block;
  }
  .attachment-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    .attachment-name {
      font-size: 14px;
      color: #007aff;
      margin-left: 5px;
    }
  }
}

/* 按名单填写/反馈情况卡片 */
.feedback-card {
  // Optional: Add specific padding if needed
}

/* 附件卡片 */
.attachment-card {
  .attachment-title {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }
  
  .attachment-list {
    .attachment-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .attachment-name {
        font-size: 14px;
        color: #409eff;
        margin-left: 8px;
        flex: 1;
      }
    }
  }
}

.feedback-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.name-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px; // Row gap, Column gap

  .name-tag,
  .modify-btn {
    // Apply same sizing logic to modify button if it exists
    position: relative;
    font-size: 13px;
    padding: 5px 8px; // Adjust horizontal padding slightly if needed
    border-radius: 4px;
    text-align: center;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    // Calculate basis for 4 items per row, accounting for 10px gap
    flex-basis: calc((100% - 30px) / 4);
    height: 30px; // Slightly taller height
    line-height: 20px; // Adjust line-height for vertical centering
    border: 1px solid #f4f4f5;
    // Remove overflow hidden to allow wrapping if necessary
    // overflow: hidden;
    // Ensure text can wrap
    white-space: normal;
    word-break: break-all; // Break long names if they don't fit
  }

  .name-tag {
    background-color: #f4f4f5;
    color: #909399;

    &.received {
      background-color: #e1f3d8;
      color: #67c23a;
      border-color: #b3e19d;
    }

    .checkmark-icon {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 16px;
      height: 16px;
      background-color: #67c23a;
      border-bottom-left-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1px;
      box-sizing: border-box;
      .uni-icons {
        // Icon adjustments if needed
      }
    }
  }

  // Modify button (usually hidden in detail)
  .modify-btn {
    // ... styles ...
    flex-basis: calc((100% - 30px) / 4); // Keep consistent basis
  }
}

/* 更多按钮样式 */
.more-btn {
  font-size: 16px !important;
  color: #409eff !important;
  font-weight: 500;
}

/* 列表项样式的卡片 */
.list-item-card {
  padding: 5px 15px; // 减少上下 padding
}

.list-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0; // 行内上下 padding
  border-bottom: 1px solid #f0f0f0;

  &.no-border {
    border-bottom: none;
  }

  .list-label {
    font-size: 15px;
    color: #333;
  }
  .list-value {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #666;
    text {
      margin-right: 3px;
    }
  }
}
</style>
