<template>
  <div class="Si-card Sinfo">
    <div v-if="!snapShot" class="Sinfo-price">
      <span class="Sinfo-price__unit">¥</span>
      <span class="Sinfo-price__amount">{{ serviceData.salePrice || '' }}</span>
      <span v-if="serviceData.marketPrice" class="Sinfo-price__line">
        ¥{{ serviceData.marketPrice || '' }}
      </span>
    </div>
    <div class="Sinfo-title">{{ serviceData.skuName }}</div>
    <div class="Sinfo-describe">{{ serviceData.description }}</div>
    <cr-divider :hairline="true" />
    <div v-if="serviceData.limitDesc" class="Sinfo-cell">
      <span class="Sinfo-cell__label">限购</span>
      <div class="Sinfo-cell__content">
        {{ serviceData.limitDesc }}
      </div>
    </div>
    <div v-if="serviceData.serviceTypes.length" class="Sinfo-cell">
      <span class="Sinfo-cell__label">服务</span>
      <div class="Sinfo-cell__content">
        <div v-for="(lItem, lIndex) in serviceData.serviceTypes" :key="lIndex" class="Sinfo-label">
          <cr-image :src="lItem.leftIcon" width="16px" height="16px" />
          {{ lItem.name }}
        </div>
      </div>
    </div>
    <div v-if="storeInfo.name" class="Sinfo-cell">
      <span class="Sinfo-cell__label">店铺</span>
      <div class="Sinfo-cell__content">
        <div class="Sinfo-cell__content__name">{{ storeInfo.name }}</div>
        <span v-if="storeInfo.distance" class="Sinfo-cell__content__distance">
          ｜{{ storeInfo.distance }}
        </span>
      </div>
      <div class="Sinfo-cell__right">
        <span class="Sinfo-cell__right__num">{{ storeInfo.storeCnt }}家门店适用</span>
        <cr-icon type="arrow" size="14px" color="#999999" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    snapShot: {
      type: Boolean,
      default: false
    },
    serviceData: {
      type: Object,
      default: () => ({
        serviceTypes: []
      })
    },
    storeInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.Sinfo {
  // min-height: 167px;
  box-sizing: border-box;

  @{deep} .cr-divider {
    border-color: #f2f3f5;
    margin: @padding-sm 0;
  }

  &-price {
    color: #ec3333;
    display: flex;
    align-items: flex-end;
    &__unit {
      .text-size(14);
      font-weight: bold;
    }
    &__amount {
      font-family: PingFangSC-Semibold, PingFang SC;
      font-size: 28px;
      font-weight: bold;
    }
    &__line {
      color: @gray-4;
      font-size: 14px;
      text-decoration: line-through;
      margin-left: 5px;
      padding-bottom: 2px;
    }
  }

  &-title {
    .text-size(16);
    color: @black;
    font-weight: bold;
    padding-bottom: @padding-x;
    padding-top: @padding-x;
  }

  &-cell {
    .text-size(12);
    display: flex;
    padding-bottom: @padding-sm;
    &:last-child {
      padding-bottom: 0;
    }
    &__label {
      font-weight: bold;
      margin-right: 17px;
    }

    &__content {
      flex: 1;
      display: flex;
      &__name {
        max-width: 138px;
        .mx_multline_overwrite(1);
      }
    }
    &__right {
      color: @gray-4;
      display: flex;
      align-items: center;
      &__num {
        margin-right: @padding-xs;
      }
    }
  }

  &-label {
    display: inline-flex;
    align-items: center;
    color: @black;
    .text-size(12);
    // padding-left: 20px;
    // background: url(~@/assets/images/sericeGoods/label.png) no-repeat left center;
    // background-size: 16px 16px;
    margin-right: @padding-xs;
  }

  &-describe {
    .text-size(12);
    color: @gray-4;
  }
}
</style>
