<template>
  <div class="transfer-market-goods-item-con" @click="toDetail">
    <img class="thumb" :src="data.thumb" />
    <div class="info-con">
      <div class="name-con">
        <div class="tag">转让</div>
        <p class="name">{{ data.goodsName }}</p>
      </div>
      <m-price :amt="data.price" :rmbSize="10" :intSize="15" :floatSize="12" />
      <div class="merchant flex-default">
        <img class="avatar" :src="data.saleThumb" />
        <span class="name">{{ data.nickName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { GoodsType } from "@/enums";
export default {
  props: ["data", "index"],
  methods: {
    toDetail() {
      let params = { goodsId: this.data.goodsId };
      let query = {
        type: GoodsType.TRANSFER,
        skuId: this.data.skuId,
        tranId: this.data.tranId,
      };
      this.$router.push({ name: "goods", params, query });
    },
  },
};
</script>

<style lang="less">
.transfer-market-goods-item-con {
  background: #ffffff;
  border-radius: 6px;
  margin-bottom: 10px;
  > .thumb {
    margin-bottom: 10px;
    width: 100%;
    border-radius: 6px 6px 0 0;
  }
  > .info-con {
    padding: 10px 8px 13px 8px;
    .name-con {
      margin-bottom: 7px;
      position: relative;
      .tag {
        position: absolute;
        left: 0;
        top: 1px;
        background: linear-gradient(295deg, #f07c5b 0%, #dd2e41 100%);
        border-radius: 2px;
        font-size: 9px;
        border-radius: 2px;
        line-height: 12px;
        text-align: center;
        color: #ffffff;
        padding: 0 3px;
      }
      .name {
        text-indent: 36px;
        font-size: 13px;
        line-height: 17px;
      }
    }
    .m-price-con {
      margin-bottom: 10px;
    }
    .merchant {
      .avatar {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: lightgrey;
        margin-right: 6px;
      }
      .name {
        color: #999999;
        font-size: 11px;
      }
    }
  }
}
</style>