<template>
  <div class="product-item" @click="clickHandle" :class="{'item-row':layoutType=='row'}">
    <div class="product-img">
      <!-- <img v-lazy="img" alt="" width="" /> -->
      <image :src="img" mode="widthFix" alt="" width="" ></image>
    </div>
    <div class="product-info">
      <span class="name">{{ name }}</span>
      <div class="des">{{ des }}</div>
      <slot name="info"></slot>
      <!-- {{ productText }} -->
    </div>
    <div class="product-footer">
      <!-- <slot name="footer"></slot> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    img: {
      type: String,
    },
    name: {
      type: String,
      default: "",
    },
    des: {
      type: String,
      default: "",
    },
    layoutType: {
      type: String,
      default: 'column',
    },
  },
  methods: {
    clickHandle() {
      // debugger
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped>
.product-item {
  font-size: 16px;
  background-color: #fff;
  border-radius: 0.4em;
  overflow: hidden;
  .product-img {
    position: relative;
  }
  .product-info {
    font-size: 13px;
    margin: 5px;
    color: #888888;
    .name {
      display: flex;
      font-size: 13px;
      justify-content: space-between;
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #262626;
      margin-bottom: 2px;
    }
    .des {
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
.item-row{
  display: flex;
}
</style>