<!--
 ****--@date 2024-06-07 09:51:07
 ****--@author yizhiyang
 ****--@description 主要用于门店列表
-->

<template>
  <view class="base-list">
    <view
      class="fl-flex list-main"
      v-for="(item, index) in list"
      :key="index"
      @click="handelList(item)"
    >
      <base-img
        :src="item.logo"
        mode="aspectFill"
        borderRadius="8rpx"
        height="164rpx"
        width="164rpx"
      ></base-img>
      <view class="u-m-l-16" style="flex: 1">
        <view class="f-s-30 text-primary text-bold u-m-b-4" style="line-height: 48rpx">
          {{ item.name }}
        </view>
        <view class="u-m-b-6">
          <view class="fl-flex">
            <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">(1)</view>
          </view>
          <!-- <view class="f-s-26" style="color: #ffa033">暂无评分</view> -->
          <!-- <view class="f-s-26 text-999">暂无评分</view> -->
        </view>
        <view class="fl-flex fl-align-center">
          <view class="list-text">综合租车</view>
          <view class="list-line"></view>
          <view class="list-text">销量110</view>
        </view>
        <view class="fl-flex fl-justify-between">
          <view class="fl-flex">
            <view class="f-s-24" style="color: #39bd66">营业中</view>
            <!-- <view class="f-s-24 text-999">已休息</view> -->
            <view class="f-s-24 text-333 u-m-l-12">08:00 ~ 18:00</view>
          </view>
          <view class="f-s-24 text-999" v-if="item.distance">{{ item.distance | mToKm }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    borderRadius: {
      type: String,
      default: '',
    },
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      value: 4,
    };
  },
  filters: {
    mToKm(v) {
      return (Number(v) / 1000).toFixed(2) + 'km';
    },
  },
  methods: {
    handelList(item) {
      this.$emit('click', item);
      console.log(item, 'oooooooooo');
    },
  },
};
</script>

<style lang="scss" scoped>
.base-list {
  .list-main {
    padding: 16rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background-color: #fff;
  }
  .list-text {
    font-size: 24rpx;
    color: #666666;
  }
  .list-line {
    height: 22rpx;
    width: 1rpx;
    background-color: #666666;
    margin: 12rpx;
  }
}
</style>