<script setup lang="ts">
const props = defineProps<{
  list: object[];
}>();
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 items-center">
      <view class="shrink-0 w-30rpx"></view>
      <template v-for="(item, index) in list" :key="index">
        <view @click="handleClickFood(item)"  :class="[index === 0 ? '' : 'ml-42rpx']">
          <image
              class="w-156rpx h-156rpx rounded-50% bg-common"
              :src="item.logo"
              mode="aspectFill"
          ></image>
          <view class="w-156rpx text-center line-clamp-1 text-#333 text-28rpx lh-28rpx mt-12rpx font-500">
            {{ item.merchantName }}
          </view>
          <view v-if="+item.deliveryService === 1" class="mt-12rpx text-center text-24rpx lh-24rpx text-#7D7D7D">{{ item.deliveryTime }}{{ t('common.minutes') }}</view>
        </view>
      </template>
      <view class="shrink-0 w-30rpx op-0">1</view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
</style>
