<template>
  <div>
    <ModuleTitle :title="commodityDTO.title" />
    <div class="flex flex-row overflow-x-auto overflow-y-hidden my-1">
      <div v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
        <div class="relative flex flex-col items-start w-[188px] bg-white rounded-[10px] mr-2 pb-3"
          @click="placeOrderHandle(item)">
          <img class="w-[188px] h-[114px] rounded-[10px] object-cover shrink-0" :src="item.commodityIcon" />
          <div class="pt-[10px] px-3 pb-0 flex flex-col justify-between items-start w-full flex-1 overflow-hidden">
            <div class="flex items-start flex-col w-full">
              <span
                class="text-base font-bold text-[#222] w-full line-clamp-2 overflow-hidden text-ellipsis leading-[1.4] max-h-[2.8em]">
                {{ item.commodityName }}
              </span>
              <div class="flex flex-row items-start py-1.5 w-full" v-for="tag in item.commodityTradeRuleList"
                :key="tag">
                <span class="text-[#ff6600] text-[10px] rounded px-1.5 ml-[2px] border border-[#ff6600]">
                  {{ tag }}
                </span>
              </div>
            </div>
            <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
              <div v-if="index < 3" class="text-[13px] text-[#888] mt-[2px]">· {{ serviceItem.serviceTitle }}</div>
            </template>
            <div class="flex items-center justify-between mt-2 w-full">
              <div>
                <span class="text-[#ff6600] text-[11px] font-normal">￥</span>
                <span class="text-[#ff6600] text-base font-bold">{{ item.commodityPrice }}</span>
                <span class="text-[11px] text-[#888] font-normal ml-[2px]">/{{ item.stockUnitLabel }}</span>
              </div>

              <span class="bg-[#ff6600] text-white text-[15px] rounded-[20px] px-[18px] h-8 leading-[32px]">{{
                t("home.quickBooking.order") }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router'
import { checkToken } from "@/hooks/useGoLogin";
import ModuleTitle from "@/components/ModuleTitle/index.vue";

const { t } = useI18n();

const props = defineProps({
  commodityDTO: {
    type: Object,
    default: {},
  },
});

const router = useRouter()

// 去下单
const placeOrderHandle = (item) => {
  const target = {
    name: 'goods',
    query: {
      commodityId: item.commodityId,
    }
  };

  checkToken(target).then(() => {
    router.push(target)
  });
};
</script>
