<template>
  <view class="container">
    <!-- 搜索区域 -->
    <view class="search-box">
      <input 
        class="search-input" 
        type="text" 
        placeholder="请输入产品名称"
        v-model="searchKeyword"
		confirm-type="done"
		@confirm = "fetchProducts(1)"
      />
      <view class="search-icon" @click="fetchProducts(1)"><text class="iconfont icon-sousuo"></text></view>
    </view>

    <!-- 产品列表 -->
    <view class="product-list" v-if="!loading && products.length > 0">
      <view 
        class="product-item" 
        v-for="product in products" 
        :key="product.planBizId"
        @click="goToCommissionDetail(product)"
      >
        <view class="product-header">
          <view class="product-name">{{ product.planName }}</view>
          <!-- <view class="product-term">{{ product.term }}年</view> -->
        </view>
        <view class="product-info">
          <view class="info-item">
            <text class="info-label">保险公司：</text>
            <text class="info-value">{{ product.companyName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">险种类别：</text>
            <text class="info-value">{{ product.categoryName }}</text>
          </view>
        </view>
        <view class="arrow">›</view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-if="!loading && products.length === 0">
      <text>{{tips}}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import api from '@/api/api';
// 响应式数据
const searchKeyword = ref('')
const products = ref([])
const loading = ref(false)
const tips = ref('无默认产品，请输入产品名称进行查询')

// 方法
const handleSearch = () => {
  // 实际项目中可以添加防抖
}

const goToCommissionDetail = (product) => {
  uni.navigateTo({
    url: `/myPackageA/product-list/commission-detail?planBizId=${product.planBizId}`
  })
}


// 获取产品数据
const fetchProducts = async (type=0) => {
  if(!searchKeyword.value){
	tips.value = '无默认产品，请输入产品名称进行查询'  ;
	products.value = [];
	return;
  }
   loading.value = true
  try {
	  let params = {
		  name:searchKeyword.value
	  }
	  // 搜索时，默认只查询10条
	  if(type===1){
		  params = {
		  	name:searchKeyword.value,
		  		paginationInfo:{
		  			noLimitFlag:'',
		  			number: 1,
		  			size:10
		  		}
		  }
	  }
	
    // 实际API调用
    const response = await api.productSearch(params)
    
    if(response.success){
		 products.value = response.data.list || [];
		 if(products.value.length===0){
			 tips.value = '暂无此产品数据'
		 }
	}
   
    
  } catch (err) {
    console.error('获取产品列表失败:', err)
    // 使用模拟数据
    products.value = []
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
})
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.search-box {
  position: relative;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-input {
  width: 100%;
  padding: 24rpx 80rpx 24rpx 30rpx;
  font-size: 28rpx;
}

.search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  width: 80rpx;
  text-align: right;
}

.product-list {
  margin-bottom: 15px;
}

.product-item {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.product-term {
  font-size: 28rpx;
  color: #007AFF;
  background-color: #f0f7ff;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.product-info {
  margin-bottom: 10rpx;
}

.info-item {
  margin-bottom: 10rpx;
}

.info-label {
  color: #666;
  font-size: 28rpx;
}

.info-value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
}

.arrow {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 36rpx;
}

.loading, .empty {
  text-align: center;
  padding: 80rpx 40rpx;
  color: #666;
}
</style>