<template>
  <view class="store-item" @click.stop="storeItem(item)">
    <image
      class="store-img"
      v-if="item.image"
      :src="item.image + '?x-oss-process=style/w_150'"
      mode="aspectFill"
    />
    <view class="store-content">
      <view class="store-name content-item one-row">
        {{ item.businessName }}
      </view>
      <view class="store-rate content-item">
        <uni-rate size="16" active-color="#FF8000" :value="item.average || 0" readonly/>
        <text class="rate-num">{{ item.average || 0 }}分 </text>
      </view>
      <view class="store-time content-item one-row">
        <text class="iconfont icon">&#xe61c;</text>
        <text>{{ item.businessHours }}</text>
      </view>
      <view class="store-location content-item one-row">
        <text class="iconfont icon">&#xe990;</text>
        <text>{{ item.address }}</text>
      </view>
    </view>
    <view class="iconfont store-next"> &#xe671; </view>
  </view>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["click"]);
const storeItem = (item) => {
  emit("click", item);
};
</script>

<style lang="scss" scoped>
.store-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  box-sizing: border-box;

  .store-img {
    flex-shrink: 0;
    width: 210rpx;
    height: 210rpx;
    border-radius: 10rpx;
  }

  .store-next {
    flex-shrink: 0;
    font-size: 40rpx;
    color: #666666;
  }

  .store-content {
    flex: 1;
    overflow: hidden;
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;
    .content-item {
      padding: 4rpx 0;
      white-space: normal; /* Default value */
      /* or */
      white-space: pre-wrap;
    }
    .store-name {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #1a1a1a;
    }

    .store-rate {
      display: flex;
      align-items: center;

      .rate-num {
        padding-left: 5rpx;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #666666;
      }
    }

    .store-time,
    .store-location {
      color: #999999;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #999999;

      .icon {
        color: #999999;
        flex-shrink: 0;
      }
      .address {
        flex: 1;
      }
    }
  }
}
</style>
