<!--
 ****--@date 2024-06-07 09:52:38
 ****--@author yizhiyang
 ****--@description 首页门店
-->
<template>
  <view class="home-store">
    <view class="image-box">
      <base-img
        mode="scaleToFill"
        :src="item.logo"
        borderRadius="8rpx 8rpx 0 0"
        height="212rpx"
        width="100%"
      ></base-img>
      <view class="mask-box">
        <view class="fl-flex f-s-20">
          <u-icon name="map" color="#fff" size="12"></u-icon>
          <view class="u-m-l-10">{{ item.distance | mToKm }}</view>
          <view class="mask-line"></view>
          <view>养车</view>
        </view>
      </view>
    </view>
    <view class="home-list">
      <view class="fl-flex fl-self-center">
        <view class="f-s-28 text-primary text-cut-1 u-m-b-14">{{ item.name }}</view>
        <view class="u-m-t-12">
          <u--image
            src="/static/pages/home/home-hot.png"
            width="24rpx"
            height="24rpx"
            v-if="isType === 'hot'"
          ></u--image>
        </view>
      </view>
      <view>
        <view class="fl-flex" v-if="item.score">
          <u-rate v-model="value" active-color="#ffa033" readonly allowHalf gutter="1"></u-rate>
          <view class="f-s-24 text-999 u-m-l-5">({{ item.score }})</view>
        </view>
        <view class="f-s-26" style="color: #ffa033" v-else> 暂无评分</view>
      </view>
      <view class="u-m-t-14 f-s-24 text-999 text-cut-1">{{ item.address }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    isType: {
      type: String,
      default: '',
    },
  },
  filters: {
    mToKm(v) {
      return (Number(v) / 1000).toFixed(2) + 'km';
    },
  },
  data() {
    return {
      value: 3,
    };
  },
  created() {
    this.value = this.item.score;
  },
};
</script>

<style lang="scss" scoped>
.home-store {
  background-color: #ffffff;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
  .image-box {
    position: relative;
    height: 212rpx;

    .mask-box {
      width: 100%;
      height: 44rpx;
      line-height: 44rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: #ffffff;
      box-sizing: border-box;
      padding-left: 12px;
      .mask-line {
        width: 2rpx;
        height: 20rpx;
        background: #ffffff;
        margin: 12rpx;
      }
    }
  }
  .home-list {
    padding: 16rpx;
  }
}
</style>
