<template>
  <view
    v-if="comboList.length > 0"
    :class="['component-combo-list', className]"
  >
    <view
      v-for="(comboItem, comboIndex) in comboList"
      :key="comboIndex"
      class="item"
      @click="toProdDetail(comboItem)"
    >
      <view class="item-name-sku">
        <view class="item-name">
          {{ tagName }}{{ comboItem[spuNameKey] }}
        </view>
        <view
          class="item-name"
          :class="{sku: (comboItem[skuNameKey] || comboItem[supplierSkuNameKey])}"
        >
          {{ comboItem[skuNameKey] || comboItem[supplierSkuNameKey] }}
        </view>
      </view>
      <view
        class="item-count"
        :class="{'is-click': isClick}"
      >
        x{{ comboItem[countKey] }}
      </view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  // 列表数据
  comboList: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 标志名称
  tagName: {
    type: String,
    default: () => $t('zuHe')
  },
  // 商品名称字段
  spuNameKey: {
    type: String,
    default: 'prodName'
  },
  // 商品规格字段
  skuNameKey: {
    type: String,
    default: 'skuName'
  },
  // 商品数量字段
  countKey: {
    type: String,
    default: 'prodCount'
  },
  // 供应商商品规格字段
  supplierSkuNameKey: {
    type: String,
    default: 'supplierSkuName'
  },
  // 类名
  className: {
    type: String,
    default: ''
  },
  // 是否可以点击跳转到详情
  isClick: {
    type: Boolean,
    default: false
  },
  // 商品id字段
  idKey: {
    type: String,
    default: 'prodId'
  }
})

// 跳转商品详情页
const toProdDetail = (item) => {
  if (!props.isClick) return
  const prodId = item[props.idKey]
  uni.navigateTo({
    url: '/package-prod/pages/prod/prod?prodId=' + prodId
  })
}

</script>

<style scoped lang="scss">
@use "combo-list";
</style>
