<wxs src="../../utils/tools.wxs" module="tools" />
<view class="plant-detail">
  <!-- Header -->
  <view class="detail-header">
    <view class="settings-btn-detail" bindtap="handleOpenEditModal">
      <t-icon name="setting" size="44rpx" color="#263238" />
    </view>
    
    <view class="header-gallery">
      <t-swiper
        current="{{activeImageIndex}}"
        autoplay="{{false}}"
        navigation="{{ { type: '' } }}"
        list="{{swiperImages}}"
        bind:change="onSwiperChange"
        height="500rpx"
      />
      <view class="header-gradient"></view>
      
      <!-- Custom Carousel Indicators -->
      <view class="carousel-indicators">
        <view wx:for="{{swiperImages}}" wx:key="index" class="carousel-dot {{index === activeImageIndex ? 'active' : ''}}"></view>
      </view>
    </view>
    
    <view class="header-info">
      <text class="header-title">{{currentPlant.name}}</text>
    </view>
  </view>

  <!-- Content -->
  <view class="detail-content">
    <!-- Custom Tabs -->
    <view class="pd-tabs">
      <view class="pd-tab-btn {{activeTab === 'care' ? 'active' : ''}}" bindtap="switchTab" data-tab="care">
        养护记录
      </view>
      <view class="pd-tab-btn {{activeTab === 'archive' ? 'active' : ''}}" bindtap="switchTab" data-tab="archive">
        植物档案
      </view>
    </view>

    <!-- Care Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
      class="pd-content" 
      enhanced="{{true}}" 
      show-scrollbar="{{false}}"
      hidden="{{activeTab !== 'care'}}"
    >
      <view class="care-view fadeIn">
        <view class="section-title">
          <text class="h3">养护历史</text>
        </view>
        
        <view class="care-log-list">
          <view wx:for="{{displayCareLogs}}" wx:key="id" class="care-log-item">
            <view class="log-left">
              <view class="log-date-v">
                <text class="l-day">{{item.day}}</text>
                <text class="l-month">{{item.month}}月</text>
              </view>
              <view class="log-type-icon {{item.type === 'water' ? 'icon-water' : (item.type === 'fertilize' ? 'icon-fertilize' : (item.type === 'prune' ? 'icon-prune' : 'icon-repot'))}}">
                <t-icon wx:if="{{item.type === 'water'}}" name="heart" size="36rpx" color="#2196F3" />
                <t-icon wx:elif="{{item.type === 'fertilize'}}" name="app" size="36rpx" color="#FFD700" />
                <t-icon wx:elif="{{item.type === 'prune'}}" name="cut" size="36rpx" color="#757575" />
                <t-icon wx:else name="assignment" size="36rpx" color="#8D6E63" />
              </view>
              <view class="log-info">
                <view class="log-header-row">
                  <text class="log-type-name">{{item.typeLabel}}</text>
                  <text class="log-time">{{item.time}}</text>
                </view>
                <text wx:if="{{item.remark}}" class="log-remark">{{item.remark}}</text>
              </view>
            </view>
          </view>
        </view>
        
        <block wx:if="{{careLogs.length > displayCareLimit}}">
          <view class="load-more-btn" bindtap="toggleCareLimit">
            <text>加载更多 ({{displayCareLogs.length}}/{{careLogs.length}})</text>
            <t-icon name="chevron-down" size="32rpx" />
          </view>
        </block>
      </view>
    </scroll-view>

    <!-- Archive Tab Scroll View -->
    <scroll-view 
      scroll-y="{{!showGrowthModal}}" 
      class="pd-content" 
      enhanced="{{true}}" 
      show-scrollbar="{{false}}"
      hidden="{{activeTab !== 'archive'}}"
    >
      <view class="archive-view fadeIn">
        <view class="archive-identity-card">
          <view class="aic-header">
            <view class="aic-badge">🏆 元老级植物</view>
            <view class="aic-location">
              <t-icon name="location" size="28rpx" color="#388E3C" />
              <text>{{currentPlant.location || '位置未定'}}</text>
            </view>
          </view>
          <view class="aic-stats">
            <view class="aic-stat-item">
              <text class="label">入家时间</text>
              <text class="value">{{currentPlant.adoptionDate || '未知'}}</text>
            </view>
            <view class="aic-stat-item">
              <text class="label">入住天数</text>
              <text class="value">{{currentPlant.daysPlanted}} 天</text>
            </view>
            <view class="aic-stat-item">
              <text class="label">养护次数</text>
              <text class="value">{{careLogs.length}} 次</text>
            </view>
          </view>
        </view>

        <view class="section-header">
          <text class="h3">成长记录</text>
          <view class="add-btn" bindtap="openGrowthModal">
            <t-icon name="edit" size="28rpx" color="#FFF" />
            <text>记录</text>
          </view>
        </view>

        <view class="archive-timeline">
          <view wx:for="{{displayRecords}}" wx:key="id" class="timeline-item">
            <view class="timeline-dot"></view>
            <text class="timeline-date">{{item.date}}</text>
            <view class="timeline-content-box">
              <view class="timeline-title">
                <t-icon wx:if="{{item.type === 'growth'}}" name="thumb-up" size="32rpx" color="#4CAF50" />
                <t-icon wx:elif="{{item.type === 'repot'}}" name="swap" size="32rpx" color="#FF9800" />
                <t-icon wx:elif="{{item.type === 'pest'}}" name="error-circle" size="32rpx" color="#F44336" />
                <t-icon wx:else name="file" size="32rpx" color="#2196F3" />
                <text>{{item.title}}</text>
              </view>
              <text class="timeline-desc">{{item.content}}</text>
              <t-image wx:if="{{item.image}}" src="{{tools.resolvePath(item.image)}}" mode="widthFix" width="100%" class="timeline-img" />
            </view>
          </view>
        </view>
        
        <block wx:if="{{records.length > displayRecordLimit}}">
          <view class="load-more-btn" bindtap="toggleRecordLimit">
            <text>加载更多 ({{displayRecords.length}}/{{records.length}})</text>
            <t-icon name="chevron-down" size="32rpx" />
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
  
  <!-- Growth Record Popup -->
  <t-popup visible="{{showGrowthModal}}" bind:visible-change="onGrowthPopupVisibleChange" placement="center" prevent-scroll-through>
    <view class="edit-modal">
      <view class="modal-header" catchtouchmove="preventTouchMove">
        <text class="modal-title">添加成长记录</text>
        <view class="close-btn" bindtap="closeGrowthModal">
          <t-icon name="close" size="40rpx" color="#666" />
        </view>
      </view>
      
      <view class="modal-body">
        <!-- Record Type -->
        <view class="form-group">
          <text class="form-label">记录类型</text>
          <view class="chip-group">
            <view class="chip {{newRecordType === 'growth' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="growth">
              <t-icon name="thumb-up" size="28rpx" />
              <text>生长</text>
            </view>
            <view class="chip {{newRecordType === 'repot' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="repot">
              <t-icon name="swap" size="28rpx" />
              <text>换盆</text>
            </view>
            <view class="chip {{newRecordType === 'pest' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="pest">
              <t-icon name="error-circle" size="28rpx" />
              <text>病虫害</text>
            </view>
            <view class="chip {{newRecordType === 'other' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="other">
              <t-icon name="file" size="28rpx" />
              <text>其他</text>
            </view>
          </view>
        </view>

        <!-- Content -->
        <view class="form-group">
          <text class="form-label">备注</text>
          <textarea 
            class="form-textarea" 
            placeholder="记录这一刻的变化..." 
            value="{{newRecordContent}}" 
            bindinput="onRecordContentInput"
            auto-height
          />
        </view>
      </view>
      
      <view class="modal-footer" catchtouchmove="preventTouchMove">
        <view class="submit-btn" bindtap="handleAddRecord">
          <text>保存记录</text>
        </view>
      </view>
    </view>
  </t-popup>
</view>
