<template>
<scroll-view  @scroll="handleScroll" scroll-y="true" class="scroll-Y">
  <view class="product-list-page">
    <!-- 顶部搜索和筛选 -->
    <view class="search-bar">
      <view class="search-input">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input 
          type="text" 
          placeholder="搜索产品或保险公司" 
          v-model="searchKeyword"
          @input="handleSearch"
        >
      </view>
      <button class="filter-btn" @click="openFilter">
        <view class="iconfont icon-shaixuan"></view>
      </button>
    </view>

    <!-- 筛选弹窗 -->
 <uni-popup 
     type="bottom" 
     ref="popup" 
     :mask-click="false"
     background-color="#fff"
     class="filter-popup"
	   @touchmove="handlePopupTouchMove"
	   @open="handlePopupOpen"
	   @close="handlePopupClose"
   >
     <view class="filter-title">
       <text>筛选条件</text>
       <button class="close-btn" @click="closeFilter">
         <uni-icons type="close" size="18"></uni-icons>
       </button>
     </view>
     
     <view class="filter-content">
       <!-- 保险公司筛选（改为按钮多选） -->
       <view class="filter-item">
         <text class="filter-label">保险公司</text>
         <!-- 按钮组容器，支持横向滚动 -->
         <view class="btn-group-container">
           <button 
             class="filter-btn-item"
             :class="{ 'active': isCompanySelected(company.insuranceCompanyBizId) }"
             @click="toggleSelection('insurer',company.insuranceCompanyBizId)"
             v-for="company in insuranceCompanies" 
             :key="company.insuranceCompanyBizId"
           >
             {{ company.name }}
           </button>
         </view>
       </view>
       
       <!-- 产品类型筛选（如需同步改为按钮，可参考上面的逻辑） -->
       <view class="filter-item">
         <text class="filter-label">产品类型</text>
		 <view class="btn-group-container">
		   <button 
		     class="filter-btn-item"
		     :class="{ 'active': isProductTypeSelected(item.dropOptionCode) }"
		     @click="toggleSelection('productType',item.dropOptionCode)"
		     v-for="item in productTypes" 
		     :key="item.dropOptionCode"
		   >
		     {{ item.dropOptionName }}
		   </button>
		 </view>
       </view>
     </view>
     
     <view class="filter-actions">
       <button class="reset-btn" @click="resetFilter">重置</button>
       <button class="confirm-btn" @click="confirmFilter">确认筛选</button>
     </view>
   </uni-popup>

    <!-- 产品列表 -->

		<view class="product-list">
		  <view 
		    class="product-item" 
		    v-for="product in products" 
		    :key="product.planBizId"
		  >
		    <view class="product-info" @click="navigateToDetail(product.planBizId)">
		      <view class="product-details">
		        <view class="product-name">{{ product.planName }}</view>
		        <view class="product-type">
		          <text class="type-label">险种：</text>
		          <text>{{ product.categoryName }}</text>
		        </view>
		        <view class="product-company">
		          <text class="type-label">保险公司：</text>
		          <text>{{ product.companyName }}</text>
		        </view>
		        <view class="product-tag">
		          <uni-tag :text="product.isInsured==1 ? '保融产品' : '非保融产品'" :type="product.isInsured==1 ? 'success' : 'info'" size="small"></uni-tag>
		        </view>
		      </view>
		    </view>
		    
		    <button 
		      class="pk-btn" 
		      @click.stop="togglePKSelection(product)"
		      :disabled="!isInPKList(product.planBizId) && pkList.length >= 3"
		    >
		      {{ isInPKList(product.planBizId) ? '取消选择' : 'PK' }}
		    </button>
		  </view>
		  
		  <!-- 空状态 -->
		  <view class="empty-state" v-if="products.length === 0">
		    <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
		    <text class="empty-text">未找到匹配的产品</text>
		  </view>
		</view>
		
	
    <!-- PK选择条（新增已选产品展示和删除功能） -->
    <view class="pk-bar" v-if="pkList.length > 0">
      <view class="pk-selected-list">
        <view class="selected-product" v-for="(item, index) in pkList" :key="item.planBizId">
          <text class="product-short-name">{{ getShortName(item.planName) }}</text>
          <button class="delete-btn" @click.stop="removeFromPK(index)">
            <uni-icons type="close" size="16" color="#fff"></uni-icons>
          </button>
        </view>
      </view>
      <button 
        class="compare-btn" 
        @click="navigateToPKPage"
        :disabled="pkList.length < 2"
      >
        去对比
      </button>
    </view>
  </view>
  </scroll-view>
     
</template>

<script setup>
import { ref, computed, onMounted,onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/api/api';

// 路由实例
const router = useRouter();

// 搜索和筛选相关
const searchKeyword = ref('');
const selectedTypes = ref([]);
// 筛选弹窗
const popup = ref(null)
// 懒加载新增变量
const page = ref(1); // 当前页码（从1开始）
const pageSize = ref(10); // 每页条数
const loading = ref(false); // 是否正在加载
const hasMore = ref(true); // 是否还有更多数据
const isScrolling = ref(false); // 滚动节流控制

// 新增：初始化数据（首次加载第一页）
const initProducts = () => {
  // 重置分页参数（如搜索/筛选时重新开始）
  page.value = 1;
  products.value = [];
  hasMore.value = true;
  fetchProducts(); // 调用接口加载数据
};
// 新增：加载产品数据（核心接口请求）
const fetchProducts = async () => {
  // 防止重复请求
  if (loading.value || !hasMore.value) return;

  loading.value = true; // 开始加载
  try {
    // 构造请求参数（包含分页、搜索、筛选条件）
	const params = {
		companyIdList:selectedCompanies.value,
		name:searchKeyword.value,
		categoryList:selectedTypes.value,
		paginationInfo:{
			noLimitFlag:'',
			number: page.value,
			size:pageSize.value
		}
	}

    const res = await api.productSearch(params); // 调用产品列表接口
    if (res.success) {
      const newProducts = res.data.list || [];
      // 第一页直接覆盖，后续页追加
      if (page.value === 1) {
        products.value = newProducts;
      } else {
        products.value = [...products.value, ...newProducts];
      }

      // 判断是否还有更多数据（当前页数据小于页大小，说明没有更多）
      hasMore.value = newProducts.length >= pageSize.value;
      // 页码自增（准备下一页）
      page.value++;
    } else {
      uni.showToast({ title: res.message || '加载失败', icon: 'none' });
    }
  } catch (err) {
    console.error('产品列表请求失败：', err);
    uni.showToast({ title: '网络错误', icon: 'none' });
  } finally {
    loading.value = false; // 结束加载
  }
};

// 新增：监听页面滚动（判断是否到达底部）
const handleScroll = (e) => {
  // 节流：避免滚动事件触发过于频繁
  if (isScrolling.value) return;
  isScrolling.value = true;
  setTimeout(() => {
    isScrolling.value = false;
  }, 300);
  // 获取设备系统信息（包含可视区域高度）
  const sysInfo = uni.getSystemInfoSync();
  const windowHeight = ref()
  // 关键：windowHeight 是设备可视区域高度（px），不含导航栏/底部栏
  windowHeight.value = sysInfo.windowHeight;
  // 获取滚动相关参数
  const { scrollTop, scrollHeight } = e.detail
  // 计算是否到达底部（距离底部200rpx时触发加载）
  if (scrollHeight - scrollTop - windowHeight.value <= 400) {
    fetchProducts(); // 加载更多
  }
};

// 打开筛选弹窗
const openFilter = ()=>{
  if(popup.value) popup.value.open('bottom')
}

// 关闭筛选弹窗
const closeFilter = ()=>{
  if(popup.value) popup.value.close()
}
// 1. 存储选中的保险公司ID（与原逻辑兼容，无需修改筛选核心逻辑）
const selectedCompanies = ref([]);
const selectedProducts = ref([]);

// 2. 检查保险公司是否被选中
const isCompanySelected = (companyId) => {
  return selectedCompanies.value.includes(companyId.toString());
};
const isProductTypeSelected = (code)=>{
	return selectedTypes.value.includes(code.toString())
}

// 3. 切换保险公司选中状态（点击按钮时触发）
const toggleSelection = (type,id) => {
  const idStr = id.toString();
  let index;
  if(type==='insurer'){
	 index = selectedCompanies.value.findIndex(id => id === idStr); 
	 if (index > -1) {
	   // 已选中，取消选择
	   selectedCompanies.value.splice(index, 1);
	 } else {
	   // 未选中，添加选择
	   selectedCompanies.value.push(idStr);
	 }
  }else if(type==='productType'){
	index = selectedTypes.value.findIndex(id => id === idStr); 
		 if (index > -1) {
		   // 已选中，取消选择
		   selectedTypes.value.splice(index, 1);
		 } else {
		   // 未选中，添加选择
		   selectedTypes.value.push(idStr);
		 }
  }
  
 
};



// 4. 重置筛选时，清空选中的保险公司（原逻辑不变，自动生效）
const resetFilter = () => {
  selectedCompanies.value = []; // 清空选中的保险公司
  selectedTypes.value = [];
  searchKeyword.value = '';
};
// PK列表相关
const pkList = ref([]);
const maxPKCount = 3;

// 保险公司
const insuranceCompanies = ref([]);

// 产品类型
const productTypes = ref([]);

// 产品列表
const products = ref([]);

// 检查产品是否已在PK列表中
const isInPKList = (productId) => {
  return pkList.value.some(item => item.planBizId === productId);
};

// 新增：切换PK选择状态（添加/取消）
const togglePKSelection = (product) => {
  const isSelected = isInPKList(product.planBizId);
  if (isSelected) {
    // 取消选择
    removeFromPKByProductId(product.planBizId);
    uni.showToast({
      title: '已取消选择',
      icon: 'none',
      duration: 1500
    });
  } else {
    // 添加选择
    if (pkList.value.length < maxPKCount) {
      // 检查是否同险种（新增：PK只能选择同险种产品）
      if (pkList.value.length > 0 && pkList.value[0].category !== product.category) {
        uni.showToast({
          title: '只能选择同险种产品对比',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      pkList.value.push(product);
      uni.showToast({
        title: '已添加到对比',
        icon: 'none',
        duration: 1500
      });
    }
  }
};

// 新增：通过索引从PK列表移除产品
const removeFromPK = (index) => {
  pkList.value.splice(index, 1);
  uni.showToast({
    title: '已取消选择',
    icon: 'none',
    duration: 1500
  });
};

// 新增：通过产品ID从PK列表移除产品
const removeFromPKByProductId = (productId) => {
  pkList.value = pkList.value.filter(item => item.planBizId !== productId);
};

// 新增：获取产品简称（避免PK条显示过长）
const getShortName = (fullName) => {
  // 截取前6个字符，超出部分用省略号代替
  return fullName.length > 6 ? fullName.slice(0, 6) + '...' : fullName;
};

// 处理搜索
const handleSearch = (e) => {
 // 防抖：输入停止300ms后再请求（避免频繁请求）
  clearTimeout(handleSearch.timer);
  handleSearch.timer = setTimeout(() => {
    initProducts(); // 重置分页并加载
  }, 300);
};



// 确认筛选
const confirmFilter = () => {
	 // 重置分页并重新加载
	  initProducts();
  closeFilter();
  // 筛选逻辑已在computed中处理，自动更新列表
};

// 导航到产品详情
const navigateToDetail = (productId) => {

};

// 导航到PK结果页面
const navigateToPKPage = () => {
	uni.navigateTo({
		url:`/myPackageA/compare-result/compare-result?categoryId=${pkList.value[0].category}&productIds=${pkList.value.map(item => item.planBizId).join(',')}`
	})
};

const fetchMeta = ()=>{
	const params = {
		code: "insurance_category"
	}
	api.metaQuery(params).then(res=>{
		// 险种信息insurance_category
		productTypes.value = res['data']['dropMasterInfoList'][0]['dropOptionsInfoList'] || []
	})
}
const getInsuranceCompanyList = ()=>{
	const params = {
		insuranceCompanyBizId: '',
		name: ''
	}
	api.getInsuranceCompanyList(params).then(res=>{
		insuranceCompanies.value = res['data']['list'] || []
	})
}
// 初始化产品数据
onMounted(() => {
  // 1. 重置滚动位置
  uni.pageScrollTo({ scrollTop: 0, duration: 0 });
  
  // 3. 初始化数据（加载第一页）
  initProducts();
	  // 加载筛选数据（保险公司、产品类型）
	fetchMeta()
	getInsuranceCompanyList()
});

const handlePopupTouchMove = (e) => {
  // 1. 阻止事件冒泡（不传递给底部页面）
  e.stopPropagation();
  
  // 2. 可选：限制弹窗内只能垂直滚动（防止横向滚动影响）
  const touch = e.touches[0] || e.changedTouches[0];
  const scrollView = e.currentTarget.querySelector('.filter-content'); // 弹窗内可滚动容器
  if (scrollView) {
    const { scrollTop, scrollHeight, clientHeight } = scrollView;
    // 顶部边界：已滚动到顶部，且继续向上拉 → 阻止默认滚动
    const isTop = scrollTop <= 0 && touch.clientY > e.currentTarget.dataset.lastY;
    // 底部边界：已滚动到底部，且继续向下拉 → 阻止默认滚动
    const isBottom = scrollTop >= scrollHeight - clientHeight && touch.clientY < e.currentTarget.dataset.lastY;
    
    if (isTop || isBottom) {
      e.preventDefault(); // 阻止默认滚动行为（避免顶部/底部拖拽时带动外部页面）
    }
    // 记录当前触摸位置，用于下次判断边界
    e.currentTarget.dataset.lastY = touch.clientY;
  }
};

// 关键2：弹窗打开时，锁定底部页面滚动
const handlePopupOpen = () => {
  // 获取底部页面容器（通常是根元素或 .product-list-page）
  const pageContainer = document.querySelector('.product-list-page');
  if (pageContainer) {
    // 1. 禁止页面滚动（通过 CSS 定位固定，避免滚动）
    pageContainer.style.position = 'fixed';
    pageContainer.style.width = '100%';
    // 2. 记录当前滚动位置，关闭弹窗时恢复
    pageContainer.dataset.scrollTop = window.scrollY || document.documentElement.scrollTop;
  }
};

// 关键3：弹窗关闭时，恢复底部页面滚动
const handlePopupClose = () => {
  const pageContainer = document.querySelector('.product-list-page');
  if (pageContainer) {
    // 1. 恢复页面定位
    pageContainer.style.position = '';
    pageContainer.style.width = '';
    // 2. 恢复到弹窗打开前的滚动位置
    const scrollTop = pageContainer.dataset.scrollTop || 0;
    window.scrollTo({ top: scrollTop, behavior: 'smooth' });
  }
};
// 生命周期：页面卸载时移除监听（避免内存泄漏）
onUnmounted(() => {

  clearTimeout(handleSearch.timer); // 清除搜索防抖定时器
});
</script>

<style scoped>
.product-list-page {
  background-color: #f5f5f5;
    min-height: calc(100vh - 200rpx); /* 根据实际布局调整 */
    padding-bottom: 120rpx;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  padding: 10rpx 20rpx;
  background-color: #fff;
  align-items: center;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 12rpx 20rpx;
}

.search-input input {
  margin-left: 10rpx;
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.filter-btn {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0;
  margin-left: 10rpx;
}

/* 筛选弹窗样式 */
.filter-popup {
  height: 80vh;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
}

.filter-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
  position: relative;
}

.filter-title text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  position: absolute;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0;
}

.filter-content {
  padding: 20rpx;
  height: calc(80vh - 180rpx);
  overflow-y: auto;
  padding-bottom: 100rpx;
}

.filter-item {
  margin-bottom: 30rpx;
}

.filter-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.checkbox-item {
  display: inline-block;
  margin-right: 20rpx;
  margin-bottom: 15rpx;
  /* 调整checkbox标签样式 */
  white-space: nowrap;
}

.filter-actions {
  display: flex;
  padding: 20rpx;
  border-top: 1px solid #eee;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.reset-btn {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 40rpx;
  margin-right: 20rpx;
  font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-btn {
  flex: 1;
  height: 80rpx;
  background-color: #20269B;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 产品列表样式 */
.product-list {
  padding: 20rpx;
}

.product-item {
  display: flex;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  justify-content: space-between;
  align-items: center;
}

.product-details {
  flex: 1;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.product-type, .product-company {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.type-label {
  color: #999;
}

.product-tag {
  margin-top: 10rpx;
}

.pk-btn {
  width: 150rpx;
  height: 60rpx;
  font-size: 26rpx;
  background-color: #20269B;
  color: #fff;
  border-radius: 30rpx;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 取消选择按钮样式 */
.pk-btn:not(:disabled):hover {
  opacity: 0.9;
}
.pk-btn:disabled {
  background-color: #ccc;
  color: #fff;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

/* PK条样式（新增已选产品样式） */
.pk-bar {
  display: flex;
  align-items: center;
  padding: 15rpx 30rpx;
  background-color: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  gap: 20rpx;
}

.pk-selected-list {
  flex: 1;
  display: flex;
  gap: 10rpx;
  overflow-x: auto;
  padding: 5rpx 0;
}

.selected-product {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 30rpx;
  padding: 5rpx 15rpx;
  height: 50rpx;
  position: relative;
}

.product-short-name {
  font-size: 24rpx;
  color: #333;
  margin-right: 25rpx;
}

.delete-btn {
  position: absolute;
  right: 5rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: #ff3b30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.compare-btn {
  min-width: 200rpx;
  height: 70rpx;
  background-color: #20269B;
  color: #fff;
  border-radius: 35rpx;
  font-size: 28rpx;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-btn:disabled {
  background-color: #ccc;
}
/* 1. 按钮组容器：支持自动换行，避免按钮过多溢出 */
.btn-group-container {
   display: flex;
    gap: 15rpx;
    padding: 5rpx 0;
    flex-wrap: wrap; /* 自动换行 */
    justify-content: flex-start !important; /* 强制左对齐，优先级最高 */
    align-items: flex-start;
    width: 100%; /* 确保容器占满宽度 */
    margin: 0 !important; /* 清除可能的自动外边距 */
    text-align: left !important; /* 额外保险，防止文本居中影响 */
}

/* 2. 筛选按钮样式：未选中状态 */
.filter-btn-item {
  min-width: 150rpx;
  height: 60rpx;
  background-color: #f5f7fa;
  color: #333;
  font-size: 26rpx;
  border-radius: 30rpx;
  padding: 0 20rpx;
  border: none;
  white-space: nowrap;
  /* 确保按钮本身不会居中 */
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 3. 筛选按钮样式：选中状态（突出显示） */
.filter-btn-item.active {
  background-color: #20269B;
  color: #fff;
}
/* 加载中状态 */
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 26rpx;
}

/* 没有更多数据 */
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 26rpx;
}
.scroll-Y {
		height:  100vh /* 根据实际布局调整 */
}


</style>