<view class="passenger-management">
  <!-- 顶部操作栏 -->
  <view class="header-actions">
    <view class="search-section">
      <button class="search-btn" bindtap="toggleSearchBar">
        <text class="search-icon">🔍</text>
        <text class="search-text">搜索乘车人</text>
      </button>
    </view>
    
    <view wx:if="{{showSearchBar}}" class="search-bar">
      <input class="search-input" 
             placeholder="输入姓名、手机号或证件号" 
             value="{{searchKeyword}}" 
             bindinput="onSearchInput" />
    </view>
  </view>

  <!-- 乘车人列表 -->
  <view class="passenger-list">
    <view wx:if="{{filteredPassengers.length === 0}}" class="empty-state">
      <view class="empty-icon">👥</view>
      <view class="empty-text">{{searchKeyword ? '没有找到相关乘车人' : '暂无乘车人'}}</view>
      <view class="empty-desc">{{searchKeyword ? '试试其他关键词' : '点击下方按钮添加常用乘车人'}}</view>
    </view>

    <view wx:else>
      <view wx:for="{{filteredPassengers}}" wx:key="id" class="passenger-card">
        <view class="passenger-info" bindtap="viewPassengerDetail" data-id="{{item.id}}">
          <view class="passenger-main">
            <view class="passenger-name">{{item.name}}</view>
            <view class="passenger-type">{{item.idtype}}</view>
          </view>
          <view class="passenger-details">
            <view class="passenger-id">{{item.idcard}}</view>
            <view class="passenger-phone">{{item.phone}}</view>
          </view>
        </view>
        
        <view class="passenger-actions">
          <button class="action-btn edit-btn" bindtap="editPassenger" data-id="{{item.id}}">
            编辑
          </button>
          <button class="action-btn delete-btn" bindtap="deletePassenger" data-id="{{item.id}}">
            删除
          </button>
        </view>
      </view>
    </view>
  </view>

  <!-- 添加按钮 -->
  <view class="add-section">
    <button class="add-btn" bindtap="showAddPassenger">
      <text class="add-icon">➕</text>
      添加乘车人
    </button>
  </view>

  <!-- 添加/编辑乘车人模态框 -->
  <view wx:if="{{showAddModal}}" class="modal-overlay" bindtap="closeAddModal">
    <view class="modal-content" catchtap="">
      <view class="modal-header">
        <view class="modal-title">{{editingPassenger ? '编辑乘车人' : '添加乘车人'}}</view>
        <button class="modal-close" bindtap="closeAddModal">✕</button>
      </view>
      
      <view class="form-content">
        <view class="form-item">
          <view class="form-label">姓名</view>
          <input class="form-input" 
                 placeholder="请输入姓名" 
                 value="{{formData.name}}" 
                 bindinput="onNameInput" />
        </view>
        
        <view class="form-item">
          <view class="form-label">证件类型</view>
          <picker mode="selector" 
                  range="{{idTypes}}" 
                  value="{{idTypeIndex}}" 
                  bindchange="onIdTypeChange">
            <view class="form-picker">{{formData.idtype}}</view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="form-label">证件号码</view>
          <input class="form-input" 
                 placeholder="请输入证件号码" 
                 value="{{formData.idcard}}" 
                 bindinput="onIdCardInput" />
        </view>
        
        <view class="form-item">
          <view class="form-label">手机号</view>
          <input class="form-input" 
                 placeholder="请输入手机号" 
                 value="{{formData.phone}}" 
                 bindinput="onPhoneInput" 
                 type="number" 
                 maxlength="11" />
        </view>
      </view>
      
      <view class="modal-actions">
        <button class="modal-btn cancel-btn" bindtap="closeAddModal">取消</button>
        <button class="modal-btn confirm-btn" bindtap="savePassenger">
          {{editingPassenger ? '更新' : '保存'}}
        </button>
      </view>
    </view>
  </view>
</view>

