<template>
  <view class="history-container" :style="{ paddingTop: statusBarHeight + 'px' }">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="iconfont icon-fanhui"></text>
      </view>
      <view class="nav-title">我的创作</view>
      <view class="nav-right" @click="showManageMenu">
        <text class="iconfont icon-gengduo"></text>
      </view>
    </view>
    
    <!-- AI生成内容标识 -->
    <!-- <view class="ai-notice">
      <text class="ai-notice-icon">🤖</text>
      <text class="ai-notice-text">作品由AI生成，结果仅供参考</text>
    </view> -->

    <!-- Tab切换 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', selectedTab === tab.value ? 'active' : '']"
        @click="selectedTab = tab.value"
      >
        <text class="tab-text">{{ tab.label }}</text>
      </view>
    </view>

    <!-- 内容区 -->
    <scroll-view scroll-y class="content-scroll" :style="{ height: scrollViewHeight }">
      <!-- 空状态 -->
      <view class="empty-state" v-if="historyList.length === 0">
        <image src="/static/images/empty-history.png" class="empty-image" mode="aspectFit"></image>
        <text class="empty-text">暂无历史记录</text>
        <button class="empty-btn" @click="goToGenerate">开始创作</button>
      </view>

      <!-- 历史列表 -->
      <view class="history-list" v-else>
        <view 
          v-for="(item, index) in filteredList" 
          :key="item.id"
          class="history-item"
          @click="viewHistory(item)"
        >
          <!-- 左侧图片预览 -->
          <view class="item-images">
            <image 
              v-if="item.imageInput"
              :src="item.imageInput" 
              mode="aspectFill" 
              class="preview-image"
            ></image>
            <image 
              v-else-if="item.images && item.images.length > 0"
              :src="item.images[0]" 
              mode="aspectFill" 
              class="preview-image"
            ></image>
            <view class="image-count" v-if="item.images && item.images.length > 1">
              <text class="count-text">+{{ item.images.length - 1 }}</text>
            </view>
            
            <!-- 状态标识 -->
            <view class="status-badge" :class="{
              'status-processing': item.statusTask === 0,
              'status-completed': item.statusTask === 1,
              'status-failed': item.statusTask === 2
            }">
              <text class="status-text">{{ getStatusTextByTask(item.statusTask) }}</text>
            </view>
          </view>

          <!-- 右侧信息 -->
          <view class="item-info">
            <view class="info-header">
              <text class="item-prompt">{{ item.prompt }}</text>
              <view class="item-actions" @click.stop="showItemMenu(item)">
                <text class="iconfont icon-gengduo"></text>
              </view>
            </view>
            
            <view class="info-meta">
              <view class="meta-tags">
                <!-- <text class="meta-tag">{{ item.tags }}</text> -->
                           <!-- 类型标识 -->
  
              <text class="meta-tag">{{ getTypeText(item.type) }}</text>
           
                <text class="meta-tag" v-if="item.quality">{{ item.quality }}</text>
              </view>
              <text class="meta-time">{{ formatTime(item.createdAt) }}</text>
            </view>
            
            <!-- 进度条（生成中） -->
            <view class="progress-bar" v-if="item.statusTask === 0">
              <view class="progress-fill" :style="{ width: item.progress + '%' }"></view>
            </view>
            
            <!-- 备注（失败状态） -->
            <view class="item-remark" v-if="item.statusTask === 2 && item.remark">
              <text class="remark-text">{{ item.remark }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore && historyList.length > 0">
        <text class="load-text" @click="loadMore">加载更多</text>
      </view>
    </scroll-view>

    <!-- 操作菜单 -->
    <view class="action-sheet" v-if="showActionSheet" @click="showActionSheet = false">
      <view class="action-content" @click.stop>
        <view class="action-title">操作</view>
        <view 
          v-for="(action, index) in currentActions" 
          :key="index"
          class="action-item"
          @click="handleAction(action.value)"
        >
          <text class="action-icon iconfont" :class="action.icon"></text>
          <text class="action-text">{{ action.label }}</text>
        </view>
        <view class="action-cancel" @click="showActionSheet = false">
          <text>取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/models-api.js'
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['userInfo','uid']),
    filteredList() {
      if (this.selectedTab === 'all') {
        return this.historyList;
      } else if (this.selectedTab === 'completed') {
        // 已完成：statusTask === 1
        return this.historyList.filter(item => item.statusTask === 1);
      } else if (this.selectedTab === 'draft') {
        // 草稿/未完成：statusTask === 0
        return this.historyList.filter(item => item.statusTask === 0);
      }
      return this.historyList;
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      scrollViewHeight: '100vh',
      
      // Tab
      selectedTab: 'all',
      tabs: [
        { label: '全部', value: 'all' },
        { label: '已完成', value: 'completed' },
        { label: '草稿', value: 'draft' }
      ],
      
      // 历史记录
      historyList: [],
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      hasMore: true,
      isLoading: false,
      
      // 操作菜单
      showActionSheet: false,
      currentItem: null,
      currentActions: []
    };
  },
  
  onLoad() {
    this.initPage();
    this.loadHistoryList();
  },
  
  methods: {
    initPage() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 0;
      
      // 计算滚动区域高度
      const navHeight = 44 + 44; // 导航+Tab
      this.scrollViewHeight = `calc(100vh - ${this.statusBarHeight + navHeight}px)`;
    },
    
    // 返回
    goBack() {
      uni.navigateBack();
    },
    
    // 查看历史记录
    viewHistory(item) {
      // 根据 statusTask 判断状态
      if (item.statusTask === 0) {
        // 未完成：继续编辑或提示生成中
        uni.showToast({
          title: '生成中，请稍候...',
          icon: 'none'
        });
        return;
      } else if (item.statusTask === 2) {
        // 失败
        uni.showToast({
          title: '生成失败，请重试',
          icon: 'none'
        });
        return;
      } else if (item.statusTask === 1) {
        // 已完成：根据 type 字段判断跳转页面
        // type == 1 表示图片，跳转到 image.vue
        // 其他情况（包括 undefined、null、0、2等）跳转到 video.vue
        console.log("====viewHistory=====", item);
        if (item.type === 1) {
          uni.navigateTo({
            url: `/pages/ai-generate/image?id=${item.id}`
          });
        } else {
          uni.navigateTo({
            url: `/pages/ai-generate/video?id=${item.id}`
          });
        }
      }
    },
    
    // 显示管理菜单
    showManageMenu() {
      this.currentActions = [
        { label: '清空已完成', value: 'clear_completed', icon: 'icon-shanchu' },
        { label: '清空全部', value: 'clear_all', icon: 'icon-qingkong' }
      ];
      this.showActionSheet = true;
    },
    
    // 显示单项菜单
    showItemMenu(item) {
      this.currentItem = item;
      
      // 根据 statusTask 判断
      if (item.statusTask === 1) {
        // 已完成
        this.currentActions = [
          { label: '查看详情', value: 'view', icon: 'icon-chakan' },
          { label: '再次生成', value: 'regenerate', icon: 'icon-shuaxin' },
          { label: '下载保存', value: 'download', icon: 'icon-xiazai' },
          { label: '分享', value: 'share', icon: 'icon-fenxiang' },
          { label: '删除', value: 'delete', icon: 'icon-shanchu' }
        ];
      } else if (item.statusTask === 0) {
        // 未完成
        this.currentActions = [
          { label: '查看进度', value: 'view', icon: 'icon-chakan' },
          { label: '取消生成', value: 'cancel', icon: 'icon-guanbi' },
          { label: '删除', value: 'delete', icon: 'icon-shanchu' }
        ];
      } else if (item.statusTask === 2) {
        // 失败
        this.currentActions = [
          { label: '重新生成', value: 'regenerate', icon: 'icon-shuaxin' },
          { label: '删除', value: 'delete', icon: 'icon-shanchu' }
        ];
      } else {
        // 其他状态
        this.currentActions = [
          { label: '取消生成', value: 'cancel', icon: 'icon-guanbi' }
        ];
      }
      
      this.showActionSheet = true;
    },
    
    // 处理操作
    handleAction(action) {
      this.showActionSheet = false;
      
      switch (action) {
        case 'view':
          this.viewHistory(this.currentItem);
          break;
        case 'regenerate':
          // TODO: 再次生成
          uni.showToast({ title: '开始生成', icon: 'none' });
          break;
        case 'download':
          // TODO: 下载
          uni.showToast({ title: '已保存', icon: 'success' });
          break;
        case 'share':
          // TODO: 分享
          uni.showToast({ title: '分享功能开发中', icon: 'none' });
          break;
        case 'delete':
          this.deleteItem(this.currentItem);
          break;
        case 'edit':
          uni.navigateTo({
            url: `/pages/ai-generate/index?draftId=${this.currentItem.id}`
          });
          break;
        case 'cancel':
          // TODO: 取消生成
          uni.showToast({ title: '已取消', icon: 'none' });
          break;
        case 'clear_completed':
          this.clearHistory('completed');
          break;
        case 'clear_all':
          this.clearHistory('all');
          break;
      }
    },
    
    // 删除单项
    deleteItem(item) {
      uni.showModal({
        title: '确认删除',
        content: '删除后无法恢复',
        success: async (res) => {
          if (res.confirm) {
            try {
              // TODO: 调用删除API
              // await api.deleteArticle(item.id);
              
              const index = this.historyList.findIndex(i => i.id === item.id);
              if (index > -1) {
                this.historyList.splice(index, 1);
                uni.showToast({ title: '已删除', icon: 'success' });
              }
            } catch (error) {
              console.error('删除失败:', error);
              uni.showToast({ title: '删除失败，请重试', icon: 'none' });
            }
          }
        }
      });
    },
    
    // 清空历史
    clearHistory(type) {
      uni.showModal({
        title: '确认清空',
        content: type === 'all' ? '清空所有历史记录？' : '清空已完成的记录？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // TODO: 调用批量删除API
              // if (type === 'all') {
              //   await api.deleteAllArticles();
              // } else {
              //   await api.deleteCompletedArticles();
              // }
              
              if (type === 'all') {
                this.historyList = [];
              } else {
                // 清空已完成：statusTask === 1
                this.historyList = this.historyList.filter(item => 
                  item.statusTask !== 1
                );
              }
              uni.showToast({ title: '已清空', icon: 'success' });
              
              // 重新加载数据
              this.loadHistoryList(true);
            } catch (error) {
              console.error('清空失败:', error);
              uni.showToast({ title: '清空失败，请重试', icon: 'none' });
            }
          }
        }
      });
    },
    
    // 加载历史记录列表
    async loadHistoryList(refresh = false) {
      if (this.isLoading) return;
      
      if (refresh) {
        this.currentPage = 1;
        this.hasMore = true;
      }
      
      if (!this.hasMore) return;
      
      // 检查是否有用户ID
      if (!this.uid) {
        console.warn('用户ID不存在，无法加载作品列表');
        uni.showToast({
          title: '请先登录',
          icon: 'none',
          duration: 2000
        });
        this.isLoading = false;
        return;
      }
      
      this.isLoading = true;
      
      try {
        // 使用 searchArticles 接口，支持 uid 和 statusTask 参数
        const res = await api.searchArticles({
          uid: this.uid,
          page: this.currentPage,
          size: this.pageSize
        });
        
        if (res && res.code === 200 && res.data) {
          // 兼容不同的数据结构
          const list = res.data.list || res.data.records || res.data || [];
          
          // 转换数据格式
          const formattedList = list.map(item => {
            // 解析图片列表（可能是字符串或数组）
            let images = [];
            if (item.imageOutput) {
              if (typeof item.imageOutput === 'string') {
                try {
                  images = JSON.parse(item.imageOutput);
                } catch (e) {
                  images = [item.imageOutput];
                }
              } else if (Array.isArray(item.imageOutput)) {
                images = item.imageOutput;
              }
            }
            
            // 获取 statusTask，默认为 0（未完成）
            const statusTask = item.statusTask !== undefined && item.statusTask !== null 
              ? item.statusTask 
              : (images && images.length > 0 ? 1 : 0);
            
            // 根据 statusTask 判断状态（用于显示）
            let status = 'draft';
            if (statusTask === 1) {
              status = 'completed';
            } else if (statusTask === 2) {
              status = 'failed';
            } else if (statusTask === 0) {
              status = 'draft';
            }
            
            return {
              id: item.id,
              prompt: item.title || item.prompt || '未命名作品',
              images: images,
              imageInput: item.imageInput || '', // 保存 imageInput 用于左侧图片展示
              model: item.model || 'design-v1',
              uid: item.uid,
              taskId: item.taskId,
              tags: item.tags || item.model || '',
              aspectRatio: item.image_size || item.aspect_ratio || '9:16',
              quality: item.quality || '2K',
              status: status,
              statusTask: statusTask, // 保存原始 statusTask 用于过滤
              remark: item.remark || '',
              type: item.type, // 保存文章类型，用于判断跳转页面
              progress: statusTask === 1 ? 100 : 0,
              createdAt: item.created_at || item.createTime ? new Date(item.created_at || item.createTime).getTime() : Date.now(),
              articleData: item // 保存原始数据
            };
          });
          
          if (refresh) {
            this.historyList = formattedList;
          } else {
            this.historyList = [...this.historyList, ...formattedList];
          }
          
          // 判断是否还有更多
          if (list.length < this.pageSize) {
            this.hasMore = false;
          } else {
            this.currentPage++;
          }
        } else {
          throw new Error(res?.message || '获取作品列表失败');
        }
      } catch (error) {
        console.error('加载历史记录失败:', error);
        uni.showToast({
          title: error.message || '加载失败，请重试',
          icon: 'none',
          duration: 2000
        });
      } finally {
        this.isLoading = false;
      }
    },
    
    // 加载更多
    loadMore() {
      if (this.hasMore && !this.isLoading) {
        this.loadHistoryList(false);
      }
    },
    
    // 去生成页面
    goToGenerate() {
      uni.navigateTo({
        url: '/pages/ai-generate/index'
      });
    },
    
    // 获取状态文本（兼容旧方法）
    getStatusText(status) {
      const map = {
        processing: '生成中',
        failed: '失败',
        draft: '草稿'
      };
      return map[status] || '';
    },
    
    // 根据 statusTask 获取状态文本
    getStatusTextByTask(statusTask) {
      switch (statusTask) {
        case 0:
          return '进行中';
        case 1:
          return '已完成';
        case 2:
          return '失败';
        default:
          return '未知';
      }
    },
    
    // 根据 type 获取类型文本
    getTypeText(type) {
      if (type === 1) {
        return '图片';
      } else if (type === 2) {
        return '视频';
      }
      return '';
    },
    
    // 格式化时间
    formatTime(timestamp) {
      const now = Date.now();
      const diff = now - timestamp;
      
      if (diff < 60000) {
        return '刚刚';
      } else if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前';
      } else if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前';
      } else if (diff < 2592000000) {
        return Math.floor(diff / 86400000) + '天前';
      } else {
        const date = new Date(timestamp);
        return `${date.getMonth() + 1}-${date.getDate()}`;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.history-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
  overflow-x: hidden;
}

// 顶部导航
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  
  .nav-left,
  .nav-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 20px;
      color: #ffffff;
    }
  }
  
  .nav-title {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
  }
}

// AI生成内容标识
.ai-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 8px 16px;
  background: rgba(66, 202, 77, 0.1);
  border: 1px solid rgba(66, 202, 77, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  
  .ai-notice-icon {
    font-size: 16px;
  }
  
  .ai-notice-text {
    font-size: 12px;
    color: #42ca4d;
    line-height: 1.4;
  }
}

// Tab栏
.tab-bar {
  display: flex;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  
  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    .tab-text {
      font-size: 15px;
      color: #8f9bb3;
    }
    
    &.active {
      .tab-text {
        color: #42ca4d;
        font-weight: 500;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background: #42ca4d;
        border-radius: 2px;
      }
    }
  }
}

// 内容滚动区
.content-scroll {
  padding: 16px; width: 92%;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  
  .empty-image {
    width: 200px;
    height: 200px;
    margin-bottom: 24px;
  }
  
  .empty-text {
    font-size: 15px;
    color: #8f9bb3;
    margin-bottom: 24px;
  }
  
  .empty-btn {
    width: 140px;
    height: 44px;
    background: linear-gradient(135deg, #42ca4d 0%, #38b045 100%);
    border-radius: 22px;
    font-size: 15px;
    color: #ffffff;
    border: none;
    line-height: 44px;
  }
}

// 历史列表
.history-list {
  .history-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(26, 31, 46, 0.6);
    border-radius: 16px;
    margin-bottom: 16px;
    min-height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 1px rgba(255, 255, 255, 0.05);
    
    &:active {
      transform: scale(0.98);
      background: rgba(26, 31, 46, 0.75);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.08);
    }
    
    &:hover {
      border-color: rgba(66, 202, 77, 0.2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 2px rgba(66, 202, 77, 0.1);
    }
    
    .item-images {
      width: 120px;
      height: 120px;
      flex-shrink: 0;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.3);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      
      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }
      
      &:hover .preview-image {
        transform: scale(1.05);
      }
      
      .image-count {
        position: absolute;
        bottom: 6px;
        right: 6px;
        padding: 3px 8px;
        background: rgba(0, 0, 0, 0.75);
        border-radius: 8px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        
        .count-text {
          font-size: 11px;
          color: #ffffff;
          font-weight: 500;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
      }
      
      .type-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 3px 8px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 9;
        
        .type-text {
          font-size: 10px;
          font-weight: 500;
          color: #ffffff;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          letter-spacing: 0.5px;
        }
      }
      
      .status-badge {
        position: absolute;
        bottom: 8px;
        left: 8px;
        padding: 5px 12px;
        border-radius: 14px;
        backdrop-filter: blur(12px);
        z-index: 10;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(66, 202, 77, 0.3);
        
        .status-text {
          font-size: 11px;
          font-weight: 600;
          color: #ffffff;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
          letter-spacing: 0.5px;
        }
        
        // 进行中状态 - 使用主色调高亮
        &.status-processing {
          background: linear-gradient(135deg, rgba(0, 167, 14, 0.95) 0%, rgba(0, 2, 0, 0.95) 100%);
          box-shadow: 
            0 2px 12px rgba(66, 202, 77, 0.5),
            0 0 20px rgba(66, 202, 77, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
          animation: pulse-glow 2s ease-in-out infinite;
          border-color: rgba(66, 202, 77, 0.4);
        }
        
        // 已完成状态
        &.status-completed {
          background: linear-gradient(135deg, rgba(66, 202, 77, 0.9) 0%, rgba(56, 176, 69, 0.9) 100%);
          box-shadow: 
            0 2px 8px rgba(66, 202, 77, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
          border-color: rgba(66, 202, 77, 0.3);
        }
        
        // 失败状态 - 使用红色
        &.status-failed {
          background: linear-gradient(135deg, rgba(255, 107, 107, 0.95) 0%, rgba(238, 90, 111, 0.95) 100%);
          box-shadow: 
            0 2px 12px rgba(255, 107, 107, 0.5),
            0 0 20px rgba(255, 107, 107, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
          border-color: rgba(255, 107, 107, 0.4);
        }
      }
      
      // 脉冲光晕动画
      @keyframes pulse-glow {
        0%, 100% {
          box-shadow: 
            0 2px 10px rgba(66, 202, 77, 0.5),
            0 0 16px rgba(66, 202, 77, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        50% {
          box-shadow: 
            0 2px 12px rgba(66, 202, 77, 0.7),
            0 0 20px rgba(66, 202, 77, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
      }
    }
    
    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      
      .info-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        
        .item-prompt {
          flex: 1;
          font-size: 15px;
          color: #ffffff;
          line-height: 1.5;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-word;
        }
        
        .item-actions {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          border-radius: 6px;
          transition: all 0.2s ease;
          
          .iconfont {
            font-size: 18px;
            color: #8f9bb3;
            transition: color 0.2s ease;
          }
          
          &:active {
            background: rgba(66, 202, 77, 0.1);
            
            .iconfont {
              color: #42ca4d;
            }
          }
        }
      }
      
      .info-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        
        .meta-tags {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          
          .meta-tag {
            padding: 4px 10px;
            background: rgba(61, 68, 88, 0.4);
            border-radius: 8px;
            font-size: 11px;
            color: #8f9bb3;
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(8px);
            transition: all 0.2s ease;
            
            &:first-child {
              background: rgba(66, 202, 77, 0.15);
              color: #42ca4d;
              border-color: rgba(66, 202, 77, 0.3);
            }
          }
        }
        
        .meta-time {
          font-size: 12px;
          color: #6b7589;
          flex-shrink: 0;
          margin-left: 8px;
        }
      }
      
      .progress-bar {
        height: 4px;
        background: rgba(61, 68, 88, 0.4);
        border-radius: 4px;
        overflow: hidden;
        margin-top: 12px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
        
        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #42ca4d 0%, #38b045 100%);
          transition: width 0.3s ease;
          box-shadow: 0 0 8px rgba(66, 202, 77, 0.5);
          border-radius: 4px;
        }
      }
      
      .item-remark {
        margin-top: 12px;
        padding: 10px 12px;
        background: rgba(255, 107, 107, 0.1);
        border: 1px solid rgba(255, 107, 107, 0.2);
        border-radius: 8px;
        backdrop-filter: blur(8px);
        
        .remark-text {
          font-size: 13px;
          color: #ff6b6b;
          line-height: 1.5;
          word-break: break-word;
        }
      }
    }
  }
}

// 加载更多
.load-more {
  padding: 20px;
  text-align: center;
  
  .load-text {
    font-size: 13px;
    color: #42ca4d;
  }
}

// 操作菜单
.action-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  z-index: 9999;
  
  .action-content {
    width: 100%;
    background: #1a1f2e;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    
    .action-title {
      padding: 16px;
      text-align: center;
      font-size: 13px;
      color: #8f9bb3;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .action-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      
      .action-icon {
        font-size: 18px;
        color: #ffffff;
      }
      
      .action-text {
        font-size: 15px;
        color: #ffffff;
      }
    }
    
    .action-cancel {
      margin-top: 8px;
      padding: 16px;
      text-align: center;
      font-size: 15px;
      color: #ffffff;
      background: rgba(61, 68, 88, 0.3);
    }
  }
}
</style>


