<template>
  <div class="goods-container">
    <!-- 左侧图片 -->
    <div class="thumb">
      <div class="custom-control custom-checkbox">
        <!-- 复选框 -->
        <input type="checkbox" class="custom-control-input" :id="'cb' + id" :checked="isChecked" @change="toggleGoodsChecked" />
        <!-- 将复选框和图片绑定在一起，实现点击图片也可以选中商品 -->
        <label class="custom-control-label" :for="'cb' + id">
          <!-- 商品的缩略图 -->
          <img :src="thumbnail" alt="" />
        </label>
      </div>
    </div>
    <!-- 右侧信息区域 -->
    <div class="goods-info">
      <!-- 商品标题 -->
      <h6 class="goods-title">{{ title }}</h6>
      <div class="goods-info-bottom">
        <!-- 商品价格 -->
        <span class="goods-price">￥{{ price.toFixed(2) }}</span>
        <!-- 商品数量 -->
        <Counter :count="count" :count_id="id"></Counter>
      </div>
    </div>
  </div>
</template>

<script>
import Counter from '@/components/Counter/Counter.vue'

export default {
  components: {
    Counter,
  },
  props: {
    // 商品标题
    title: {
      type: String, // 指定 title 只接受字符串类型
      default: '商品名称', // 如果没有传入 title，则默认显示 '商品名称'
    },
    // 商品缩略图
    thumbnail: {
      type: String, // 指定 thumbnail 只接受字符串类型
      default: '', // 如果没有传入 thumbnail，则默认为空字符串
    },
    // 商品选中状态
    isChecked: {
      type: Boolean, // 指定 isChecked 只接受布尔类型
      default: true, // 如果没有传入 isChecked，则默认为 true
    },
    // 商品 ID
    id: {
      type: Number, // 指定 id 只接受数字类型
      required: true, // 指定 id 是必须的，必须传递 id 属性
    },
    // 商品价格
    price: {
      type: Number, // 指定 price 只接受数字类型
      required: true, // 指定 price 是必须的，必须传递 price 属性
    },
    // 商品数量
    count: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    // 切换商品选中状态
    toggleGoodsChecked(e) {
      // 触发一个自定义事件，将商品 ID 和选中状态传递给父组件
      this.$emit('change-state', { id: this.id, state: e.target.checked });
    },
  },
}
</script>
 
<style lang="less" scoped>
.goods-container {
  border-top: 1px solid #efefef;
  padding: 10px;
  display: flex;

  .thumb {
    display: flex;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
      margin: 0 10px;
    }
  }

  .goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;

    .goods-title {
      font-weight: bold;
      font-size: 12px;
    }

    .goods-info-bottom {
      display: flex;
      justify-content: space-between;

      .goods-price {
        font-weight: bold;
        color: red;
        font-size: 13px;
      }
    }
  }
}
</style>
