<!-- 首页 · 自习室：Banner → 区域分布图（Canvas 自绘四区轮廓）→ 通知公告 → 搜索/区县/排序 → 一览 -->
<view class="page">

  <!-- Banner：用户上传实景照片，图上不加文字（与 H5 一致） -->
  <view class="bn-card">
    <image class="bn-img" src="/assets/banner-photo.jpg" mode="aspectFill" />
  </view>

  <!-- 区域分布图 -->
  <view class="sec sec-map">
    <view class="sec-t">
      <text>区域分布图</text>
      <text class="sec-t-r">共 {{total}} 处</text>
    </view>
    <view class="map-wrap">
      <!-- 四区轮廓用 Canvas 2D 自绘（小程序端不能用 ECharts，见 utils/xmap.js 说明） -->
      <canvas type="2d" id="xmap" class="xmap" bindtouchend="onMapTouchEnd"></canvas>

      <!-- 单区视图里点中某间自习室 → 浮动气泡卡 -->
      <view wx:if="{{bubble}}" class="bubble" style="left:{{bubble.x}}px;top:{{bubble.y}}px">
        <view class="bb-name ellipsis">{{bubble.name}}</view>
        <view class="bb-meta">{{bubble.district}} · 可容纳 {{bubble.seatText}}</view>
        <view class="bb-acts">
          <view class="btn btn-sm btn-line-red" catchtap="onBubbleNav">导航</view>
          <view class="btn btn-sm btn-red" catchtap="onBubbleDetail">详情</view>
        </view>
      </view>
    </view>
  </view>

  <!-- 通知公告（只展示第一条） -->
  <view class="sec site-notice">
    <view class="sec-t"><text>通知公告</text></view>
    <view wx:if="{{notice.title}}" class="sn-card">
      <view class="sn-badge">公告</view>
      <view class="sn-txt">
        <view class="sn-t ellipsis2">{{notice.title}}</view>
        <view class="sn-meta"><view class="sn-dot"></view><text>{{notice.date}}</text></view>
      </view>
    </view>
    <view wx:else class="notice-empty">暂无公告</view>
  </view>

  <!-- 搜索 / 区县 / 排序 -->
  <view class="zone">
    <view class="search-row">
      <view class="search-box">
        <image class="ico-sm" src="{{ic.search}}" />
        <input class="search-input" value="{{keyword}}" placeholder="请输入自习室名称、位置搜索"
          placeholder-class="ph" confirm-type="search" bindinput="onSearch" />
        <view wx:if="{{keyword}}" class="search-clear" bindtap="onClearKw">×</view>
      </view>
    </view>

    <!-- 区县筛选：无「全部」项，点已选中的即取消（与 H5 一致） -->
    <view class="chips">
      <view wx:for="{{districts}}" wx:key="*this" class="chip {{district===item?'on':''}}"
        data-d="{{item}}" bindtap="onDistrictTap">{{item}}</view>
    </view>

    <view class="filter-bar">
      <view class="ss-item {{sort==='default'?'on':''}}" data-s="default" bindtap="onSortTap">默认顺序</view>
      <view class="ss-item {{sort==='capacity'?'on':''}}" data-s="capacity" bindtap="onSortTap">容量优先</view>
    </view>
  </view>

  <!-- 自习室一览 -->
  <view class="result-bar">
    <text class="rb-t">自习室一览</text>
  </view>

  <view class="room-list">
    <view wx:for="{{shown}}" wx:key="id" class="room-card" data-id="{{item.id}}" bindtap="onCardTap">
      <!-- 媒体区：每间 1 张实景图，铺满卡宽 -->
      <view class="rc-gal">
        <image wx:if="{{item.images[0]}}" class="rc-shot-img" src="{{item.images[0]}}" mode="aspectFill" />
        <view wx:else class="rc-shot-img rc-shot-ph"><text>自习室实景图</text></view>
      </view>

      <view class="rc-body">
        <view class="rc-head">
          <view class="rc-name ellipsis">{{item.name}}</view>
          <text class="rc-tag">{{item.district}}</text>
        </view>

        <view class="rc-meta">
          <image class="ico-sm" src="{{ic.clock}}" />
          <text class="rc-meta-k">开放时间</text><text class="rc-meta-v">{{item.openTime || '—'}}</text>
        </view>
        <view class="rc-meta">
          <image class="ico-sm" src="{{ic.user}}" />
          <text class="rc-meta-k">联系人</text><text class="rc-meta-v">{{item.contactName || '—'}}</text>
        </view>
        <view class="rc-meta" catchtap="onCardCall" data-id="{{item.id}}">
          <image class="ico-sm" src="{{ic.phoneRed}}" />
          <text class="rc-meta-k">联系电话</text><text class="rc-meta-v c-red">{{item.phoneMask || '—'}}</text>
          <text class="rc-meta-go">拨打 ›</text>
        </view>
        <!-- 管理人员：个别条目源表缺值，但这一行一律保留、缺值显示「—」，
             否则少一行的卡片会矮一截，列表里高矮不齐很显眼（H5 同一处理） -->
        <view class="rc-meta">
          <image class="ico-sm" src="{{ic.user}}" />
          <text class="rc-meta-k">管理人员</text><text class="rc-meta-v">{{item.staffText || '—'}}</text>
        </view>
        <view class="rc-addr" catchtap="onCardNav" data-id="{{item.id}}">
          <image class="ico-sm" src="{{ic.navRed}}" />
          <view class="rc-addr-t ellipsis">{{item.address}}</view>
          <text class="rc-go">导航</text>
          <image class="ico-sm" src="{{ic.arrow}}" />
        </view>
      </view>

      <view class="rc-cap"><text class="cap-k">可容纳</text><text class="cap-v">{{item.seatText}}</text></view>
    </view>

    <!-- 空态 -->
    <view wx:if="{{shown.length===0}}" class="empty">
      <image class="empty-img" src="/assets/empty.png" />
      <view class="empty-t">没有符合条件的自习室</view>
      <view class="empty-s">换个区域，或清空筛选条件试试</view>
      <view class="btn btn-red empty-btn" bindtap="onResetAll">重置筛选</view>
    </view>

    <!-- 分页：默认 2 条，点「加载全部」铺开 -->
    <button wx:if="{{moreCount>0}}" type="button" class="btn btn-red lm-btn" bindtap="onLoadAll">
      加载全部 {{filtered.length}} 间
    </button>
  </view>
</view>
