<template>
  <view class="pet-records-container">
    <!-- 头部操作栏 -->
    <view class="header-actions">
      <text class="page-title">{{ petInfo.name }}的记录</text>
      <view class="add-btn" @click="addRecord">
        <text class="add-text">添加</text>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <u-tabs 
        :list="filterTabs" 
        v-model="activeFilter"
        @change="onFilterChange"
        :scrollable="true"
        active-color="#ff6b6b"
        inactive-color="#666666"
      ></u-tabs>
    </view>

    <!-- 记录列表 -->
    <scroll-view class="records-scroll" scroll-y @scrolltolower="loadMoreRecords">
      <view class="records-list">
        <!-- 时间分组 -->
        <view v-for="group in groupedRecords" :key="group.date" class="record-group">
          <view class="group-header">
            <u-text :text="group.date" size="14" color="#999" bold></u-text>
            <view class="group-line"></view>
          </view>

          <!-- 记录项 -->
          <view v-for="record in group.records" :key="record.id" class="record-item" @click="viewRecordDetail(record)">
            <view class="record-icon">
              <u-icon :name="getCategoryIcon(record.category)" size="20" :color="getCategoryColor(record.category)"></u-icon>
            </view>
            
            <view class="record-content">
              <view class="record-header">
                <u-text :text="getCategoryName(record.category)" size="14" bold></u-text>
                <u-text :text="formatTime(record.recordTime)" size="12" color="#999"></u-text>
              </view>
              
              <view class="record-text">
                <u-text :text="record.content" size="13" color="#666" :lines="2"></u-text>
              </view>
              
              <!-- 记录详情标签 -->
              <view class="record-tags" v-if="getRecordTags(record).length > 0">
                <u-tag 
                  v-for="tag in getRecordTags(record)" 
                  :key="tag"
                  :text="tag"
                  type="info"
                  size="mini"
                ></u-tag>
              </view>
              
              <!-- 图片预览 -->
              <view class="record-photos" v-if="record.photos && record.photos.length > 0">
                <u-image 
                  v-for="(photo, index) in record.photos.slice(0, 3)" 
                  :key="index"
                  :src="photo"
                  width="40px"
                  height="40px"
                  border-radius="4px"
                ></u-image>
                <view class="more-photos" v-if="record.photos.length > 3">
                  <u-text :text="`+${record.photos.length - 3}`" size="12" color="#999"></u-text>
                </view>
              </view>
            </view>

            <!-- 分享状态 -->
            <view class="record-share">
              <u-icon :name="getShareIcon(record.shareLevel)" size="16" :color="getShareColor(record.shareLevel)"></u-icon>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMoreRecords">
          <u-loading-icon v-if="loadingMore"></u-loading-icon>
          <u-text text="上拉加载更多" type="tips" size="12" v-else></u-text>
        </view>

        <!-- 空状态 -->
        <u-empty v-if="recordsList.length === 0 && !loadingMore" mode="data" text="还没有记录哦">
          <template #bottom>
            <u-button type="primary" text="添加第一条记录" @click="addRecord"></u-button>
          </template>
        </u-empty>
      </view>
    </scroll-view>

    <!-- 浮动添加按钮 -->
    <view class="fab-button" @click="addRecord">
      <u-icon name="plus" size="24" color="#ffffff"></u-icon>
    </view>
  </view>
</template>

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

export default {
  name: 'PetRecords',
  setup() {
    // 响应式数据
    const state = reactive({
      petId: '',
      petInfo: {},
      recordsList: [],
      activeFilter: 0,
      hasMoreRecords: true,
      loadingMore: false,
      page: 1,
      pageSize: 20
    })

    // 筛选标签
    const filterTabs = [
      { name: '全部' },
      { name: '随手记' },
      { name: '大事记' },
      { name: '健康记录' },
      { name: '洗护记录' },
      { name: '清洁记录' },
      { name: '消费记录' }
    ]

    // 记录分类配置
    const categoryConfig = {
      daily: { name: '随手记', icon: 'edit-pen', color: '#64B5F6' },
      milestone: { name: '大事记', icon: 'star', color: '#FFB74D' },
      health: { name: '健康记录', icon: 'heart', color: '#81C784' },
      grooming: { name: '洗护记录', icon: 'flower', color: '#F06292' },
      cleaning: { name: '清洁记录', icon: 'home', color: '#9575CD' },
      expense: { name: '消费记录', icon: 'rmb-circle', color: '#FF8A80' }
    }

    // 生命周期
    onMounted(() => {
      initPage()
    })

    // 初始化页面
    const initPage = () => {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      state.petId = currentPage.options.petId || '1'
      
      loadPetInfo()
      loadRecords()
    }

    // 加载宠物信息
    const loadPetInfo = () => {
      // 模拟从本地存储获取宠物信息
      const mockPets = [
        {
          id: '1',
          name: '小橘',
          breed: '橘猫',
          avatar: '/static/cat-avatar.jpg'
        },
        {
          id: '2',
          name: '小白', 
          breed: '金毛',
          avatar: '/static/dog-avatar.jpg'
        }
      ]
      
      state.petInfo = mockPets.find(pet => pet.id === state.petId) || mockPets[0]
    }

    // 加载记录
    const loadRecords = () => {
      // 模拟记录数据
      const mockRecords = [
        {
          id: '1',
          petId: state.petId,
          category: 'daily',
          recordTime: '2024-01-15 14:30',
          content: '小橘今天特别活泼，一直在客厅里跑来跑去，看起来心情很好！',
          details: {},
          photos: ['/static/cat1.jpg', '/static/cat2.jpg'],
          shareLevel: 'family',
          createTime: '2024-01-15T14:30:00.000Z'
        },
        {
          id: '2',
          petId: state.petId,
          category: 'health',
          recordTime: '2024-01-14 10:00',
          content: '带小橘去宠物医院打疫苗，医生说身体很健康',
          details: {
            healthType: '疫苗接种',
            weight: '4.2',
            temperature: '38.5'
          },
          photos: ['/static/vaccine.jpg'],
          shareLevel: 'family',
          createTime: '2024-01-14T10:00:00.000Z'
        },
        {
          id: '3',
          petId: state.petId,
          category: 'milestone',
          recordTime: '2024-01-13 16:20',
          content: '小橘第一次学会用猫砂盆，真是个聪明的小家伙！',
          details: {
            milestoneType: '第一次用猫砂'
          },
          photos: [],
          shareLevel: 'public',
          createTime: '2024-01-13T16:20:00.000Z'
        },
        {
          id: '4',
          petId: state.petId,
          category: 'grooming',
          recordTime: '2024-01-12 09:15',
          content: '给小橘洗澡和剪指甲，全程很乖很配合',
          details: {
            groomingType: ['洗澡', '剪指甲'],
            duration: '45'
          },
          photos: ['/static/grooming.jpg'],
          shareLevel: 'family',
          createTime: '2024-01-12T09:15:00.000Z'
        },
        {
          id: '5',
          petId: state.petId,
          category: 'expense',
          recordTime: '2024-01-11 18:30',
          content: '购买了新的猫粮和猫砂',
          details: {
            amount: '268',
            expenseType: '用品',
            store: '宠物用品店'
          },
          photos: [],
          shareLevel: 'private',
          createTime: '2024-01-11T18:30:00.000Z'
        }
      ]
      
      state.recordsList = mockRecords
    }

    // 按日期分组记录
    const groupedRecords = computed(() => {
      const filtered = getFilteredRecords()
      const groups = {}
      
      filtered.forEach(record => {
        const date = formatDate(record.recordTime)
        if (!groups[date]) {
          groups[date] = []
        }
        groups[date].push(record)
      })
      
      return Object.keys(groups)
        .sort((a, b) => new Date(b) - new Date(a))
        .map(date => ({
          date: formatDateLabel(date),
          records: groups[date].sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime))
        }))
    })

    // 获取筛选后的记录
    const getFilteredRecords = () => {
      if (state.activeFilter === 0) {
        return state.recordsList
      }

      const filterMap = {
        1: 'daily',
        2: 'milestone',
        3: 'health',
        4: 'grooming',
        5: 'cleaning',
        6: 'expense'
      }

      const targetCategory = filterMap[state.activeFilter]
      return state.recordsList.filter(record => record.category === targetCategory)
    }

    // 获取分类名称
    const getCategoryName = (category) => {
      return categoryConfig[category]?.name || '未知类型'
    }

    // 获取分类图标
    const getCategoryIcon = (category) => {
      return categoryConfig[category]?.icon || 'file-text'
    }

    // 获取分类颜色
    const getCategoryColor = (category) => {
      return categoryConfig[category]?.color || '#999999'
    }

    // 获取记录标签
    const getRecordTags = (record) => {
      const tags = []

      if (record.details) {
        // 健康记录标签
        if (record.category === 'health') {
          if (record.details.healthType) tags.push(record.details.healthType)
          if (record.details.weight) tags.push(`${record.details.weight}kg`)
          if (record.details.symptoms && Array.isArray(record.details.symptoms)) {
            tags.push(...record.details.symptoms.slice(0, 2))
          }
        }

        // 洗护记录标签
        if (record.category === 'grooming') {
          if (record.details.groomingType && Array.isArray(record.details.groomingType)) {
            tags.push(...record.details.groomingType.slice(0, 3))
          }
          if (record.details.duration) tags.push(`${record.details.duration}分钟`)
        }

        // 消费记录标签
        if (record.category === 'expense') {
          if (record.details.amount) tags.push(`¥${record.details.amount}`)
          if (record.details.expenseType) tags.push(record.details.expenseType)
        }

        // 大事记标签
        if (record.category === 'milestone') {
          if (record.details.milestoneType) tags.push(record.details.milestoneType)
        }

        // 清洁记录标签
        if (record.category === 'cleaning') {
          if (record.details.cleaningType && Array.isArray(record.details.cleaningType)) {
            tags.push(...record.details.cleaningType.slice(0, 3))
          }
        }
      }

      return tags.slice(0, 3) // 最多显示3个标签
    }

    // 获取分享图标
    const getShareIcon = (shareLevel) => {
      const iconMap = {
        public: 'globe',
        family: 'home',
        private: 'lock'
      }
      return iconMap[shareLevel] || 'lock'
    }

    // 获取分享颜色
    const getShareColor = (shareLevel) => {
      const colorMap = {
        public: '#81C784',
        family: '#64B5F6',
        private: '#FFB74D'
      }
      return colorMap[shareLevel] || '#999999'
    }

    // 格式化时间
    const formatTime = (dateTime) => {
      const time = dateTime.split(' ')[1]
      return time ? time.substring(0, 5) : ''
    }

    // 筛选变化
    const onFilterChange = (index) => {
      state.activeFilter = index
    }

    // 查看记录详情
    const viewRecordDetail = (record) => {
      // 这里可以跳转到记录详情页面
      uni.showToast({
        title: '记录详情功能开发中',
        icon: 'none'
      })
    }

    // 添加记录
    const addRecord = () => {
      uni.navigateTo({
        url: `/pages/pets/select-record-type?petId=${state.petId}`
      })
    }

    // 加载更多记录
    const loadMoreRecords = () => {
      if (state.loadingMore || !state.hasMoreRecords) return

      state.loadingMore = true

      // 模拟加载更多数据
      setTimeout(() => {
        state.loadingMore = false
        // 模拟没有更多数据
        if (state.recordsList.length >= 10) {
          state.hasMoreRecords = false
        }
      }, 1000)
    }

    return {
      ...state,
      filterTabs,
      groupedRecords,
      getFilteredRecords,
      getCategoryName,
      getCategoryIcon,
      getCategoryColor,
      getRecordTags,
      getShareIcon,
      getShareColor,
      formatTime,
      onFilterChange,
      viewRecordDetail,
      addRecord,
      loadMoreRecords
    }
  }
}

// 工具函数
function formatDate(dateTime) {
  return dateTime.split(' ')[0]
}

function formatDateLabel(date) {
  const today = new Date()
  const recordDate = new Date(date)
  const diffTime = today - recordDate
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) return '今天'
  if (diffDays === 1) return '昨天'
  if (diffDays === 2) return '前天'
  
  const month = recordDate.getMonth() + 1
  const day = recordDate.getDate()
  return `${month}月${day}日`
}
</script>

<style lang="scss" scoped>
.pet-records-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
}

.header-actions {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  margin: 20rpx 30rpx;
  border-radius: 24rpx;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
  border: 1rpx solid rgba(255, 255, 255, 0.3);

  .page-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #FF8A80;
  }

  .add-btn {
    background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
    border-radius: 20rpx;
    padding: 16rpx 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
    }

    .add-text {
      font-size: 28rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }
}

.filter-bar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  margin: 0 30rpx 20rpx 30rpx;
  border-radius: 24rpx;
  padding: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.records-scroll {
  flex: 1;
  padding: 0 20px;
}

.records-list {
  padding: 20px 0 100px 0;
}

.record-group {
  margin-bottom: 30px;
  
  .group-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    .group-line {
      flex: 1;
      height: 1px;
      background-color: #f0f0f0;
      margin-left: 15px;
    }
  }
}

.record-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background-color: #ffffff;
  border-radius: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .record-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .record-content {
    flex: 1;
    
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .record-text {
      margin-bottom: 10px;
    }
    
    .record-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
    }
    
    .record-photos {
      display: flex;
      gap: 5px;
      align-items: center;
      
      .more-photos {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  
  .record-share {
    flex-shrink: 0;
  }
}

.load-more {
  text-align: center;
  padding: 20px 0;
}

.fab-button {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: #ff6b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
  z-index: 999;
}
</style>
