<template>
  <view>
    <BeeTabbarVue active-tab="shoppingMall"></BeeTabbarVue>
    <view class="container">

      <image src="/static/images/homePage/homePageBg.png" mode="aspectFill" class="bg-image"></image>
      <view :style="{ height: getStatusBarHeight() + 'px' }"></view>
      <view class="title-bar" :style="{ height: getTitleBarHeight() + 'px' }">
        <image src="/static/images/logo.png" class="logo-image" mode="aspectFill"></image>
      </view>
      <view class="floating-btn" @click="gotoCart">
        <image src="/static/images/cart.png" mode="aspectFit" class="cart-icon"></image>
        <view class="btn-text">购物车</view>
      </view>

      <scroll-view scroll-y="true" class="scroll-view" enable-flex>
        <view class="swiper-content">
          <swiper class="swiper" circular indicator-active-color="#ffffff" indicator-dots="true" autoplay="true"
            interval="2000" duration="500">
            <swiper-item class="swiper-item" v-for="(item, index) in activities" :key="index">
              <image :src=item.url class="swiper-image" mode="" @click="activeBtn(item)"></image>
            </swiper-item>

          </swiper>
        </view>

        <view v-if="shoppingList.length === 0" class="empty-container">
          <text class="empty-text">暂无商品</text>
        </view>

        <view class="scroll-content" v-else>
          <view class="goods-item" v-for="(item, index) in shoppingList" :key="index" @click="shopDetails(item)">
            <image :src="item.imgUrl" mode="aspectFill" class="goods-image" lazy-load="true"></image>
            <view class="goods-title">{{ item.name }}</view>
            <view class="goods-info">
              <view class="goods-weight">
                重量：
                <text>{{ item.weight || 0 }}g</text>
              </view>
              <view class="goods-weight">已售{{ item.sold || 0 }}</view>
            </view>
            <view class="goods-handle">
              <view class="goods-price">￥
                <text>{{ item.price || '-' }}</text>
                <view class="normal-price">￥{{ item.originalPrice || 0 }}</view>
              </view>
              <view @click.stop="shoppingBuy(item)">
                <button class="buy-btn">购买</button>
              </view>
            </view>
          </view>
        </view>

        <view class="tabbar-bottom"></view>

      </scroll-view>

    </view>
    
  </view>
</template>

<script setup>
import { getStatusBarHeight, getTitleBarHeight } from '../../utils/system';
import BeeTabbarVue from '../../components/BeeTabbar.vue';
import { ref } from 'vue'
import { request } from '@/utils/request'
import { onShow } from '@dcloudio/uni-app'
import { useTokenStorage } from '../../utils/storage'

const { getAccessToken } = useTokenStorage()
const shoppingList = ref([])
const activities = ref([])

// 跳转购物车
const gotoCart = () => {
  if (!getAccessToken()) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({ url: '/pages/login/login' })
        }
      }
    })
  } else {
    uni.navigateTo({
      url: '/pages/shoppingCart/shoppingCart'
    })
  }

}
// 跳转详情
const shopDetails = (item) => {
  uni.navigateTo({
    url: `/pages/shoppingMall/shopDetails?id=${item.id}`
  })
}
//跳转到活动页面
const activeBtn = (item) => {
  if (item.activityId !== null) {
    uni.navigateTo({ url: '/pages/couponPage/couponPage' })
  } else {
    uni.navigateTo({
      url: `/pages/shoppingMall/shopDetails?id=${item.productId}`
    })
  }
}

//单独购买
const shoppingBuy = async (item) => {
  const res = await request({
    url: '/app-api/trade/cart/add',
    showLoading: true,
    method: 'post',
    data: {
      skuId: item.id,
      count: '1'
    },

  })
  if (res.code === 0) {
    const selectedItems = [
      {
        count: 1,
        sku: {
          id: item.id,
          picUrl: item.imgUrl,
          name: item.name,
          weight: item.weight,
          price: item.price * 100,
        }
      }
    ]

    uni.navigateTo({
      url: '/pages/shoppingPay/shoppingPay',
      success: (res) => {
        res.eventChannel.emit('acceptSelectedItems', {
          selectedItems: selectedItems,
          totalPrice: item.price * 100
        });
      }
    })
  }


}

//获取商场列表
const getShoppingList = async () => {
  try {
    const res = await request({
      url: '/app-api/WeiXinMini/product/get/productList',
      showLoading: true,
    })
    if (res.code === 0) {
      shoppingList.value = res.data

    } else {
      throw new Error(res.msg || '数据异常')
    }
  }
  catch (err) {
    console.error('获取商场数据失败:', err)

  }
}
//获取活动数据
const getActiveList = async () => {
  try {
    const res = await request({
      url: '/app-api/WeiXinMini/index/get/activity',
      showLoading: true,
    })
    if (res.code === 0) {
      activities.value = res.data || []
    } else {
      throw new Error(res.msg || '数据异常')
    }
  } catch (err) {
    console.error('轮播图加载失败:', err)

  }
}

onShow(() => {
  getShoppingList()
  getActiveList()
})

</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  padding-bottom: 35rpx;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100vh;  

	.bg-image {
		width: 100%;
		height: 374rpx;
		position: absolute;  
		z-index: -1;
	}
	.title-bar {
		position: sticky;  // 新增：标题栏固定
		top: 0;
		z-index: 10;
		background-color: transparent;
		.logo-image {
			width: 205rpx;
			height: 70rpx;
			margin-left: 40rpx;
		}
	}

  .floating-btn {
    z-index: 999;
    position: fixed;
    right: 0;
    bottom: 384rpx;
    width: 89rpx;
    height: 107rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx 0rpx 0rpx 20rpx;
    border: 1rpx solid #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .cart-icon {
      width: 45rpx;
      height: 41rpx;
    }
    .btn-text {
      margin-top: 8rpx;
      font-size: 22rpx;
      color: #202120;
      line-height: 20rpx;
    }
  }

  .scroll-view {
    flex: 1;
    overflow-y: auto; 
    height: 300rpx;

    .swiper-content {
			height: 340rpx;
			width: 704rpx;
			border-radius: 24rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 5rpx;
      margin-bottom: 20rpx;
			.swiper {
				width: 100%;
				height: 100%;
				.swiper-image {
					height: 100%;
					width: 100%;
				}
			}
		}
    .scroll-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;
  }

  .goods-item {
    height: 510rpx;
    width: 343rpx;
    background: #ffffff;
    margin-bottom: 16rpx;

    .goods-image {
      width: 100%;
      height: 335rpx;
    }

    .goods-title {
      width: 295rpx;
      margin: auto;
      margin-top: 16rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .goods-info {
      margin-top: 4rpx;
      padding: 0 24rpx;
      display: flex;
      justify-content: space-between;

      .goods-weight {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 36rpx;

        text {
          font-weight: 500;
          font-size: 24rpx;
          color: #101010;
        }
      }
    }

    .goods-handle {
      display: flex;
      height: 44rpx;
      margin-top: 20rpx;
      justify-content: space-between;
      padding: 0 24rpx;

      .goods-price {
        display: flex;
        font-weight: 500;
        font-size: 24rpx;
        color: #EB5C20;
        align-items: center;

        text {
          font-weight: bold;
          font-size: 24rpx;
        }

        .normal-price {
          margin-left: 8rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          text-decoration-line: line-through;
        }
      }

      .buy-btn {
        width: 128rpx;
        height: 44rpx;
        background: #FF6F0E;
        border-radius: 130rpx 130rpx 130rpx 130rpx;
        line-height: 44rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }
  }


  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;



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

  }
}
</style>