<template>
  <view class="list-item" @click="handleClick">
    <view v-if="item" class="list-img-wrap">
      <image class="list-img" :src="item.img"></image
    ></view>
    <view v-else class="list-img-wrap skeleton"></view>
    <image
      v-if="item && item.is_cheap === 1"
      class="list-lable"
      :src="require('@/assets/icon/icon-sale.png')"
      mode="heightFix"
    ></image>
    <image
      v-else-if="item && item.is_new === 1"
      class="list-lable"
      :src="require('@/assets/icon/icon-new.png')"
      mode="heightFix"
    ></image>
    <view class="list-item-body">
      <text v-if="item" class="list-title">{{ item.name }}</text>
      <view v-else class="list-title">
        <view class="skeleton"></view>
        <view class="skeleton"></view>
      </view>
      <!-- <view v-if="item" class="list-sub">
        <view class="list-sub-main">
          <text class="list-label">&yen;</text>
          <text class="list-price">{{ item.price }}</text>
          <text
            v-if="
              Number(item.source_price) &&
              Number(item.price) < Number(item.source_price)
            "
            class="list-source"
            >&yen;{{ item.source_price }}</text
          >
        </view>
        <view
          v-if="item.curr_batch && item.total_batch && item.total_batch > 1"
          class="list-num"
          >{{ item.curr_batch }}/{{ item.total_batch }}箱</view
        >
      </view>
      <view v-else class="list-sub">
        <view class="skeleton"></view>
      </view>
      <view
        v-if="item.tag1 || item.tag2 || (item.tags && item.tags.length > 0)"
        class="list-tags"
      >
        <view v-if="item.tag1" class="list-tag list-tag1">{{ item.tag1 }}</view>
        <view v-if="item.tag2" class="list-tag list-tag2">{{ item.tag2 }}</view>
        <view v-for="tag in item.tags" :key="tag" class="list-tag list-tag2">{{
          tag
        }}</view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: "ListItem",
  props: {
    item: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {};
  },

  methods: {
    handleClick() {
      this.$emit("click", this.item);
    },
  },
};
</script>

<style lang="scss">
.list-item {
  overflow: hidden;
  position: relative;
  background-color: #fff;
  height: 100%;
  width: 344rpx;
  box-sizing: border-box;
  .skeleton {
    // background-color: #f1f1f1;
    background-image: linear-gradient(
      90deg,
      #f1f1f1 25%,
      #fafafa 37%,
      #f1f1f1 63%
    );
    width: 100%;
    height: 0.6rem;
    list-style: none;
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: skeleton-loading 1.4s ease infinite;
  }
  .list-lable {
    position: absolute;
    left: 0;
    top: 0;
    height: 40rpx;
  }
  .list-img-wrap {
    position: relative;
    width: 100%;
    display: block;
    height: 0;
    padding-top: 100%;
  }
  .list-img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .list-item-body {
    padding: 18rpx 20rpx 20rpx;
  }
  .list-title {
    font-weight: 500;
    color: #292d3b;
    display: block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 36rpx;
    font-size: 30rpx;
    line-height: 36rpx;
    .skeleton {
      height: 24rpx;
      margin: 5rpx 0;
      border-radius: 10rpx;
      &:nth-child(2) {
        width: 70%;
        margin-top: 10rpx;
      }
    }
  }
  .list-sub {
    margin-top: 30rpx;
    height: 30rpx;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22rpx;
    color: #555;
    .list-sub-main {
      height: 30rpx;
      display: flex;
      align-items: center;
    }
    .list-price {
      font-size: 40rpx;
      font-weight: bold;
      color: #222;
      line-height: 47rpx;
      transform: translate(0, -4rpx);
      margin: 0 4rpx;
    }
    .list-source {
      font-size: 24rpx;
      color: #a6a7ac;
      line-height: 28rpx;
      text-decoration: line-through;
      margin-left: 10rpx;
    }
  }
  .list-tags {
    margin-top: 22rpx;
    display: flex;
    justify-content: flex-start;
    .list-tag {
      height: 32rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #08c2c3;
      line-height: 26rpx;
      background: rgba(8, 194, 195, 0.12);
      display: flex;
      margin-right: 16rpx;
      align-items: center;
      padding: 0 8rpx;
      &.list-tag2 {
        color: #fc5e94;
        background: rgba(255, 78, 149, 0.1);
      }
    }
  }
  // .list-sub {
  //   position: absolute;
  //   left: 12rpx;
  //   bottom: 8rpx;
  //   color: #08c2c3;
  //   line-height: 34rpx;
  //   display: block;
  //   .list-label {
  //     font-size: 28rpx;
  //     margin-right: 5rpx;
  //     font-weight: bolder;
  //     font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
  //       Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI,
  //       Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  //   }
  //   .list-price {
  //     font-size: 36rpx;
  //     font-family: unidreamledregular, Helvetica Neue, Helvetica, Arial,
  //       Hiragino Sans GB, Hiragino Sans GB W3, Microsoft YaHei UI,
  //       Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  //   }
  // .list-source {
  //   font-size: 24rpx;
  //   color: #a6a7ac;
  //   line-height: 28rpx;
  //   text-decoration: line-through;
  //   margin-left: 10rpx;
  // }
  //   .skeleton {
  //     border-radius: 10rpx;
  //     height: 30rpx;
  //     margin: 0 0 5rpx;
  //     width: 100rpx;
  //   }
  // }
}
</style>
