<template>
  <div class="Si-card Store">
    <service-title title="适用门店" :right-text="`${storeInfo.storeCnt}家门店适用`" />
    <div class="Store-info">
      <div class="Store-info-top">
        <div class="Store-info-left">
          <div class="Store-info-title">
            <cr-image :src="storeInfo.shopIcon" width="16px" height="16px" />
            <div class="Store-info-title__text">{{ storeInfo.name }}</div>
          </div>
          <div class="Store-info-time">营业时间：{{ storeInfo.businessHours }}</div>
        </div>
        <div class="Store-info-phone">
          <cr-image width="20px" height="20px" src="@/assets/images/sericeGoods/phone.png" />
        </div>
      </div>
      <cr-divider :hairline="true" />
      <div class="Store-info-address">
        <cr-image src="@/assets/images/sericeGoods/distance.png" width="9px" height="12px" />
        <span v-if="storeInfo.distance" class="Store-info-address__distance">
          {{ storeInfo.distance }}
        </span>
        <div class="Store-info-address__text">{{ storeInfo.address }}</div>
        <cr-icon type="arrow" size="14px" color="#999999" />
      </div>
    </div>
  </div>
</template>

<script>
import ServiceTitle from '../../components/serviceTitle.vue';
export default {
  components: {
    ServiceTitle
  },
  props: {
    storeInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.Store {
  &-info {
    margin-top: @padding-lg;
    @{deep} .cr-divider {
      border-color: @grey-border;
      margin-top: @padding-xs;
      margin-bottom: @padding-sm;
    }
    &-top {
      display: flex;
    }

    &-left {
      flex: 1;
    }

    &-title {
      display: flex;
      align-items: center;
      &__text {
        flex: 1;
        .text-size(14);
        font-weight: bold;
        margin-left: @padding-unit;
        .mx_multline_overwrite(1);
      }
    }

    &-time {
      .text-size(12);
      padding-top: @padding-unit;
    }

    &-phone {
      padding-left: @padding-sm;
      padding-right: @padding-xs + 2px;
      .border-divider-y();
    }
    &-address {
      .text-size(12);
      display: flex;
      align-items: center;

      &__distance {
        margin-left: 2px;
        margin-right: 12px;
      }
      &__text {
        flex: 1;
        padding-left: 5px;
      }
    }
  }
}
</style>
