<script setup lang="ts">
import {thumbnailImg} from "@/utils/utils";
const props = defineProps<{
  list: any[];
}>();
const { t } = useI18n();

function handleClickFood(item: any) {
  uni.navigateTo({
    url: '/pages-store/pages/store/index?id=' + item.id
  })
}
</script>

<template>
  <scroll-view scroll-x="true">
    <view class="flex">
      <view class="w-30rpx shrink-0"></view>
      <template v-for="(item, index) in list" :key="item?.id ?? index">
        <view @click="handleClickFood(item)" :class="[index === 0 ? '' : 'ml-28rpx']">
          <image :src="thumbnailImg(item?.shopImages?.split(',')[0])" class="w-448rpx h-252rpx rounded-24rpx mb-20rpx bg-common" mode="aspectFill"></image>
          <text class="text-30rpx lh-30rpx text-#333 font-500 line-clamp-1">{{ item?.merchantName }}</text>
          <view v-if="+item.deliveryService === 1" class="text-#CE7138 text-24rpx lh-24rpx mt-12rpx">
            {{ t('pages-store.store.tips5') }} ${{ item.deliveryFee }}{{ t('pages-store.store.start') }}
          </view>
          <view class="text-24rpx lh-24rpx flex items-center mt-12rpx">
            <text class="text-#333 font-500">{{ item.rating }}</text>
            <image src="@img/chef/124.png" class="w-24rpx h-24rpx mx-4rpx mt-2rpx"></image>
            <text class="text-#7D7D7D">({{ item.commentCount }}) • {{ item.deliveryTime }} {{ Number(item.deliveryTime) === 1 ? t('common.day') : t('common.days') }}</text>
          </view>
        </view>
      </template>
      <view class="w-30rpx shrink-0 op-0">1</view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">

</style>