<template>
  <view
    v-if="comboList.length > 0"
    :class="['component-specifications-list', className]"
  >
    <checkbox-group>
      <view
        v-for="(comboItem, comboIndex) in comboList"
        :key="comboIndex"
        class="item"
      >
        <view
          class="checkbox-box"
        >
          <label class="check-box-label">
            <checkbox
              :checked="comboItem.checked"
              color="#fff"
              class="checkbox"
              :disabled="isMaxNum && !comboItem.checked"
              @tap="onChoose(comboItem.skuId)"
            />
          </label>
        </view>
        <view class="item-name-sku">
          <view class="item-name">
            {{ tagName }}{{ comboItem[skuNameKey] }}
          </view>
          <view
            class="item-name"
            :class="{sku: (comboItem[priceKey])}"
          >
            ￥{{ comboItem[priceKey] }}
          </view>
        </view>
        <view
          class="item-count"
        >
          {{ $t('kuCun') }}{{ comboItem[countKey] }}
        </view>
      </view>
    </checkbox-group>
  </view>
</template>

<script setup>

defineProps({
  // 列表数据
  comboList: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 标志名称
  tagName: {
    type: String,
    default: `【${$t('guiGe')}】`
  },
  // 规格名称字段
  skuNameKey: {
    type: String,
    default: 'skuName'
  },
  // 价格字段
  priceKey: {
    type: String,
    default: 'price'
  },
  // 数量字段
  countKey: {
    type: String,
    default: 'stocks'
  },
  // 类名
  className: {
    type: String,
    default: ''
  },
  // 商品id字段
  idKey: {
    type: String,
    default: 'prodId'
  },
  isMaxNum: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['on-choose'])
const onChoose = (skuId) => {
  emit('on-choose', skuId)
}

</script>

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