<template>
  <view class="component-combine-detail">
    <view
      class="scroll-box"
      @touchend.stop="onOpenDetailList(2)"
    >
      <scroll-view
        class="scroll-view_H"
        :scroll-x="true"
        @touchmove.stop
      >
        <view
          v-for="(item, index) in combineList"
          :key="index"
          class="scroll-view-item_H uni-bg-red"
        >
          <img-show
            :src="item.imgUrl"
          />
          <view class="num-tag">
            x{{ item.comboCount }}
          </view>
        </view>
      </scroll-view>
      <view
        class="arrow-right"
        @tap="onOpenDetailList(1)"
      >
        <image src="@/package-user/static/images/arrow-right.png" />
      </view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  newSku: {
    type: Object,
    default: () => {
      return {}
    }
  },
  spuId: {
    type: [String, Number],
    default: () => {
      return ''
    }
  },
  skuId: {
    type: [String, Number],
    default: () => {
      return ''
    }
  }
})

const combineList = computed(() => {
  return props.newSku.skuComboList
})

let touchNum
/**
 * 打开组合详情列表页
 */
const onOpenDetailList = (num) => {
  touchNum++
  setTimeout(() => {
    if (touchNum >= num) {
      uni.setStorageSync('combine_sku_detail', props.newSku)
      uni.navigateTo({
        url: '/package-user/pages/combine-detail-list/combine-detail-list?spuId=' + props.spuId + '&&skuId=' + props.skuId
      })
    }
    touchNum = 0
  }, 500)
}

</script>

<style scoped lang="scss">
.component-combine-detail {
  display: flex;

  :deep(img) {
    width: 100%;
    height: 100%;
  }

  .scroll-box {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .arrow-right {
    width: 24rpx;
    height: 24rpx;
    overflow: hidden;
    margin-left: 25rpx;
  }
}

.scroll-view_H {
  white-space: nowrap;
  width: 92%;
}

.scroll-view-item_H {
  display: inline-block;
  width: 90rpx;
  margin: 0 10rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 36rpx;
  overflow: hidden;
  border-radius: 12rpx;
  background-color: #f3f3f3;

  .num-tag {
    width: 26rpx;
    height: 24rpx;
    padding: 4rpx;
    line-height: 24rpx;
    text-align: center;
    color: #FFF;
    border-radius: 12rpx 0 12rpx 0;
    background-color: rgba(65, 66, 68, 0.59);
    position: relative;
    bottom: 65rpx;
    left: 56rpx;
    font-size: 15rpx;
  }
}
</style>
