<template>
  <div class="top-list-item-con flex-default">
    <div class="thumb-con">
      <img />
      <div
        class="sort"
        v-if="showSort"
        :style="{ color: sortStyle.color, background: sortStyle.bgColor }"
      >
        {{ sortStyle.label }}
      </div>
    </div>
    <div class="info-con">
      <div class="name">
        产品名称耳机字段描述产品名称耳机字段描述产品名称名称……
      </div>
      <div class="bottom flex-between">
        <m-price :amt="3299.9" :rmbSize="10" :intSize="20" :floatSize="14"/>
        <van-button @click="$router.push({name: 'transfer-good-list'})">去看看</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data", "index"],
  computed: {
    showSort() {
      return this.index < 3;
    },
    sortStyle() {
      return this.sortStyleMap["sort-" + this.index] || {};
    },
  },
  data() {
    return {
      sortStyleMap: {
        "sort-0": {
          label: "1st",
          color: "#ECB226",
          bgColor: "#FBF7CE",
        },
        "sort-1": {
          label: "2nd",
          color: "#8CB1BB",
          bgColor: "#EFFAFF",
        },
        "sort-2": {
          label: "3rd",
          color: "#CF9065",
          bgColor: "#FFECDB",
        },
      },
    };
  },
};
</script>

<style lang="less">
.top-list-item-con {
  background: #ffffff;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
  > .thumb-con {
    height: 100px;
    width: 100px;
    margin-right: 10px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 7px;
    }
    .sort {
      position: absolute;
      top: 0;
      left: 0;
      height: 36px;
      width: 36px;
      border-radius: 7px 7px 61px 7px;
      line-height: 36px;
      font-size: 15px;
      font-weight: bold;
      padding-left: 5px;
    }
  }
  > .info-con {
    height: 100px;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 0 4px;
    .name {
      flex: 1;
      font-weight: bold;
      font-size: 14px;
    }
    .bottom button {
      background: linear-gradient(270deg, #f07c5b 0%, #dd2e41 100%);
      border-radius: 16px;
      height: 28px;
      font-size: 14px;
      color: #ffffff;
      border: none;
    }
  }
}
</style>


