<template>
  <view class="tab-content">
    <!-- 推荐 tab - 商品展示 -->
    <view v-if="activeTab === 'goods'" class="recommend-content">
      <view class="goods-list flex-col">
        <view
          v-for="(item,index) in dataList"
          :key="index"
          class="goods-item"
          @click="jumpUrl(item.url)"
        >
          <view class="goods-image">
            <image :src="item.cover" mode="aspectFill"></image>
          </view>
          <view class="goods-info flex-col">
            <text class="goods-title">{{ item.name }}</text>
            <view class="goods-tags">
              <text v-for="tag in item.tags" :key="tag" class="goods-tag">{{ tag }}</text>
            </view>
          </view>
          <view class="goods-price align-end">
            <text class="price-symbol">￥</text>
            <text class="price-value">{{ item.min_price}}</text>
            <text class="price-unit">/起</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 合作伙伴 tab -->
    <view v-else-if="activeTab === 1" class="partners-content">
      <view class="partners-list">
        <view class="partner-item" v-for="partner in partners" :key="partner.id">
          <image class="partner-logo" :src="partner.logo" mode="aspectFit"></image>
          <text class="partner-name">{{ partner.name }}</text>
          <text class="partner-desc">{{ partner.description }}</text>
        </view>
      </view>
    </view>

    <!-- 商机 tab -->
    <view v-else-if="activeTab === 'opportunity'" class="opportunities-content"
	>
      <view class="opportunities-list">
        <view class="opportunity-item" v-for="(opp,index) in dataList" :key="index" @click="jumpUrl(opp.url)">
          <view class="opp-header">
            <text class="opp-title">{{ opp.name }}</text>
            <view class="opp-status active" >{{ opp.service_fee }}</view>
          </view>
          <view class="opp-desc">{{ opp.desc }}</view>
          <view class="opp-meta">
            <text class="opp-location">{{ opp.cate_name }}</text>
            <text class="opp-date">{{ opp.create_time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 关于我们 tab -->
    <view v-else-if="activeTab === 3" class="about-content">
      <view class="about-info">
        <text class="about-text">
          我们是一家专注于国际贸易和物流服务的综合性企业，致力于为客户提供优质、高效、便捷的服务。
        </text>
        <view class="company-stats">
          <view class="stat-item">
            <text class="stat-number">10+</text>
            <text class="stat-label">年行业经验</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">1000+</text>
            <text class="stat-label">服务客户</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">50+</text>
            <text class="stat-label">合作国家</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 找买家 tab -->
    <view v-else-if="activeTab === 'buy'" class="buyers-content">
     <!-- <view class="buyers-search">
        <search-bar
          ref="buyersSearchBarRef"
          :placeholder="'请输入搜索关键字'"
          :showSearchButton="false"
          @search="handleSearch"
          @input="handleSearchInput"
          @clear="handleClearSearch"
        />
      </view> -->
      <view class="buyers-list">
        <view class="buyer-card flex-col"  @click="jumpUrl(buyer.url)" v-for="(buyer,index) in dataList" :key="buyer.id">
          <!-- 标题行 -->
          <view class="card-header flex-row justify-between align-center">
            <text class="product-title">{{ buyer.name }}</text>
            <view class="view-more">
              <text class="view-more-text">查看更多</text>
              <wd-icon name="arrow-right" size="14" color="#666666"></wd-icon>
            </view>
          </view>

          <!-- 海关编码 -->
          <!-- <view class="customs-code">
            <text class="code-label">海关编码</text>
            <text class="code-value">{{ buyer.customsCode }}</text>
          </view> -->

          <view class="divider"></view>

          <!-- 主要数据 -->
          <view class="data-section">
            <view class="data-items-combined">
              <view class="data-item">
                <text class="data-label1">类型</text>
                <text class="data-value">{{ buyer.cate_name }}</text>
              </view>
              <view class="data-item">
                <text class="data-label1">贸易伙伴</text>
                <text class="data-value">{{ buyer.partner }}</text>
              </view>
              <view class="data-item">
                <text class="data-label1">邮箱</text>
                <text class="data-value">{{ buyer.email }}</text>
              </view>
              <view class="data-item">
                <text class="data-label2">日期</text>
                <text class="data-value">{{ buyer.date }}</text>
              </view>
            </view>
            <view class="product-info">
              <view class="data-item">
                <text class="data-label1">描述</text>
                <view class="data-value">{{ buyer.remarks }}</view>
              </view>
            </view>
          </view>

          <!-- 进出口商信息 -->
          <view class="trade-info flex-row justify-between">
            <view class="exporter-info flex-row">
              <view class="exporter-item">
				  <view class="info-label">主营业务</view>
                <view class="info-value">{{ buyer.business }}</view>

              </view>
              <!-- <view class="exporter-item flex-col">
                <image :src="buyer.logo" mode="aspectFit" class="logo"></image>
              </view> -->
            </view>

            <!-- 竖向分隔线 -->
            <view class="vertical-divider"></view>

            <view class="importer-info flex-row">
              <view class="importer-item">
				  <view class="info-label">是否有联系方式</view>
                <text class="info-value">{{ buyer.is_contact == 1 ? '有' :'无' }}</text>

              </view>
              <!-- <view class="importer-item flex-col">
                <text class="info-value">{{ buyer.importerCountry }}</text>
                <view class="info-label">所在国</view>
              </view> -->
			  <view class="importer-item flex-col">
			    <image :src="buyer.logo"  class="logo"></image>
			  </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 找卖家 tab -->
    <view v-else-if="activeTab === 'sell'" class="sellers-content">
      <view class="sellers-list">
        <view class="seller-item" @click="jumpUrl(seller.url)"  v-for="(seller,index) in dataList" :key="index">
          <view class="seller-avatar">
            <image :src="seller.logo" mode="aspectFill"></image>
          </view>
          <view class="seller-info">
            <view class="seller-name">{{ seller.name }}</view>
            <text class="seller-company">{{ seller.cate_name }}</text>
            <view class="seller-products">{{ seller.remarks }}</view>
          </view>
          <view class="seller-action">
            <text class="contact-btn">联系</text>
          </view>
        </view>
      </view>
    </view>
	<!-- 保税生活 -->
	<view v-else-if="activeTab === 'life'" class="sellers-content">
	  <view class="sellers-list">
	    <view class="seller-item" @click="jumpUrl(seller.url)" v-for="(seller,index) in dataList" :key="index">
	      <view class="seller-avatar">
	        <image :src="seller.logo" mode="aspectFill"></image>
	      </view>
	      <view class="seller-info">
	        <view class="seller-name">{{ seller.name }}</view>
			<view class="tags_box">
				<view class="tag_item" v-for="(t,ti) in seller.tag" :key="index">
					{{t}}
				</view>
			</view>
	        <!-- <view class="seller-company">{{ setTag(seller.tag)}}</view> -->
	        <view class="seller-products">{{ seller.remarks }}</view>
	      </view>
	      <view class="seller-action">
	        <text class="contact-btn">联系</text>
	      </view>
	    </view>
	  </view>
	</view>

    <!-- 默认内容 -->
    <view v-if="!dataList.length" class="default-content">
      <text class="default-text">暂无内容</text>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, reactive, watch } from 'vue'
import { configSearch } from '@/api/home'
// 定义 props
const props = defineProps({
  activeTab: {
    type: [String,Number],
    default: 0,
  },
})
const dataList = ref([])
const hasNextPage = ref(false)
  watch(() => props.activeTab, (newValue, oldValue) => {
  queryParams.page = 1
  dataList.value = []
  getList()
});
// 推荐商品数据
const recommendGoods = ref([
  {
    id: 1,
    title: '劳斯莱斯',
    image: '/static/images/home/goods1.png',
    tags: ['拍卖', '进口', '展会清仓', '海关处置', '零售'],
    priceType: '￥',
    price: '500',
    unit: 'CBM',
  },
  {
    id: 2,
    title: '优质商品B',
    image: '/static/images/home/goods2.png',
    tags: ['拍卖', '进口', '展会清仓', '海关处置', '零售'],
    priceType: '￥',
    price: '500',
    unit: 'CBM',
  },
])

// 合作伙伴数据
const partners = ref([
  {
    id: 1,
    name: '合作伙伴A',
    logo: '/static/images/home/partner1.png',
    description: '长期合作伙伴，提供优质服务',
  },
  {
    id: 2,
    name: '合作伙伴B',
    logo: '/static/images/home/partner2.png',
    description: '战略合作伙伴，共同发展',
  },
])

// 商机数据
const opportunities = ref([
  {
    id: 1,
    title: '国际贸易合作机会',
    description: '寻找长期稳定的贸易合作伙伴，共同开拓国际市场',
    status: 'active',
    statusText: '进行中',
    location: '上海',
    date: '2024-01-15',
  },
  {
    id: 2,
    title: '物流服务招标',
    description: '大型物流项目招标，诚邀有实力的物流企业参与',
    status: 'pending',
    statusText: '待审核',
    location: '深圳',
    date: '2024-01-20',
  },
])

// 买家数据
const buyers = ref([
  {
    id: 1,
    productName: '优质商品A',
    customsCode: '12345678901234567890',
    quantity: '1000',
    amount: '100000',
    description: '这是一款高质量的商品，适合长期合作。',
    metricTons: '10',
    date: '2023-12-30',
    exporter: 'ABC贸易公司',
    exporterCountry: '中国',
    importer: 'XYZ进出口公司',
    importerCountry: '美国',
  },
  {
    id: 2,
    productName: '商品B',
    customsCode: '98765432109876543210',
    quantity: '500',
    amount: '50000',
    description: '这是一款价格合理的商品，需求量大。',
    metricTons: '5',
    date: '2024-01-10',
    exporter: 'DEF进出口公司',
    exporterCountry: '英国',
    importer: 'GHI贸易公司',
    importerCountry: '德国',
  },
])

// 搜索栏组件引用
const buyersSearchBarRef = ref()
const queryParams = reactive({
	page:1,
	page_size:10,
	keywords:''
})

// 处理搜索
const handleSearch = (keyword) => {
  console.log('找买家调用api搜索:', keyword)
  // 这里可以添加搜索逻辑，比如跳转到搜索页面
}

// 处理搜索输入
const handleSearchInput = (keyword) => {
  console.log('搜索输入:', keyword)
}
const setTag = (list)=>{
	if(list && list.length){
		return list.join(",")

	}else{
		return ""
	}
}
// 处理清空搜索
const handleClearSearch = () => {
  console.log('清空搜索')
}

// 卖家数据
const sellers = ref([
  {
    id: 1,
    name: '王先生',
    company: '优质供应商A',
    avatar: '/static/images/home/avatar3.png',
    products: '提供各类商品，质量保证',
  },
  {
    id: 2,
    name: '赵女士',
    company: '优质供应商B',
    avatar: '/static/images/home/avatar4.png',
    products: '专业生产，价格优惠',
  },
])

// 处理查看更多
const handleViewMore = () => {
  console.log('查看更多推荐商品')
  // 这里可以跳转到商品列表页面
}

// 处理商品点击
const handleGoodsClick = (goods) => {
  // console.log('点击商品:', goods)
  uni.navigateTo({
	  url:goods.url
  })
  // 这里可以跳转到商品详情页面
}
const jumpOppo = (data)=>{
	console.log('点击商品:', data)
}
const jumpBuy = (data)=>{
	console.log('点击商品:', data)
}
const jumpUrl=(url)=>{
	uni.navigateTo({
		  url:'/'+url,
		  fail: () => {
		  	uni.reLaunch({
				url:'/'+url,
			})
		  }
	})
}
const getList = (page = 1 )=>{
	queryParams.page = page
	configSearch({
		...queryParams,
		key:props.activeTab
	}).then(res=>{
		if(res.code == 1){
			if(queryParams.page == 1){
				dataList.value = res.data.list
			}else{
				dataList.value = [...dataList.value,...res.data.list]
			}
			hasNextPage.vaue = dataList.value.length >= res.data.count ? false : true
		}
	})
}
const getMoreData = ()=>{
	if(!hasNextPage.value)return
	queryParams.page++
	getList()

}
getList()
defineExpose({
	getList,
	queryParams,
	getMoreData
})
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';
.tab-content {
  // 推荐内容样式
  .recommend-content {
    .goods-list {
      gap: 20rpx;

      .goods-item {
        display: flex;
        gap: 20rpx;
        padding: 30rpx;
        background: #f8f8f8;
        border-radius: $border-radius;
        overflow: hidden;

        .goods-image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 12rpx;
          background: #697efe;
		  image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 12rpx;
		  }
        }

        .goods-info {
          padding: 9rpx 0;
          gap: 20rpx;

          .goods-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            display: block;
          }

          .goods-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10rpx;

            .goods-tag {
              height: 30rpx;
              line-height: 30rpx;
              padding: 0 10rpx;
              background: #e7e7e7;
              border-radius: 8rpx;
              font-weight: 400;
              font-size: 20rpx;
              color: #999999;
            }
          }
        }
        .goods-price {
          display: flex;
          font-weight: bold;
          font-size: 32rpx;
          color: #ff8500;
        }
      }
    }
  }

  // 合作伙伴样式
  .partners-content {
    .partners-list {
      .partner-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        gap: 20rpx;

        .partner-logo {
          width: 80rpx;
          height: 80rpx;
          border-radius: 12rpx;
        }

        .partner-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .partner-desc {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }

  // 商机样式
  .opportunities-content {
    .opportunities-list {
      .opportunity-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .opp-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .opp-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
          }

          .opp-status {
            padding: 8rpx 16rpx;
            border-radius: 20rpx;
            font-size: 22rpx;

            &.active {
              background: #e8f5e8;
              color: #52c41a;
            }

            &.pending {
              background: #fff7e6;
              color: #fa8c16;
            }
          }
        }

        .opp-desc {
          font-size: 26rpx;
          color: #666;
		   display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
          margin-bottom: 16rpx;
		   -webkit-box-orient: vertical; /* 垂直排列 */
			-webkit-line-clamp: 2; /* 限制显示两行 */
			overflow: hidden; /* 隐藏超出范围的内容 */
			text-overflow: ellipsis; /* 使用省略号 */
			width: 100%;
        }

        .opp-meta {
          display: flex;
          gap: 20rpx;
		// margin-top: 10px;
          .opp-location,
          .opp-date {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }

  // 关于我们样式
  .about-content {
    .about-info {
      background: #fff;
      border-radius: 16rpx;
      padding: 30rpx;

      .about-text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 30rpx;
        display: block;
      }

      .company-stats {
        display: flex;
        justify-content: space-around;

        .stat-item {
          text-align: center;

          .stat-number {
            font-size: 36rpx;
            font-weight: bold;
            color: #0478f4;
            display: block;
            margin-bottom: 8rpx;
          }

          .stat-label {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }

  // 找买家样式
  .buyers-content {
    .buyers-search {
      margin-bottom: 20rpx;
    }
    .buyers-list {
      .buyer-card {
        background: #fff;
        border-radius: $border-radius;
        padding: 24rpx 29rpx;
        padding-bottom: 30rpx;
        margin-bottom: 20rpx;

        .card-header {
          margin-bottom: 20rpx;
          .product-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            flex: 1;
			overflow: hidden;
          }

          .view-more {
            font-size: 24rpx;
            color: #666666;
          }
        }

        .customs-code {
          display: flex;
          align-items: center;
          gap: 10rpx;
          font-size: 24rpx;
          color: #666666;
          margin-bottom: 30rpx;
        }

        .divider {
          height: 1rpx;
          background: #eee;
          margin-bottom: 28rpx;
        }

        .data-section {
          .data-items-combined {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            row-gap: 30rpx;
            margin-bottom: 30rpx;
          }
          .product-info {
            margin-bottom: 38rpx;
          }
          .data-item {
            display: flex;
            align-items: center;
            gap: 10rpx;

            .data-label1 {
              width: 100rpx;
              font-size: 24rpx;
              color: #666;
            }
            .data-label2 {
              width: 60rpx;
              font-size: 24rpx;
              color: #666;
            }

            .data-value {
				// width: 200px;
				display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
				      -webkit-box-orient: vertical; /* 垂直排列 */
				      -webkit-line-clamp: 3; /* 限制显示三行 */
				      overflow: hidden; /* 隐藏超出范围的内容 */
				      text-overflow: ellipsis; /* 使用省略号 */
              font-size: 24rpx;
              font-weight: 540;
              color: #333;
            }
          }
        }

        .trade-info {
          .exporter-info,
          .importer-info {
            flex: 1;
            justify-content: space-between;
			overflow: hidden;
            .exporter-item,
            .importer-item {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 8rpx;
			.logo{
				width: 30px;

				height: 30px;
			}
              .info-value {
				  width: 120px;
                font-size: 24rpx;
                font-weight: 600;
                color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
              }

              .info-label {
                font-size: 22rpx;
                color: #666666;
              }
            }
          }
          .exporter-info {
            padding-right: 20rpx;
          }
          .importer-info {
            padding-left: 20rpx;
          }

          .vertical-divider {
            width: 1rpx;
            height: 80rpx;
            background: #e5e5e5;
            margin: 0 20rpx;
            align-self: center;
          }
        }
      }
    }
  }

  // 找卖家样式
  .sellers-content {
    .sellers-list {
      .seller-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        gap: 20rpx;

        .seller-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .seller-info {
          flex: 1;
		overflow: hidden;
		.tags_box{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.tag_item{
				height: 30rpx;
				line-height: 30rpx;
				padding: 0 10rpx;
				background: #e7e7e7;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
				// margin-top: 10px;
				margin-bottom: 5px;
				margin-right: 5px;
			}
		}
          .seller-name {
			  width: 100%;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            display: block;
            margin-bottom: 8rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
          }

          .seller-company {
            font-size: 24rpx;
            color: #666;
            display: block;
            margin-bottom: 8rpx;
          }

          .seller-products {
			  width: 100%;
			  overflow: hidden;
			  white-space: nowrap;
			  text-overflow: ellipsis;
            font-size: 22rpx;
            color: #999;
          }
        }

        .seller-action {
          .contact-btn {
            background: #0478f4;
            color: #fff;
            padding: 12rpx 24rpx;
            border-radius: 20rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  // 默认内容样式
  .default-content {
    text-align: center;
    padding: 100rpx 0;

    .default-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>
