<!-- pages/penalty/penalty.wxml -->
<view class="cfss-container">
  <!-- 顶部统计卡片 -->
  <view class="tongji-card">
    <view class="tongji-title">处罚统计</view>
    <view class="tongji-content">
      <view class="tongji-item">
        <text class="tongji-label">总记录</text>
        <text class="tongji-value">{{ zongshu }}</text>
      </view>
      <view class="tongji-item">
        <text class="tongji-label">待处理</text>
        <text class="tongji-value daichuli-value">{{ daichuli }}</text>
      </view>
      <view class="tongji-item">
        <text class="tongji-label">已处理</text>
        <text class="tongji-value yichuli-value">{{ yichuli }}</text>
      </view>
    </view>
  </view>

  <!-- 类型切换 -->
  <view class="leixing-qiehuan">
    <view 
      class="leixing-item {{ shenfen === 0 ? 'leixing-active' : '' }}"
      bindtap="qiehuanShenfen"
      data-type="0"
    >
      <text class="leixing-text">待处理</text>
      <text class="leixing-count">{{ daichuli }}</text>
    </view>
    <view 
      class="leixing-item {{ shenfen === 1 ? 'leixing-active' : '' }}"
      bindtap="qiehuanShenfen"
      data-type="1"
    >
      <text class="leixing-text">已处理</text>
      <text class="leixing-count">{{ yichuli }}</text>
    </view>
  </view>

  <!-- 处罚记录列表 -->
  <scroll-view 
    class="chufa-list"
    scroll-y
    enable-back-to-top
    scroll-with-animation
    style="height: {{ scrollHeight }}px"
    bindscrolltolower="shanglaShuaxin"
  >
    <!-- 加载中 -->
    <view wx:if="{{ jiazhaozhong && chufaList.length === 0 }}" class="jiazai-zhong">
      <view class="loading-animation">
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
        <view class="loading-dot"></view>
      </view>
      <text>加载中...</text>
    </view>

    <!-- 🔴【关键修改】处罚记录卡片列表 - 直接使用处理好的字段 -->
    <block wx:for="{{ chufaList }}" wx:key="index">
      <view 
        class="chufa-card"
        bindtap="chakanXiangqing"
        data-item="{{ item }}"
      >
        <!-- 卡片顶部：时间和状态 -->
        <view class="card-top">
          <!-- 🔴 直接使用display_time -->
          <text class="shijian">{{ item.display_time }}</text>
          <!-- 🔴 直接使用display_status和status_class -->
          <view class="zhuangtai-badge {{ item.status_class }}">
            {{ item.display_status }}
          </view>
        </view>

        <!-- 申请人信息 -->
        <view class="qingqiu-row">
          <text class="qingqiu-label">申请人：</text>
          <text class="qingqiu-value">{{ item.qingqiuid || '--' }}</text>
        </view>

        <!-- 处罚理由 -->
        <view class="liyou-row">
          <text class="liyou-label">处罚理由：</text>
          <text class="liyou-value">{{ item.cfliyou || '无' }}</text>
        </view>

        <!-- 订单编号 -->
        <view class="dingdan-row">
          <text class="dingdan-label">订单编号：</text>
          <text class="dingdan-value">{{ item.dingdan_id || '--' }}</text>
        </view>
        
        <!-- 卡片边框效果 -->
        <view class="card-border"></view>
        <view class="card-glow"></view>
      </view>
    </block>

    <!-- 加载更多 -->
    <view wx:if="{{ jiazhaigengduo }}" class="jiazai-gengduo">
      <view class="scan-line"></view>
      <text>加载更多...</text>
    </view>

    <!-- 没有更多数据 -->
    <view wx:if="{{ !haiyougengduo && chufaList.length > 0 }}" class="meiyou-gengduo">
      <text>—— 没有更多记录了 ——</text>
    </view>

    <!-- 空状态 -->
    <view wx:if="{{ !jiazhaozhong && chufaList.length === 0 }}" class="kong-zhuangtai">
      <view class="empty-icon">⚡</view>
      <text class="empty-text">暂无处罚记录</text>
      <text class="empty-subtext">所有事务已处理完毕</text>
    </view>
  </scroll-view>

  <!-- 处罚详情弹窗 -->
  <view wx:if="{{ showXiangqing }}" class="xiangqing-modal">
    <view class="modal-mask" bindtap="guanbiXiangqing"></view>
    <view class="modal-content">
      <!-- 弹窗头部 -->
      <view class="modal-header">
        <text class="modal-title">处罚详情</text>
        <view class="modal-close" bindtap="guanbiXiangqing">
          <text class="close-icon">×</text>
        </view>
      </view>

      <!-- 🔴【弹窗主体 - 确保可以滚动】 -->
      <scroll-view class="modal-body" scroll-y style="max-height: 1000rpx;">
        <!-- 基本信息 -->
        <view class="detail-section">
          <view class="section-title">基本信息</view>
          <view class="detail-row">
            <text class="detail-label">订单编号：</text>
            <view class="detail-value-container">
              <text class="detail-value">{{ xuanzhongChufa.dingdan_id || '--' }}</text>
              <text class="fuzhi-btn" bindtap="fuzhiWenben" data-text="{{ xuanzhongChufa.dingdan_id }}">复制</text>
            </view>
          </view>
          <view class="detail-row">
            <text class="detail-label">申请人ID：</text>
            <view class="detail-value-container">
              <text class="detail-value">{{ xuanzhongChufa.qingqiuid || '--' }}</text>
              <text class="fuzhi-btn" bindtap="fuzhiWenben" data-text="{{ xuanzhongChufa.qingqiuid }}">复制</text>
            </view>
          </view>
          <view class="detail-row">
            <!-- 🔴 直接使用display_time -->
            <text class="detail-label">创建时间：</text>
            <text class="detail-value">{{ xuanzhongChufa.display_time || '--' }}</text>
          </view>
        </view>

        <!-- 处罚信息 -->
        <view class="detail-section">
          <view class="section-title">处罚信息</view>
          <view class="detail-row">
            <text class="detail-label">处罚状态：</text>
            <!-- 🔴 直接使用display_status和status_class -->
            <view class="zhuangtai-badge-inline {{ xuanzhongChufa.status_class }}">
              {{ xuanzhongChufa.display_status }}
            </view>
          </view>
          <view class="detail-row full-row">
            <text class="detail-label">处罚理由：</text>
            <text class="detail-value liyou-full">{{ xuanzhongChufa.cfliyou || '无' }}</text>
          </view>
          
          <!-- 🔴 证据图片展示 - 直接使用full_zhengju_tupian -->
          <view wx:if="{{ xuanzhongChufa.full_zhengju_tupian && xuanzhongChufa.full_zhengju_tupian.length > 0 }}" class="detail-row full-row">
            <text class="detail-label">证据图片：</text>
            <view class="tupian-grid">
              <block wx:for="{{ xuanzhongChufa.full_zhengju_tupian }}" wx:key="index">
                <view class="tupian-item" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_zhengju_tupian }}">
                  <image 
                    src="{{ item }}" 
                    class="tupian-image"
                    mode="aspectFill"
                  />
                </view>
              </block>
            </view>
          </view>
        </view>

        <!-- 申诉信息 -->
        <view wx:if="{{ xuanzhongChufa.ssliyou || (xuanzhongChufa.full_shensu_tupian && xuanzhongChufa.full_shensu_tupian.length > 0) }}" class="detail-section">
          <view class="section-title">申诉信息</view>
          <view wx:if="{{ xuanzhongChufa.ssliyou }}" class="detail-row full-row">
            <text class="detail-label">申诉理由：</text>
            <text class="detail-value liyou-full">{{ xuanzhongChufa.ssliyou }}</text>
          </view>
          <!-- 🔴 申诉图片展示 - 直接使用full_shensu_tupian -->
          <view wx:if="{{ xuanzhongChufa.full_shensu_tupian && xuanzhongChufa.full_shensu_tupian.length > 0 }}" class="detail-row full-row">
            <text class="detail-label">申诉图片：</text>
            <view class="tupian-grid">
              <block wx:for="{{ xuanzhongChufa.full_shensu_tupian }}" wx:key="index">
                <view class="tupian-item" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_shensu_tupian }}">
                  <image 
                    src="{{ item }}" 
                    class="tupian-image"
                    mode="aspectFill"
                  />
                </view>
              </block>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 弹窗底部按钮 -->
      <view class="modal-footer">
        <view class="cbtn-group">
          <!-- 联系客服按钮（始终显示） -->
          <view class="cbtn cbtn-kefu" bindtap="lianxiKefu">
            <text>联系客服</text>
          </view>
          <!-- 申诉按钮（只有待处罚状态可点击） -->
          <view
            class="cbtn {{ xuanzhongChufa.sqzhuangtai === 0 ? 'cbtn-shensu' : 'cbtn-shensu-disabled' }}"
            bindtap="{{ xuanzhongChufa.sqzhuangtai === 0 ? 'openShensuModal' : '' }}"
          >
            <text>申诉</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 申诉弹窗 -->
  <view wx:if="{{ showShensuModal }}" class="shensu-modal">
    <view class="modal-mask" bindtap="closeShensuModal"></view>
    <view class="modal-content small-modal">
      <view class="modal-header">
        <text class="modal-title">提交申诉</text>
      </view>
      <view class="modal-body">
        <!-- 申诉理由输入 -->
        <view class="input-group">
          <view class="input-label">申诉理由</view>
          <textarea 
            class="shensu-textarea"
            value="{{ shensuLiyou }}"
            bindinput="onShensuLiyouInput"
            placeholder="请输入申诉理由（最多500字）..."
            maxlength="500"
            auto-height
          />
          <view class="word-count">{{ shensuLiyou.length }}/500</view>
        </view>

        <!-- 申诉图片上传 -->
        <view class="input-group">
          <view class="input-label">申诉图片</view>
          <view class="upload-tip">最多可上传9张图片</view>
          
          <!-- 图片网格 -->
          <view class="tupian-grid-upload">
            <!-- 已上传图片 -->
            <block wx:for="{{ shensuTupian }}" wx:key="index">
              <view class="tupian-item-upload">
                <image 
                  src="{{ item }}" 
                  class="tupian-image-upload"
                  mode="aspectFill"
                  bindtap="yulanShensuTupian"
                  data-index="{{ index }}"
                />
                <view class="tupian-delete" bindtap="deleteShensuTupian" data-index="{{ index }}">
                  <text>×</text>
                </view>
              </view>
            </block>
            
            <!-- 添加按钮 -->
            <view 
              wx:if="{{ shensuTupian.length < 9 }}"
              class="tupian-add-btn" 
              bindtap="chooseShensuTupian"
            >
              <view class="add-icon">+</view>
              <text class="add-text">添加图片</text>
            </view>
          </view>
        </view>

        <!-- 上传进度 -->
        <view wx:if="{{ shangchuanZongshu > 0 }}" class="upload-progress">
          <view class="progress-title">上传进度</view>
          <view class="progress-bar">
            <view class="progress-inner" style="width: {{ jinduWidth }}"></view>
          </view>
          <view class="progress-text">{{ shangchuanJindu }}/{{ shangchuanZongshu }}</view>
        </view>
      </view>
      <view class="modal-footer">
        <view class="cbtn-group">
          <view class="cbtn cbtn-quxiao" bindtap="closeShensuModal">
            <text>取消</text>
          </view>
          <view class="cbtn cbtn-queren" bindtap="submitShensu">
            <text>提交申诉</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 全局通知组件 -->
  <global-notification id="global-notification" />
</view>