<template>
  <view>
    <!-- 自定义导航栏 -->
    <nav-bar :title="$t('order.confirmTitle')" />

    <!-- 确认订单组件 -->
    <Confirm :goodsList="goodsList" :userInfo="userInfo" :orderType="orderType" :allowPointPay="isLengthen" :backStep="orderType === 'abroadVip' ? 2 : 1">
      <!-- 商品列表内容 -->
      <template #goodsList>
        <view class="goods-item" v-for="goods in goodsList" :key="goods.productId">
          <!-- VIP优惠标签 -->
          <wd-tag v-if="goods.isVipPrice === 1 && goods.vipPrice" type="danger" mark custom-class="vip-badge">{{ $t('order.vipLabel') }}</wd-tag>
          
          <!-- 商品图片 -->
          <view class="goods-image">
            <image
              :src="goods.productImages || '/static/nobg.jpg'"
              mode="aspectFit"
            />
          </view>
          
          <!-- 商品信息 -->
          <view class="goods-info">
            <text class="goods-name">{{ goods.productName }}</text>
            <!-- 商品价格组件 -->
            <GoodsPrice :goods="goods" />
          </view>
        </view>
      </template>
    </Confirm>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { orderApi } from '@/api/modules/order'
import type { IOrderGoods } from '@/types/order'
import Confirm from '@/components/order/Confirm.vue';
import GoodsPrice from '@/components/order/GoodsPrice.vue';

/**
 * 获取用户信息
 */
const userInfo = ref({})
const getUserInfo = async () => {
  const res = await orderApi.getUserInfo()
  userInfo.value = res.result || {}
}

// 商品列表
const goodsList = ref<IOrderGoods[]>([])
const isLengthen = ref<boolean>(false)
const orderType = ref<string>('')

/**
 * 页面加载
 */
onLoad(() => {
  try {
    // 获取商品列表
    uni.$on('selectedGoods', async (data: IOrderGoods) => {
      // 获取用户信息
      await getUserInfo()
      
      // 处理商品数据
      console.log('监听到传入的商品数据:', data)
      isLengthen.value = data.state !== null
      orderType.value = data.orderType || ''
      goodsList.value = [ data ]
    })
  } catch (error) {
    console.error('解析商品数据失败:', error)
    uni.showToast({
      title: '商品数据错误',
      icon: 'none'
    })
  }
})

onUnload(() => {
  uni.$off('selectedGoods')
})
</script>

<style lang="scss" scoped>
.goods-item {
  position: relative;
  display: flex;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .vip-badge {
    position: absolute;
    top: 20rpx;
    left: 0;
    z-index: 1;
  }
  
  .goods-image {
    width: 140rpx;
    height: 140rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    overflow: hidden;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .goods-name {
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
      margin-bottom: 10rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .quantity-row {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;
      
      .quantity-label {
        margin-right: 10rpx;
      }
      
      .quantity-control {
        display: flex;
        align-items: center;
      }
    }
  }
}

</style>