<template>
  <div
    class="flex flex-row gap-x-[9px] ml-[12px] py-[8px] overflow-x-auto whitespace-nowrap scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
    <div class="border border-white bg-white/50 px-3 py-1 rounded-[50px] flex flex-row items-center"
      v-for="(item, index) in itemList" :key="index" @click="sendReply(item)">
      <div class="flex items-center justify-center">
        <img v-if="item.icon" class="w-5 h-5 mr-[2px]" :src="item.icon" />
        <span class="text-[14px] text-[#0ccd58] leading-5">
          {{ item.title }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router'
import { emitter } from '@/utils/events'
import { Command } from "@/constants/ChatModel";
import { SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
import { checkToken } from "@/hooks/useGoLogin";

const router = useRouter();
const { t } = useI18n();
const itemList = computed(() => [
  {
    icon: "",
    title: t("home.quickAccess.quickBooking"),
    type: Command.quickBooking,
  },
  // {
  //   icon: "",
  //   title: t("home.quickAccess.myOrder"),
  //   type: Command.myOrder,
  // },
  {
    icon: "",
    title: t("home.quickAccess.service"),
    type: Command.callServiceCard,
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
    title: t("home.quickAccess.more"),
    type: Command.more,
  },
]);

const sendReply = (item) => {
  // 更多服务
  if (item.type === Command.more) {
    emitter.emit("SHOW_MORE_POPUP");
    return;
  }

  // 快速预定
  if (item.type === Command.quickBooking) {
    checkToken({ name: "quick" }).then(() => {
      router.push({ name: "quick" });
    });
    return;
  }

  // 我的订单
  if (item.type === Command.myOrder) {
    checkToken({ name: "orderList" }).then(() => {
      router.push({ name: "orderList" });
    });
    return;
  }

  // 呼叫服务
  emitter.emit(SEND_MESSAGE_COMMAND_TYPE, item);
};
</script>
