<template>
  <view class="diary-container">
    <!-- 日志列表 -->
    <view class="diary-list">
      <view 
        v-for="(diary, index) in diaryList" 
        :key="index" 
        class="diary-item"
        @click="viewDiary(diary)"
      >
        <view class="diary-header">
          <view class="author-info">
            <img :src="diary.author.avatar" class="author-avatar" alt="作者头像"></img>
            <view class="author-details">
              <text class="author-name">{{ diary.author.name }}</text>
              <text class="diary-time">{{ formatTime(diary.createTime) }}</text>
            </view>
          </view>
          <view class="mood-indicator">
            <uni-icons :type="getMoodIcon(diary.mood)" size="20" :color="getMoodColor(diary.mood)"></uni-icons>
            <text class="mood-text">{{ getMoodText(diary.mood) }}</text>
          </view>
        </view>
        
        <view class="diary-content">
          <text class="diary-title">{{ diary.title }}</text>
          <text class="diary-text">{{ diary.content }}</text>
          
          <!-- 图片 -->
          <view v-if="diary.images && diary.images.length > 0" class="diary-images">
            <view 
              v-for="(img, imgIndex) in diary.images" 
              :key="imgIndex"
              class="image-item"
              @click.stop="previewImage(img, diary.images)"
            >
              <image
                :src="img"
                mode="aspectFill"
                class="diary-image"
              ></image>
            </view>
          </view>
        </view>
        
        <view class="diary-footer">
          <view class="diary-stats">
            <view class="stat-item" @click.stop="likeDiary(diary)">
              <uni-icons
                :type="diary.liked ? 'heart-filled' : 'heart'"
                size="16"
                :color="diary.liked ? '#FF6B9D' : '#999'"
              ></uni-icons>
              <text class="stat-text">{{ diary.likes || 0 }}</text>
            </view>
            <view class="stat-item">
              <uni-icons type="chat" size="16" color="#999"></uni-icons>
              <text class="stat-text">{{ diary.comments || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="diaryList.length === 0" class="empty-state">
        <uni-icons type="compose" size="80" color="#ccc"></uni-icons>
        <text class="empty-text">还没有日志</text>
        <text class="empty-desc">记录你们的美好时光吧</text>
        <button
          @click="createDiary"
          class="create-btn"
        >开始写日志</button>
      </view>
    </view>

    <!-- 悬浮添加按钮 -->
    <view class="floating-add-btn" @click="createDiary">
      <uni-icons type="compose" size="24" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const diaryList = ref([
  {
    id: 1,
    title: '今天一起做饭很开心',
    content: '今天和另一半一起做了红烧肉，虽然卖相一般，但是味道很棒！一起在厨房忙碌的感觉真的很温馨，希望以后能经常这样。',
    author: {
      name: '小美',
      avatar: '/static/images/avatar1.jpg'
    },
    createTime: new Date('2025-01-15 18:30:00'),
    mood: 'happy',
    images: [
      '/static/images/diary1.jpg',
      '/static/images/diary2.jpg'
    ],
    tags: ['做饭', '温馨', '美食'],
    likes: 12,
    comments: 3,
    isLiked: false
  },
  {
    id: 2,
    title: '周末约会记录',
    content: '周末去了新开的咖啡店，环境很好，咖啡也很香。最重要的是和喜欢的人在一起，做什么都开心。',
    author: {
      name: '小明',
      avatar: '/static/images/avatar2.jpg'
    },
    createTime: new Date('2025-01-14 15:20:00'),
    mood: 'excited',
    images: [
      '/static/images/diary3.jpg'
    ],
    tags: ['约会', '咖啡', '周末'],
    likes: 8,
    comments: 2,
    isLiked: true
  }
])

// 计算属性
const totalDiaries = computed(() => diaryList.value.length)

const thisMonthDiaries = computed(() => {
  const now = new Date()
  const thisMonth = now.getMonth()
  const thisYear = now.getFullYear()
  
  return diaryList.value.filter(diary => {
    const diaryDate = new Date(diary.createTime)
    return diaryDate.getMonth() === thisMonth && diaryDate.getFullYear() === thisYear
  }).length
})

const todayDiaries = computed(() => {
  const now = new Date()
  const today = now.toDateString()
  
  return diaryList.value.filter(diary => {
    const diaryDate = new Date(diary.createTime)
    return diaryDate.toDateString() === today
  }).length
})

// 方法
const formatTime = (time) => {
  const now = new Date()
  const diaryTime = new Date(time)
  const diffTime = now - diaryTime
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return diaryTime.toLocaleDateString()
  }
}

const getMoodIcon = (mood) => {
  const moodIcons = {
    happy: 'heart',
    excited: 'star',
    sad: 'sad',
    angry: 'close',
    normal: 'heart'
  }
  return moodIcons[mood] || 'heart'
}

const getMoodColor = (mood) => {
  const moodColors = {
    happy: '#FFD700',
    excited: '#FF6B9D',
    sad: '#87CEEB',
    angry: '#FF6347',
    normal: '#FF6B9D'
  }
  return moodColors[mood] || '#FF6B9D'
}

const getMoodText = (mood) => {
  const moodTexts = {
    happy: '开心',
    excited: '兴奋',
    sad: '悲伤',
    angry: '愤怒',
    normal: '正常'
  }
  return moodTexts[mood] || '正常'
}

const viewDiary = (diary) => {
  uni.navigateTo({
    url: `/pages/diary/detail?id=${diary.id}`
  })
}

const createDiary = () => {
  uni.navigateTo({
    url: '/pages/diary/create'
  })
}

const likeDiary = (diary) => {
  diary.isLiked = !diary.isLiked
  if (diary.isLiked) {
    diary.likes++
  } else {
    diary.likes--
  }
}

const commentDiary = (diary) => {
  uni.showToast({
    title: '评论功能开发中',
    icon: 'none'
  })
}

const previewImage = (url, images) => {
  uni.previewImage({
    urls: images,
    current: url
  })
}

// 生命周期
onMounted(() => {
  // 可以在这里加载数据
})
</script>

<style lang="scss" scoped>
.diary-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.header-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
  
  .stats-item {
    text-align: center;
    
    .stats-number {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #FF6B9D;
      margin-bottom: 10rpx;
    }
    
    .stats-label {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .stats-divider {
    width: 2rpx;
    height: 60rpx;
    background: #f0f0f0;
  }
}

.diary-list {
  padding: 0 30rpx;
  
  .diary-item {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    
    .diary-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .author-info {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        
        .author-avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          border: 2rpx solid #fff;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        }
        
        .author-details {
          margin-left: 20rpx;
          
          .author-name {
            display: block;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .diary-time {
            display: block;
            font-size: 24rpx;
            color: #999;
          }
        }
      }
      
      .mood-indicator {
        display: flex;
        align-items: center;
        background: #f8f8f8;
        border-radius: 50%;
        padding: 10rpx;
        
        .mood-text {
          margin-left: 10rpx;
          font-size: 24rpx;
          color: #666;
        }
      }
    }
    
    .diary-content {
      margin-bottom: 20rpx;
      
      .diary-title {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 15rpx;
        line-height: 1.4;
      }
      
      .diary-text {
        display: block;
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
      
      .diary-images {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        margin-top: 15rpx;
        
        .image-item {
          width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
          overflow: hidden;
          
          .diary-image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    
    .diary-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .diary-stats {
        display: flex;
        gap: 30rpx;
        
        .stat-item {
          display: flex;
          align-items: center;
          gap: 8rpx;
          
          .stat-text {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;
  
  .empty-text {
    display: block;
    font-size: 36rpx;
    color: #333;
    margin-top: 20rpx;
  }
  
  .empty-desc {
    display: block;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
  
  .empty-action {
    margin-top: 30rpx;
    
    .create-btn {
      background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
      border: none;
      border-radius: 25rpx;
      padding: 20rpx 40rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 15rpx rgba(255, 107, 157, 0.3);
      
      &:active {
        transform: scale(0.95);
        box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.4);
      }
    }
  }
}

.floating-add-btn {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 30rpx rgba(255, 107, 157, 0.3);
  z-index: 999;
  
  &:active {
    transform: scale(0.9);
  }
}
</style> 