<template>
  <van-popup ref="popup" position="bottom" v-model:show="show">
    <div class="popup-content border-box pt-12 pl-12 pr-12">
      <div class="header flex flex-items-center pb-12">
        <div class="title flex-full text-center font-size-17 color-000 font-500 ml-24">更多服务</div>
        <van-icon name="cross" size="24" color="#CACFD8" @click="close" />
      </div>

      <div class="list bg-white border-box pl-20 pr-20">
        <div class="item border-box border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
          <div class="flex flex-items-center flex-justify-center">
            <img v-if="item.icon" class="left" :src="item.icon" />
            <div class="center flex-full">
              <div class="font-size-16 color-000 line-height-24 font-500">
                {{ item.title }}
              </div>
              <div class="font-size-12 color-A3A3A3 line-height-16">
                {{ item.content }}
              </div>
            </div>
            <div class="right border-box font-size-12 color-white line-height-16" @click="handleClick(item)">
              {{ item.btnText }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref } from "vue";
import { Command } from "@/constants/ChatModel";
import { SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
import { checkToken } from "@/hooks/useGoLogin";
import { emitter } from '@/utils/events'

const popup = ref(null);

const list = ref([
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/ksyd.png",
    title: "快速预定",
    content: "预定门票、房间、餐食",
    btnText: "去预定",
    type: Command.quickBooking,
    path: "/pages-quick/list",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/tsfx.png",
    title: "探索发现",
    content: "发现景点、活动、特色内容",
    btnText: "去探索",
    type: Command.discovery,
    path: "",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
    title: "我的订单",
    content: "查看门票、住宿、餐饮等订单",
    btnText: "去查看",
    type: Command.myOrder,
    path: "/pages-order/order/list",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
    title: "呼叫服务",
    content: "查看呼叫服务、进度与处理情况",
    btnText: "去查看",
    type: Command.myWorkOrder,
    path: "/pages-service/order/list",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
    title: "反馈意见",
    content: "提交使用问题、建议与需求",
    btnText: "去反馈",
    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().then(() => {
      uni.navigateTo({ url: item.path });
    });

    return;
  }

  emitter.emit(SEND_MESSAGE_COMMAND_TYPE, item);
};

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

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
