<template>
  <view class="top-fixed">
    <view class="top">
      <uni-icons type="location" size="30"></uni-icons>
      <text>上海</text>
      <uni-search-bar class="search-w-50" v-model="searchContent" placeholder="请输入查询内容" clearButton="auto" cancelButton="none" @confirm="searchClick" />
    </view>
    <scroll-view class="scroll-H" scroll-x="true" show-scrollbar="false" > 
        <button class="category-btn" v-for="item in categoryList" 
        :type="item.id ===selectId?'primary':'default'"
        :key="item.id"
        @click="categoryFilter(item.id)">
        {{item.name}}
        </button>   
    </scroll-view>
  </view>
  
  <scroll-view class="scroll-V" scroll-y>
    <GroupOrderComponent v-for="item in orderList" :key="item.id" 
    :id="item.id"
    :type="item.type"
    :desc="item.desc"
    :status="item.status"
    :pickupAddr = "item.pickup_addr"
    :itemList="item.item_list"
    :groupLeader = "item.group_leader"
    :statisticDesc = "item.statistic_desc"
    @share="shareClick"
    @join="joinClicked"
    @fav="favClick"
    ></GroupOrderComponent>
  </scroll-view>
  
</template>

<script>
export default {
  data() {
    return {
      title: '分类首页',
      selectId:0,
      categoryList:[
        {
          id:1,
          name:"全部"
        },
        {
          id:2,
          name:"生鲜"
        },
        {
          id:3,
          name:"食品"
        },
        {
          id:4,
          name:"日用"
        },
        {
          id:5,
          name:"日期"
        },
        {
          id:6,
          name:"服装"
        },
        {
          id:7,
          name:"美妆"
        },
        {
          id:8,
          name:"文办"
        }
      ],
      orderList: [
        {
          id:"1",
          type:"express",
          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
          status:"start",
          pickup_addr:"自提点地址",
          item_list:[
            {
              id:1,
              image_url:"/static/logo.png",
              price:"20"
            },
            {
              id:2,
              image_url:"/static/logo.png",
              price:"30"
            },
            {
              id:3,
              image_url:"/static/logo.png",
              price:"40"
            },
            {
              id:4,
              image_url:"/static/logo.png",
              price:"60"
            }
          ],
          group_leader:{
            id:1,
            fav:true,
            avatar:"adsfadfa",
            nickname:"测试团长1"
          },
          statistic_desc:"20000人参团"
        },
        {
          id:"2",
          type:"express",
          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
          status:"start",
          pickup_addr:"自提点地址",
          item_list:[
            {
              id:1,
              image_url:"/static/logo.png",
              price:"20"
            },
            {
              id:2,
              image_url:"/static/logo.png",
              price:"30"
            },
            {
              id:3,
              image_url:"/static/logo.png",
              price:"40"
            },
            {
              id:4,
              image_url:"/static/logo.png",
              price:"60"
            }
          ],
          group_leader:{
            id:1,
            fav:true,
            avatar:"adsfadfa",
            nickname:"测试团长1"
          },
          statistic_desc:"20000人参团"
        },
        {
          id:"3",
          type:"pickup",
          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
          status:"start",
          pickup_addr:"自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址",
          item_list:[
            {
              id:1,
              image_url:"/static/logo.png",
              price:"20"
            },
            {
              id:2,
              image_url:"/static/logo.png",
              price:"30"
            },
            {
              id:3,
              image_url:"/static/logo.png",
              price:"40"
            },
            {
              id:4,
              image_url:"/static/logo.png",
              price:"60"
            }
          ],
          group_leader:{
            id:2,
            fav:false,
            avatar:"adsfadfa",
            nickname:"测试团长2"
          },
          statistic_desc:"20000人参团"
        },
        {
          id:"4",
          type:"express",
          desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
          status:"start",
          pickupAddr:"自提点地址",
          item_list:[
            {
              id:1,
              image_url:"/static/logo.png",
              price:"20"
            },
            {
              id:2,
              image_url:"/static/logo.png",
              price:"30"
            },
            {
              id:3,
              image_url:"/static/logo.png",
              price:"40"
            },
            {
              id:4,
              image_url:"/static/logo.png",
              price:"60"
            }
          ],
          group_leader:{
            id:3,
            fav:false,
            avatar:"adsfadfa",
            nickname:"测试团长3"
          },
          statistic_desc:"20000人参团"
        },
      ]
    }
  },
  onLoad() {
    // 处理分类选中
    console.log("aa:",this.categoryList.length)
    if (this.categoryList.length > 0) {
      this.selectId = this.categoryList[0].id
    }
  },
  methods: {
    categoryFilter(categoryID) {
      this.selectId = categoryID
    }
  },
}
</script>

<style scoped>
.top-fixed {
  background: #f0f0f0;
  position: fixed;
  z-index: 999;   /* 确保悬浮层级最高 */
  width: 100%;
  height: 240rpx;
  top: 60rpx;
}
.top {
  display: flex;
  align-items: center;
  margin: 20rpx;
}

.search-w-50 {
	width: 70%;
}

.scroll-H {
  white-space: nowrap;
  height:100rpx;
}

.scroll-V {
  position: fixed;
  top:300rpx;
  height:68vh;
}

.category-btn {
  display: inline-block;
  margin-left: 20rpx;
  margin-right: 20rpx;
	width: 100rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 24rpx;
}
</style>