<!--pages/business/loan-products/loan-products.wxml-->
<view class="loan-products-container">
  <!-- 搜索栏 -->
  <view class="search-bar">
    <view class="search-input">
      <text class="search-icon">🔍</text>
      <input 
        placeholder="搜索商品名称" 
        value="{{searchKeyword}}"
        bindinput="onSearchInput"
      />
    </view>
  </view>

  <!-- 筛选栏和操作按钮 -->
  <view class="filter-bar">
    <picker 
      bindchange="onFilterChange" 
      value="{{filterStatus}}" 
      range="{{['全部', '在售', '停售']}}"
      range-key=""
    >
      <view class="filter-item">
        <text>状态筛选</text>
        <text class="filter-value">{{filterStatus === 'all' ? '全部' : filterStatus}}</text>
        <text class="arrow">></text>
      </view>
    </picker>
    
    <!-- 新增商品按钮 -->
    <view class="action-buttons">
      <button class="add-btn" bindtap="addProduct">
        <text class="btn-icon">+</text>
        <text class="btn-text">新增商品</text>
      </button>
    </view>
  </view>

  <!-- 商品列表 -->
  <view class="product-list">
    <view 
      class="product-item" 
      wx:for="{{products}}" 
      wx:key="id"
      data-product-id="{{item.id}}"
    >
      <view class="product-header" bindtap="viewProductDetail" data-product-id="{{item.id}}">
        <text class="product-name">{{item.name}}</text>
        <view class="product-status {{item.status}}">
          <text>{{item.statusText}}</text>
        </view>
      </view>
      
      <view class="product-info" bindtap="viewProductDetail" data-product-id="{{item.id}}">
        <view class="info-row">
          <text class="info-label">产品代码：</text>
          <text class="info-value">{{item.code || '暂无'}}</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">产品类型：</text>
          <text class="info-value">{{item.typeText}}</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">贷款额度：</text>
          <text class="info-value">{{item.minAmount}} - {{item.maxAmount}}元</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">贷款期限：</text>
          <text class="info-value">{{item.loanTerm || item.minTerm}}个月</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">利率：</text>
          <text class="info-value">{{item.interestRate}}%</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">服务区域：</text>
          <text class="info-value">{{item.serviceArea || '全国'}}</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">服务电话：</text>
          <text class="info-value">{{item.servicePhone || '暂无'}}</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">风险等级：</text>
          <text class="info-value">{{item.riskLevel || 'LOW'}}</text>
        </view>
        
        <view class="info-row">
          <text class="info-label">监管客户：</text>
          <text class="info-value">{{item.supervisionCustomers}}/{{item.totalCustomers}}</text>
        </view>
      </view>
      
      <view class="product-desc" bindtap="viewProductDetail" data-product-id="{{item.id}}">
        <text class="desc-text">{{item.description}}</text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="product-actions">
        <button class="action-btn edit-btn" bindtap="editProduct" data-product-id="{{item.id}}">
          <text class="btn-icon">✏️</text>
          <text class="btn-text">修改信息</text>
        </button>
        <button class="action-btn delete-btn" bindtap="deleteProduct" data-product-id="{{item.id}}">
          <text class="btn-icon">🗑️</text>
          <text class="btn-text">产品下架</text>
        </button>
      </view>
    </view>
  </view>

  <!-- 加载状态 -->
  <view class="loading" wx:if="{{loading}}">
    <text>加载中...</text>
  </view>

  <!-- 空状态 -->
  <view class="empty-state" wx:if="{{!loading && products.length === 0}}">
    <text class="empty-icon">📦</text>
    <text class="empty-text">暂无商品数据</text>
  </view>
</view>
