<template>
  <uni-popup ref="popup" type="bottom" :safe-area="false">
    <view class="popup-content pt-[12px] pl-[12px] pr-[12px]">
      <view class="header flex items-center pb-[12px]">
        <view class="title flex-1 text-center text-[17px] text-[#000000] font-[500] ml-[24px]">更多服务</view>
        <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
      </view>

      <view class="list bg-white pl-[20px] pr-[20px]">
        <view class="item border-bottom pt-[20px] pb-[20px]" v-for="(item, index) in list" :key="index">
          <view class="flex items-center justify-center">
            <image v-if="item.icon" class="left" :src="item.icon" />
            <view class="center flex-1">
              <view class="text-[16px] text-[#000000] leading-[24px] font-[500]">
                {{ item.title }}
              </view>
              <view class="text-[12px] text-[#a3a3a3] leading-[16px]">
                {{ item.content }}
              </view>
            </view>
            <view class="right text-[12px] text-white leading-[16px]" @click="handleClick(item)">
              {{ item.btnText }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";
import { Command } from "@/model/ChatModel";
import { SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
import { checkToken } from "@/hooks/useGoLogin";

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: "",
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
    title: "呼叫热线",
    content: "我们将全程为您提供细致解答与暖心服务。",
    btnText: "去呼叫",
    type: Command.callMobileService,
    path: "",
  },
]);

const open = () => {
  popup.value && popup.value.open();
};

const close = () => {
  popup.value && popup.value.close();
};

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

  if (item.type === Command.callMobileService) {
    uni.$emit('SHOW_CALL_MOBILE_POPUP');
    return;
  }

  if (item.path) {
    checkToken().then(() => {
      uni.navigateTo({ url: item.path });
    });

    return;
  }

  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
};

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

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