<!--pages/notification/detail/detail.wxml-->
<view class="container">
  <!-- 状态栏 -->
  <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
  
  <!-- 加载状态 -->
  <view wx:if="{{loading}}" class="loading-container">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>
  
  <!-- 通知详情内容 -->
  <view wx:else class="detail-content">
    <!-- 通知头部 -->
    <view class="notification-header">
      <view class="notification-title">{{notificationInfo.title}}</view>
      <view class="notification-meta">
        <view class="notification-time">{{notificationInfo.time}}</view>
        <view class="notification-type type-{{notificationInfo.type}}">
          {{notificationInfo.type === 'system' ? '系统通知' : notificationInfo.type === 'alert' ? '告警通知' : '任务通知'}}
        </view>
      </view>
    </view>
    
    <!-- 通知内容 -->
    <view class="notification-content">
      <view class="content-section">
        <view class="section-title">通知内容</view>
        <view class="content-text">{{notificationInfo.content}}</view>
      </view>
      
      <!-- 告警详情 (仅告警通知显示) -->
      <view wx:if="{{notificationInfo.type === 'alert' && notificationInfo.alertDetails}}" class="content-section">
        <view class="section-title">告警详情</view>
        <view class="alert-details">
          <view class="detail-item">
            <view class="detail-label">告警级别</view>
            <view class="detail-value level-{{notificationInfo.alertDetails.level}}">
              {{notificationInfo.alertDetails.level === 'high' ? '高级' : notificationInfo.alertDetails.level === 'medium' ? '中级' : '低级'}}
            </view>
          </view>
          <view class="detail-item">
            <view class="detail-label">涉及养殖户</view>
            <view class="detail-value">{{notificationInfo.alertDetails.farmerName}}</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">告警位置</view>
            <view class="detail-value">{{notificationInfo.alertDetails.location}}</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">告警原因</view>
            <view class="detail-value">{{notificationInfo.alertDetails.reason}}</view>
          </view>
        </view>
      </view>
      
      <!-- 任务详情 (仅任务通知显示) -->
      <view wx:if="{{notificationInfo.type === 'task' && notificationInfo.taskDetails}}" class="content-section">
        <view class="section-title">任务详情</view>
        <view class="task-details">
          <view class="detail-item">
            <view class="detail-label">任务类型</view>
            <view class="detail-value">{{notificationInfo.taskDetails.taskType}}</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">截止时间</view>
            <view class="detail-value">{{notificationInfo.taskDetails.deadline}}</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">任务状态</view>
            <view class="detail-value status-{{notificationInfo.taskDetails.status}}">
              {{notificationInfo.taskDetails.status === 'pending' ? '待处理' : notificationInfo.taskDetails.status === 'processing' ? '处理中' : '已完成'}}
            </view>
          </view>
          <view class="detail-item">
            <view class="detail-label">优先级</view>
            <view class="detail-value priority-{{notificationInfo.taskDetails.priority}}">
              {{notificationInfo.taskDetails.priority === 'high' ? '高' : notificationInfo.taskDetails.priority === 'medium' ? '中' : '低'}}
            </view>
          </view>
        </view>
      </view>
      
      <!-- 附件信息 -->
      <view wx:if="{{notificationInfo.attachments && notificationInfo.attachments.length > 0}}" class="content-section">
        <view class="section-title">相关附件</view>
        <view class="attachments-list">
          <view 
            wx:for="{{notificationInfo.attachments}}" 
            wx:key="id" 
            class="attachment-item"
            bindtap="onAttachmentTap"
            data-attachment="{{item}}"
          >
            <view class="attachment-icon">📎</view>
            <view class="attachment-info">
              <view class="attachment-name">{{item.name}}</view>
              <view class="attachment-size">{{item.size}}</view>
            </view>
            <view class="attachment-action">查看</view>
          </view>
        </view>
      </view>
      
      <!-- 处理记录 -->
      <view wx:if="{{notificationInfo.processRecords && notificationInfo.processRecords.length > 0}}" class="content-section">
        <view class="section-title">处理记录</view>
        <view class="process-records">
          <view 
            wx:for="{{notificationInfo.processRecords}}" 
            wx:key="id" 
            class="record-item"
          >
            <view class="record-time">{{item.time}}</view>
            <view class="record-content">
              <view class="record-action">{{item.action}}</view>
              <view class="record-operator">操作人：{{item.operator}}</view>
              <view wx:if="{{item.remark}}" class="record-remark">{{item.remark}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  
  <!-- 底部操作栏 -->
  <view wx:if="{{!loading}}" class="bottom-bar">
    <button 
      wx:if="{{notificationInfo.type === 'alert'}}" 
      class="action-btn handle-btn" 
      bindtap="onHandleAlert"
    >
      处理告警
    </button>
    <button 
      wx:if="{{notificationInfo.type === 'task'}}" 
      class="action-btn task-btn" 
      bindtap="onHandleTask"
    >
      处理任务
    </button>
    <button class="action-btn share-btn" bindtap="onShare">分享</button>
  </view>
</view>