<template>
  <van-popup ref="popup" position="bottom" v-model:show="show" style="background: transparent;">
    <div class="popup-content bg-[#f5f7fa] rounded-t-[15px] pt-[12px] pl-[12px] pr-[12px] pb-[30px]">
      <div class="flex items-center pb-[12px]">
        <div class="title flex-1 text-center text-[17px] text-black font-medium ml-[24px]">
          {{ t("home.moreService.title") }}
        </div>
        <van-icon name="cross" size="24" color="#CACFD8" @click="close" />
      </div>

      <div class="rounded-[15px] bg-white pl-[20px] pr-[20px]">
        <div class="gap-[20px] border-b border-ink-200 pt-[20px] pb-[20px] last:border-b-0"
          v-for="(item, index) in list" :key="index">
          <div class="flex items-center justify-center">
            <img v-if="item.icon" class="w-[24px] h-[24px] mr-[12px]" :src="item.icon" />
            <div class="center flex-1">
              <div class="text-[16px] text-black leading-[24px] font-medium">
                {{ item.title }}
              </div>
              <div class="text-[12px] color-A3A3A3 leading-[16px]">
                {{ item.content }}
              </div>
            </div>
            <div
              class="min-w-[60px] bg-[#0ccd58] rounded-[5px] p-[6px] text-[12px] text-center text-white leading-[16px]"
              @click="handleClick(item)">
              {{ item.btnText }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

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

const router = useRouter();
const { t } = useI18n();
const popup = ref(null);

const list = computed(() => [
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/ksyd.png",
    title: t("home.moreService.quickBooking.title"),
    content: t("home.moreService.quickBooking.content"),
    btnText: t("home.moreService.quickBooking.button"),
    type: Command.quickBooking,
    path: "/quick",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/tsfx.png",
    title: t("home.moreService.discovery.title"),
    content: t("home.moreService.discovery.content"),
    btnText: t("home.moreService.discovery.button"),
    type: Command.discovery,
    path: "",
  },
  // {
  //   icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
  //   title: t("home.moreService.myOrder.title"),
  //   content: t("home.moreService.myOrder.content"),
  //   btnText: t("home.moreService.myOrder.button"),
  //   type: Command.myOrder,
  //   path: "/order",
  // },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
    title: t("home.moreService.service.title"),
    content: t("home.moreService.service.content"),
    btnText: t("home.moreService.service.button"),
    type: Command.myWorkOrder,
    path: "/service",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
    title: t("home.moreService.feedback.title"),
    content: t("home.moreService.feedback.content"),
    btnText: t("home.moreService.feedback.button"),
    type: Command.feedbackCard,
    path: "",
  },
]);

const show = ref(false);

const open = () => {
  show.value = true;
};

const close = () => {
  show.value = false;
};

const handleClick = (item) => {
  close();

  if (item.path) {
    checkToken({ path: item.path }).then(() => {
      router.push({ path: item.path });
    });

    return;
  }

  emitter.emit(SEND_MESSAGE_COMMAND_TYPE, item);
};

// 接收更多服务
emitter.on("SHOW_MORE_POPUP", () => {
  open();
});
</script>
