<template>
  <div ref="goods" class="Sprdt">
    <div class="Sprdt-image">
      <cr-image
        width="100%"
        height="100%"
        :src="item.goodsImage | Img2Thumb"
        lazy-load
        fit="cover"
      />
    </div>
    <div class="Sprdt-info">
      <div class="Sprdt-title">{{ item.goodsName }}</div>
      <div v-if="item.serviceTypeList" class="Sprdt-active">
        <span
          v-for="(stItem, stIndex) in item.serviceTypeList"
          :key="stIndex"
          class="Sprdt-active-item"
          >{{ stItem }}</span
        >
      </div>

      <div v-if="item.tagList.length" class="Sprdt-tags">
        <div v-for="(itm, ind) in item.tagList" :key="ind" class="Sprdt-tags-item">
          <span class="Sprdt-tags-item__text">{{ itm.name }}</span>
        </div>
      </div>
      <!-- </template> -->

      <div class="Sprdt-price">
        <div class="Sprdt-price-container">
          <div class="Sprdt-price-count">
            <b class="Sprdt-price-count__unit">¥</b>
            <span class="Sprdt-price-count__text">{{ item.goodsPrice }}</span>
          </div>
          <div v-if="item.goodsSalePrice" class="Sprdt-price-line">¥{{ item.goodsSalePrice }}</div>
          <!-- <div v-if="item.shopInfo.distance" class="Sprdt-price-distance">
            {{ item.shopInfo.distance }}
          </div> -->
        </div>
      </div>
      <cr-divider :hairline="true" />

      <div v-if="item.shopInfo" class="Sprdt-store">
        <cr-image
          class="Sprdt-store-logo"
          width="24px"
          height="24px"
          lazy-load
          :src="item.shopInfo.shopImgs | Img2Thumb"
        />
        <div class="Sprdt-store-name">{{ item.shopInfo.shopName }}</div>
        <div v-if="item.shopInfo.distance" class="Sprdt-store-distance">
          {{ item.shopInfo.distance }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Img2Thumb } from '@/filters/img2Thumb.filter';
export default {
  filters: { Img2Thumb },
  props: {
    item: {
      type: Object,
      default: () => ({
        tagList: [],
        serviceTypeList: [],
        shopInfo: {}
      })
    },
    position: {
      type: String,
      required: true
    }
  }
};
</script>
<style lang="less" scoped>
.Sprdt {
  color: @black;
  width: 172px;
  border-radius: @border-radius-md;
  overflow: hidden;
  &-image {
    width: 100%;
    height: 115px;
    overflow: hidden;
    .cr-image {
      width: 100%;
      height: 100%;
    }
  }
  &-info {
    padding: 4px 7px @padding-xs + 2px @padding-xs;
    box-sizing: border-box;
    background-color: @white;
    @{deep} .cr-divider {
      border-color: @grey-border;
      margin-top: @padding-unit;
      margin-bottom: @padding-xs;
    }
  }
  &-title {
    .text-size(13);
    .mx_multline_overwrite();
  }

  &-active {
    .text-size(12);
    color: @gray-4;
    .mx_multline_overwrite(1);
    margin-top: 2px;
    &-item {
      padding-right: 5px;
      padding-left: 7px;
      border-radius: 2px;
      border-right: 1px solid #dcdee0;
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
        border-right: none;
      }
    }
  }

  &-tags {
    font-size: 0;
    margin-top: @padding-unit;
    &-item {
      display: inline-block;
      position: relative;
      overflow: hidden;
      margin: 2px 2px 2px 0;
      &__text {
        display: inline-block;
        border: 1px solid @border-red;
        font-size: 8px;
        color: @red;
        border-radius: 4px;
        padding: 2px 4px;
      }

      &::before,
      &::after {
        content: '';
        width: 6px;
        height: 6px;
        border: 1px solid @border-red;
        border-radius: 50%;
        box-sizing: border-box;
        position: absolute;
        top: calc(50% - 3px);
        background-color: @white;
        // z-index: 1;
      }

      &::before {
        left: -3px;
      }

      &::after {
        right: -3px;
        // z-index: -1;
      }
    }
  }

  &-price {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin-top: @padding-xs;
    &-container {
      flex: 1;
      display: flex;
    }
    &-count {
      .text-size(18);
      color: @red;

      &__unit {
        .text-size(12);
        font-weight: bold;
      }

      &__text {
        font-weight: bold;
      }
    }
    &-line {
      .text-size(12);
      color: @gray-4;
      text-decoration: line-through;
      padding-top: 5px;
      padding-left: 4px;
    }
    &-distance {
      .text-size(12);
      color: @gray-4;
      padding-left: 12px;
      background: url(~@/assets/images/sericeGoods/distance.png) no-repeat left center;
      background-size: 9px 12px;
    }
  }

  &-store {
    display: flex;
    align-items: center;
    &-logo {
      border-radius: 4px;
      overflow: hidden;
    }
    &-name {
      flex: 1;
      .text-size(12);
      padding-left: @padding-x;
      .mx_multline_overwrite(1);
    }
    &-distance {
      .text-size(12);
      color: @gray-4;
      // padding-left: 12px;
    }
  }
}
</style>
