101-aiv1/src/views/HomeView.vue

<script setup>
import {
  ref,
  reactive,
  onMounted,
  watch,
  nextTick,
  onBeforeUnmount,
} from "vue";
import { useRoute } from "vue-router";
// VR
import "aframe";
// i18n
import { useI18n } from "vue-i18n";
// Axios
import axios from "axios";
// Moment
import moment from "moment";
// Animate
import "animate.css";
// Swiper
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
// Recorder
import Recorder from "recorder-core";
import "recorder-core/src/engine/mp3";
import "recorder-core/src/engine/mp3-engine";
// QR Code
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from "vue-qrcode-reader";
// Components
import Navbar from "../components/Navbar.vue";
import TicketPurchase from "../components/TicketPurchase.vue";
// 測試
import videojs from "video.js";
import "video.js/dist/video-js.css";
// import 'videojs-vr/dist/videojs-vr.css';
import "videojs-vr/dist/videojs-vr.css";
import "videojs-vr"; // 確保正確引入 VR 插件

let vrVideo = ref(null);
let player;
onMounted(() => {
  if (vrVideo.value) {
    // console.log(player.plugins_);
    player = videojs(vrVideo.value, {
      controls: true,
      autoplay: true,
      loop: true,
      // plugins: {
      //   vr: {
      //     projection: '360', // 確保設置為 360
      //     debug: true // 打開 debug 以便於檢查問題
      //   }
      // }
    });
    console.log(player.plugins_);
    if (!player.mediainfo) {
      player.mediainfo = {};
    }

    if (!player.mediainfo.projection) {
      player.mediainfo.projection = "360";
    }

    // player.vr({ projection: "AUTO" });

    // 檢查插件是否成功初始化
    player.ready(() => {
      console.log("Video.js is ready with VR plugin");
    });
  }
});

onBeforeUnmount(() => {
  if (player) {
    player.dispose();
  }
});

const { t, locale } = useI18n();

const route = useRoute();
const routeParam = ref(null);

let qrCodeDialog = ref(false);
let qrCodeLoading = ref(true);
let location = ref(""); // 當前位置

// QR Code 掃描
function onDetect(detectedCodes) {
  console.log("detectedCodes", detectedCodes);

  const url = new URL(detectedCodes[0].rawValue);
  location.value = url.searchParams.get("location");

  let val;
  let lang = getLang();

  if (lang === "en") {
    switch (location.value) {
      case "B1 鼎泰豐":
        val = "b1 Din Tai Fung";
        break;
      case "B1 中環":
        val = "b1 Centre";
        break;
      case "B1 2號電梯":
        val = "b1 Elevator No.2";
        break;
      case "B1 4號電梯":
        val = "b1 Elevator No.4";
        break;
      case "B1 3號電梯":
        val = "b1 Elevator No.3";
        break;
      case "1F 信義環":
        val = "1f South Xinyi";
        break;
      case "1F 3號電梯":
        val = "1f Elevator No.3";
        break;
      case "2F 3號電梯":
        val = "2f Elevator No.3";
        break;
      case "88F 觀景台":
        val = "88f Observatory";
        break;
      case "89F 觀景台":
        val = "89f Observatory";
        break;

      default:
        break;
    }
  } else if (lang === "ch") {
    val = location.value;
  }

  if (location.value && location.value !== "") {
    qrCodeDialog.value = false;
    messages.value.push({
      label: "text",
      author: "ai",
      body: `${t("current_location")}：${val}`,
    });

    changeLocation(location.value); // 選擇導覽位置
  } else {
    qrCodeDialog.value = false;
    messages.value.push({
      label: "text",
      author: "ai",
      body: "讀取錯誤，請重新掃描。",
    });
  }
}

// 判斷 vue-qrcode-reader 是否加載完成
function onInit(capabilities) {
  qrCodeLoading.value = false;
}

onMounted(() => {
  // 取得當前路由參數
  routeParam.value = route.path.replace("/", "");
  console.log("網址參數", routeParam.value);
  window.addEventListener("resize", handleResize);
});

const userMessage = ref("");
let modules = [Navigation, Autoplay]; // Swiper

// AI 客服回覆訊息
let messages = ref([]);

watch(messages.value, (val) => {
  console.log("messages", val);
  scrollToBottom();
  updateMenuHeight();
});

let ad = ref({}); // 彈跳視窗廣告
let qaQuery = reactive([]);

const chatArea = ref(null); // 對話框

// 滾動到對話框底部
const scrollToBottom = () => {
  setTimeout(() => {
    // chatArea.value.scrollTop = chatArea.value.scrollHeight;

    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: "smooth", // 平滑滾動
    });
  }, 100);

  // let list = messages.value;
  // const item = list[list.length - 1];
  // if (item.label === "text") {
  //   setTimeout(() => {
  //     chatArea.value.scrollTop = chatArea.value.scrollHeight;
  //   }, 100);
  // }
};

// 對話選項(按鈕)
function setBtnValue(val) {
  console.log("value", val);
  userMessage.value = val;
  sendMessage("text");
}

// 傳送訊息 (如 type="text" 代表為純文字訊息，不需語音回覆)
async function sendMessage(type = "") {
  if (userMessage.value === "") {
    return;
  }

  console.log("sendMessage", userMessage.value);
  qaQuery.push(userMessage.value);

  let url = "https://api.itri-101-5g.com/v1/qa/";

  try {
    // 使用者訊息
    messages.value.push({
      label: "text",
      body: userMessage.value,
      author: "user",
    });

    userMessage.value = "";
    // hideMenu.value = true;

    axios
      .post(
        url,
        new URLSearchParams({
          query: JSON.stringify(qaQuery), // 使用者問句
          language: selectLang.value, // 語系
          category: assignCategory.value, // 類別
          subtype: assignSubtype.value, // 詳細類別(非必填)
          from_loc: "", // 定位點
          to_loc: "", // 導覽點
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }
      )
      .then((response) => {
        // if (showAnchor.value) {
        //   getVideo(response.data);
        // }

        // AI 客服回傳訊息
        messages.value.push({
          label: "text",
          author: "ai",
          body: response.data.response,
        });

        console.log("response", response);

        if (type !== "text") {
          handleTTS(response.data.response); // 取得語音回覆
        }

        if (response.data.data.length) {
          let info = {
            buttonList: [], // 按鈕
            ticketList: [], // 票券
          };
          let labelContent;

          response.data.data.map((item) => {
            if (item.type === "button") {
              console.log("按鈕");
              info.buttonList.push(item);
              labelContent = "ticket";
            } else if (item.type === "ticket") {
              console.log("票");
              info.ticketList.push(item);
              labelContent = "ticket";
            } else if (item.type === "brand") {
              console.log("品牌");
              info.ticketList.push(item);
              labelContent = "brand";
            } else if (
              item.type === "lost_property" ||
              item.type === "complain"
            ) {
              labelContent = "contact-form";
            }
          });

          console.log("info", info);
          console.log("labelContent", labelContent);

          setTimeout(() => {
            if (labelContent !== "contact-form") {
              messages.value.push({
                label: labelContent,
                author: "ai",
                body: info,
              });
            } else {
              messages.value.push({
                label: "contact-form",
                author: "ai",
                body: "",
              });
            }
          }, 10);
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });

    console.log("messages.value", messages.value);
  } catch (error) {
    console.log("error", error);
  }
}

// let isTTSVideo = ref(false); // API 是否回傳影片
// let ttsVideo = ref(null); // 影片 dom
// let ttsVideoSrc = ref(""); // 影片路徑
// let videoPause = ref(false); // 暫停按鈕
let hideMenu = ref(false); // 底部選單
let showInput = ref(false); // 輸入框

// 取得 mp4
// async function getVideo(data) {
//   console.log("getVideo data", data);
//   // let url = `https://cmm.ai:9101/tts?message=${data.response}&type=101`;
//   let url = `https://cmm.ai:9001/tts?message=${data.response}&type=101`;

//   try {
//     const response = await axios.post(url);
//     console.log("response", response);

//     if (response.status === 200) {
//       video.value.pause();
//       videoPause.value = false;

//       // ttsVideoSrc.value = `https://cmm.ai:9101/${response.data.url}`;
//       // ttsVideoSrc.value = `https://cmm.ai:9001/${response.data.url}`;
//       ttsVideoSrc.value = response.data.url;
//       await ttsVideo.value.load();
//       await ttsVideo.value.play();

//       // AI 客服回傳訊息
//       // messages.value.splice(-1, 1);

//       messages.value.push({
//         type: data.type,
//         body: data.response,
//         author: data.author,
//       });

//       // isTTSVideo.value = true;

//       // 判斷影片是否結束
//       const videoPromise = new Promise((resolve, reject) => {
//         ttsVideo.value.onended = () => resolve(true);
//       });

//       const videoCompleted = await videoPromise; // 影片結束

//       if (videoCompleted) {
//         console.log("影片結束");
//         // isTTSVideo.value = false; // 切換為初始影片
//         hideAnchorPrologue.value = false; // 切換開場白影片
//       }

//       console.log("videoCompleted", videoCompleted);
//     }
//   } catch (error) {
//     console.log("error", error);
//   }
// }

// 影片暫停/播放
// function handleVideo(isTTS) {
//   if (videoPause.value) {
//     if (isTTS) {
//       ttsVideo.value.play();
//     } else {
//       video.value.play();
//     }
//     videoPause.value = false;
//   } else {
//     if (isTTS) {
//       ttsVideo.value.pause();
//     } else {
//       video.value.pause();
//     }
//     videoPause.value = true;
//   }
// }

function getLang() {
  let lang = localStorage.getItem("lang");
  let langVal = "";

  switch (lang) {
    case "zh-tw":
      langVal = "ch";
      break;
    case "en-us":
      langVal = "en";
      break;

    default:
      break;
  }

  return langVal;
}

let showAd = ref(false);

// 取得廣告
async function setAd() {
  let lang = getLang();
  console.log("lang", lang);
  let url = `https://cmm.ai:9101/ad?language=${lang}`;

  try {
    const response = await axios.get(url);
    console.log("Ad response", response);

    ad.value = response.data.data.body;
    console.log("Ad", ad.value);
  } catch (error) {
    console.log("error", error);
  }
}

let video = ref(null);

function videoPlay() {
  video.value.load();
  video.value.play();
}

// 底部選單
const menu = ref(null);
const menuHeight = ref(0);

// let isRotate = ref(false);
let isLanguagePage = ref(true);
let selectLang = ref("");
let chatLoading = ref(true);

watch(isLanguagePage, (val) => {
  if (!val) {
    setTimeout(updateMenuHeight, 500);
  }
});

const handleResize = () => {
  updateMenuHeight();
};

// 取得底部選單高度
const updateMenuHeight = () => {
  nextTick(() => {
    if (menu.value) {
      menuHeight.value = menu.value.clientHeight;
      chatLoading.value = false;
    }
  });
};

function chooseLang(lang) {
  console.log("選擇語言：", lang);
  selectLang.value = lang;
  isLanguagePage.value = false;
  locale.value = lang; // i18n locale
  localStorage.setItem("lang", lang);

  messages.value.push({
    label: "text",
    author: "ai",
    body: t("prologue"),
  });

  messages.value.push({
    label: "text",
    author: "ai",
    body: t("service"),
  });

  // 判斷語言修改 title
  const language = localStorage.getItem("lang") || "zh-tw";
  console.log("language", language);
  if (language === "zh-tw") {
    document.title = "New 台北101 AI智能客服";
  } else if (language === "en-us") {
    document.title = "New Taipei 101 AI Intelligent Customer Service";
  }

  setAd();
  handleClick();

  console.log(" messages.value", messages.value);
  setTimeout(() => {
    showAd.value = true;
    // videoPlay();
  }, 500);
}

let assignSubtype = ref("");
let assignCategory = ref("");
let assignCategoryIndex = ref(null);

// 美食伴手禮
let diningList = reactive([
  {
    value: "特色/高空餐廳",
    text: "food_souvenirs_info.signature",
  },
  {
    value: "輕食/CAFÉ",
    text: "food_souvenirs_info.light",
  },
  {
    value: "美食街",
    text: "food_souvenirs_info.courts",
  },
  {
    value: "伴手禮",
    text: "food_souvenirs_info.souvenir",
  },
]);

// 秘境花園觀景台
let observationList = reactive([
  {
    value: "線上購票",
    text: "observatory_info.tickets.title",
  },
  {
    value: "參觀資訊",
    text: "observatory_info.visitor.title",
  },
  // {
  //   value: "實境景色",
  //   text: "observatory_info.view",
  // },
  {
    value: "前往秘境花園觀景台",
    text: "observatory_info.garden",
  },
]);

// 購物及優惠
let shoppingList = reactive([
  {
    value: "購物品牌查詢",
    text: "shopping_discounts_info.brands.title",
  },
  {
    value: "國際貴賓卡專屬禮遇",
    text: "shopping_discounts_info.tourist_card.title",
  },
]);

// 購物品牌查詢
let brandList = reactive([
  {
    value: "國際珠寶腕錶",
    text: "shopping_discounts_info.brands.jewely",
  },
  {
    value: "國際精品",
    text: "shopping_discounts_info.brands.boutique",
  },
  {
    value: "美妝保養品",
    text: "shopping_discounts_info.brands.skincare",
  },
  {
    value: "流行服飾",
    text: "shopping_discounts_info.brands.apparel",
  },
  {
    value: "生活居家/3C",
    text: "shopping_discounts_info.brands.lifestyle",
  },
  {
    value: "文化創意",
    text: "shopping_discounts_info.brands.cultural",
  },
  {
    value: "特色品牌",
    text: "shopping_discounts_info.brands.signature",
  },
  {
    value: "館外店家",
    text: "shopping_discounts_info.brands.outside",
  },
]);

// 服務資訊
let serviceList = reactive([
  {
    title: "service_info.business_hours",
    depiction: "service_info.business_hours_1",
  },
  {
    title: "service_info.tax_refund",
    depiction: "service_info.tax_refund_1",
  },
  {
    title: "service_info.toilets",
    depiction: "service_info.toilets_1",
  },
  {
    title: "service_info.charge",
    depiction: "service_info.charge_1",
  },
  // {
  //   title: "AI 天燈",
  //   depiction: "https://cmm.ai/101-postcard/#/skylanternhome",
  // },
]);

// 定位點
let locationList = reactive([
  {
    location: "B1 鼎泰豐", // 編號 1
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "鼎泰豐",
        text: "din_tai_fung",
      },
      {
        value: "捷運",
        text: "metro_station",
      },
      {
        value: "超市",
        text: "supermarket",
      },
      {
        value: "美食街",
        text: "food_court",
      },
      {
        value: "退稅/外幣兌換櫃台",
        text: "tax_refund_currency_exchange",
      },
      {
        value: "計程車乘車處",
        text: "taxi_station",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
      {
        value: "客服(停車折抵)",
        text: "service_counter_parking_discount",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "伴手禮區",
        text: "snackable_souvenirs",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "置物櫃",
        text: "items_and_luggage_storage",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "鼎泰豐",
    //   "捷運",
    //   "超市",
    //   "美食街",
    //   "退稅/外幣兌換櫃台",
    //   "計程車乘車處",
    //   "無障礙廁所",
    //   "客服(停車折抵)",
    //   "哺乳室",
    //   "飲水機",
    //   "伴手禮區",
    //   "廁所",
    //   "置物櫃",
    // ],
  },
  {
    location: "B1 中環", // 編號 2
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "美食街",
        text: "food_court",
      },
      {
        value: "伴手禮區",
        text: "snackable_souvenirs",
      },
      {
        value: "鼎泰豐",
        text: "din_tai_fung",
      },
      {
        value: "捷運",
        text: "metro_station",
      },
      {
        value: "超市",
        text: "supermarket",
      },
      {
        value: "計程車乘車處",
        text: "taxi_station",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "美食街",
    //   "伴手禮區",
    //   "鼎泰豐",
    //   "捷運",
    //   "超市",
    //   "計程車乘車處",
    //   "無障礙廁所",
    // ],
  },
  {
    location: "B1 2號電梯", // 編號 3
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "客服(退稅櫃台/外幣兌換)",
        text: "tax_refund_currency_exchange",
      },
      {
        value: "計程車乘車處",
        text: "taxi_station",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
      {
        value: "超市",
        text: "supermarket",
      },
      {
        value: "鼎泰豐",
        text: "din_tai_fung",
      },
      {
        value: "捷運",
        text: "metro_station",
      },
      {
        value: "伴手禮區",
        text: "snackable_souvenirs",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "置物櫃",
        text: "items_and_luggage_storage",
      },
      {
        value: "美食街",
        text: "food_court",
      },
      {
        value: "客服(停車折抵)",
        text: "service_counter_parking_discount",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "廁所",
        text: "restroom",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "客服(退稅櫃台/外幣兌換)",
    //   "計程車乘車處",
    //   "無障礙廁所",
    //   "超市",
    //   "鼎泰豐",
    //   "捷運",
    //   "伴手禮區",
    //   "廁所",
    //   "置物櫃",
    //   "美食街",
    //   "客服(停車折抵)",
    //   "哺乳室",
    //   "飲水機",
    //   "廁所",
    // ],
  },
  {
    location: "B1 4號電梯", // 編號 4
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "置物櫃",
        text: "items_and_luggage_storage",
      },
      {
        value: "客服(停車折抵)",
        text: "service_counter_parking_discount",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "退稅/外幣兌換櫃台",
        text: "tax_refund_currency_exchange",
      },
      {
        value: "計程車乘車處",
        text: "taxi_station",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
      {
        value: "伴手禮區",
        text: "snackable_souvenirs",
      },
      {
        value: "捷運",
        text: "metro_station",
      },
      {
        value: "鼎泰豐",
        text: "din_tai_fung",
      },
      {
        value: "美食街",
        text: "food_court",
      },
      {
        value: "超市",
        text: "supermarket",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "廁所",
    //   "置物櫃",
    //   "客服(停車折抵)",
    //   "哺乳室",
    //   "飲水機",
    //   "退稅/外幣兌換櫃台",
    //   "計程車乘車處",
    //   "無障礙廁所",
    //   "伴手禮區",
    //   "捷運",
    //   "鼎泰豐",
    //   "美食街",
    //   "超市",
    // ],
  },
  {
    location: "B1 3號電梯", // 編號 5
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
      {
        value: "計程車乘車處",
        text: "taxi_station",
      },
      {
        value: "客服(退稅櫃台/外幣兌換)",
        text: "tax_refund_currency_exchange",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
      {
        value: "置物櫃",
        text: "items_and_luggage_storage",
      },
      {
        value: "客服(停車折抵)",
        text: "service_counter_parking_discount",
      },
      {
        value: "美食街",
        text: "food_court",
      },
      {
        value: "伴手禮區",
        text: "snackable_souvenirs",
      },
      {
        value: "鼎泰豐",
        text: "din_tai_fung",
      },
      {
        value: "捷運",
        text: "metro_station",
      },
      {
        value: "超市",
        text: "supermarket",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "廁所",
    //   "無障礙廁所",
    //   "計程車乘車處",
    //   "客服(退稅櫃台/外幣兌換)",
    //   "飲水機",
    //   "哺乳室",
    //   "置物櫃",
    //   "客服(停車折抵)",
    //   "美食街",
    //   "伴手禮區",
    //   "鼎泰豐",
    //   "捷運",
    //   "超市",
    // ],
  },
  {
    location: "1F 信義環", // 編號 6
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "置物櫃",
        text: "items_and_luggage_storage",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
      {
        value: "客服(停車折抵)",
        text: "service_counter_parking_discount",
      },
      {
        value: "退稅/外幣兌換櫃台",
        text: "tax_refund_currency_exchange",
      },
      {
        value: "伴手禮區",
        text: "snackable_souvenirs",
      },
      {
        value: "美食街",
        text: "food_court",
      },
      {
        value: "捷運",
        text: "metro_station",
      },
      {
        value: "鼎泰豐",
        text: "din_tai_fung",
      },
      {
        value: "超市",
        text: "supermarket",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "廁所",
    //   "ATM",
    //   "置物櫃",
    //   "飲水機",
    //   "無障礙廁所",
    //   "哺乳室",
    //   "客服(停車折抵)",
    //   "退稅/外幣兌換櫃台",
    //   "伴手禮區",
    //   "美食街",
    //   "捷運",
    //   "鼎泰豐",
    //   "超市",
    // ],
  },
  {
    location: "1F 3號電梯", // 編號 7
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "置物櫃",
        text: "items_and_luggage_storage",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
      {
        value: "客服(停車折抵)",
        text: "service_counter_parking_discount",
      },
      {
        value: "退稅/外幣兌換櫃台",
        text: "tax_refund_currency_exchange",
      },
      {
        value: "計程車乘車處",
        text: "taxi_station",
      },
      {
        value: "美食街",
        text: "food_court",
      },
      {
        value: "超市",
        text: "supermarket",
      },
      {
        value: "捷運",
        text: "metro_station",
      },
      {
        value: "伴手禮區",
        text: "snackable_souvenirs",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "廁所",
    //   "置物櫃",
    //   "飲水機",
    //   "無障礙廁所",
    //   "哺乳室",
    //   "客服(停車折抵)",
    //   "退稅/外幣兌換櫃台",
    //   "計程車乘車處",
    //   "美食街",
    //   "超市",
    //   "捷運",
    //   "伴手禮區",
    // ],
  },
  {
    location: "2F 3號電梯", // 編號 8
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "觀景台售票處",
        text: "observatory_ticket_office",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "置物櫃",
        text: "items_and_luggage_storage",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "無障礙廁所",
        text: "accessible_facilities",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
      {
        value: "計程車乘車處",
        text: "taxi_station",
      },
      {
        value: "退稅/外幣兌換櫃台",
        text: "tax_refund_currency_exchange",
      },
      {
        value: "客服(停車折抵)",
        text: "service_counter_parking_discount",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "觀景台售票處",
    //   "廁所",
    //   "置物櫃",
    //   "飲水機",
    //   "無障礙廁所",
    //   "哺乳室",
    //   "計程車乘車處",
    //   "退稅/外幣兌換櫃台",
    //   "客服(停車折抵)",
    // ],
  },
  {
    location: "89F 觀景台", // 編號 9
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "客服",
        text: "service_counter",
      },
      {
        value: "91F戶外區",
        text: "91f_outdoor_area",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "101F排隊處",
        text: "101f_queue",
      },
    ],
    // navigation: [
    //   "景觀餐廳櫃台",
    //   "ATM",
    //   "客服",
    //   "91F戶外區",
    //   "廁所",
    //   "101F排隊處",
    // ],
  },
  {
    location: "88F 觀景台", // 編號 10
    navigation: [
      {
        value: "景觀餐廳櫃台",
        text: "high_rise_restaurant_reception",
      },
      {
        value: "ATM",
        text: "atm",
      },
      {
        value: "廁所",
        text: "restroom",
      },
      {
        value: "飲水機",
        text: "ice_warmed_water_dispenser",
      },
      {
        value: "哺乳室",
        text: "nursing_room",
      },
    ],
    // navigation: ["景觀餐廳櫃台", "ATM", "廁所", "飲水機", "哺乳室"],
  },
]);

// 平面圖
let mapList = reactive([
  {
    title: "B1 平面圖",
  },
  {
    title: "1F 平面圖",
  },
  {
    title: "2F 平面圖",
  },
]);

let assignLocation = ref("當前位置"); // 指定定位點
let assignNavigationList = ref(null); // 指定導覽點列表
// let assignLocationFloor = ref(null); // 指定定位點樓層
// let assignNavigation = ref(null); // 指定導覽點
// let navigationBtn = reactive(["B1", "1F", "2F", "4F", "5F", "89F", "91F"]);

let arVideo = ref(null);
let arVideoDialog = ref(false);

// 取得 AR 導覽影片
async function getArviews(route, text, type = "") {
  let url;
  let lang = getLang();
  console.log("text >>>", text);

  if (type === "garden") {
    console.log("route", route);
    let start;
    // if (route === "B1 鼎泰豐旁 數位屏幕") {
    //   start = "B1 鼎泰豐";
    // } else if (route === "B1 松智藍梯梯廳") {
    //   start = "B1 3號電梯";
    // }

    switch (route) {
      case "B1 鼎泰豐旁 數位屏幕":
        start = "B1 鼎泰豐";
        break;
      case "B1 中環WOW屏幕":
        start = "B1 中環";
        break;
      case "B1 信義橘梯梯廳":
        start = "B1 2號電梯";
        break;
      case "B1 信義綠梯梯廳":
        start = "B1 4號電梯";
        break;
      case "B1 松智藍梯梯廳":
        start = "B1 3號電梯";
        break;
      case "1F 信義綠梯出入口":
        start = "1F 信義環";
        break;
      case "1F 松智梯廳":
        start = "1F 3號電梯";
        break;
      case "2F 松智藍梯梯廳":
        start = "2F 3號電梯";
        break;
      default:
        break;
    }

    url = `https://cmm.ai:9101/arviews?language=${lang}&start=${start}&end=觀景台售票處`;
  } else {
    url = `https://cmm.ai:9101/arviews?language=${lang}&start=${assignLocation.value}&end=${route}`;
  }

  console.log("url", url);

  messages.value.push({
    label: "text",
    author: "ai",
    body: text,
  });

  try {
    const response = await axios.get(url);
    console.log("AR 導覽影片", response);

    messages.value.push({
      label: "ar_views",
      author: "ai",
      body: response.data,
    });
  } catch (error) {
    console.log("error", error);
  }
}

// 取得定位點 & 導覽點
function changeLocation(item) {
  assignLocation.value = item;

  console.log("定位點：", item);

  let assign = locationList.filter((e) => e.location === item);
  console.log("assign", assign);

  assignNavigationList.value = assign[0].navigation;

  // assignLocation.value = item.location;
  // assignNavigationList.value = item.navigation;

  console.log("assignNavigationList.value", assignNavigationList.value);

  messages.value.push({
    label: "text",
    author: "ai",
    body: t("select_navigation_location"),
  });

  messages.value.push({
    label: "navigation",
    author: "ai",
    body: assignNavigationList.value,
  });
}

// 顯示平面圖
function assignMapImg(item) {
  console.log("顯示平面圖 item", item);
  let name;
  if (item.title === "B1 平面圖") {
    name = "All_b1";
  } else if (item.title === "1F 平面圖") {
    name = "All_1";
  } else if (item.title === "2F 平面圖") {
    name = "All_2";
  }

  messages.value.push({
    label: "map_img",
    author: "ai",
    body: name,
  });
}

// 動態引入視頻文件
const videoSources = ref([]); // 開場白影片(中)
const videoSourcesEn = ref([]); // 開場白影片(英)
const videoMuteSources = ref([]); // 點頭影片(靜音)
const videoSpeakSources = ref([]); // 動嘴型影片

const loadVideoSources = async () => {
  // 本地端影片路徑
  // const start1 = await import("@/assets/video/start_1.mp4");
  // const start2 = await import("@/assets/video/start_2.mp4");
  // const mute_1 = await import("@/assets/video/mute_1.mp4");
  // const mute_2 = await import("@/assets/video/mute_2.mp4");
  // const speak_1 = await import("@/assets/video/speak_1.mp4");
  // const speak_2 = await import("@/assets/video/speak_2.mp4");
  // videoSpeakSources.value = [speak_1.default, speak_2.default];

  videoSources.value = [
    "https://cmm.ai/101-ai-chatbot-new/video/start_1.mp4",
    "https://cmm.ai/101-ai-chatbot-new/video/start_2.mp4",
  ];
  videoSourcesEn.value = [
    "https://cmm.ai/101-ai-chatbot-new/video/start_en_1.mp4",
    "https://cmm.ai/101-ai-chatbot-new/video/start_en_2.mp4",
  ];
  videoMuteSources.value = [
    "https://cmm.ai/101-ai-chatbot-new/video/mute_1.mp4",
    "https://cmm.ai/101-ai-chatbot-new/video/mute_2.mp4",
  ];
  videoSpeakSources.value = [
    "https://cmm.ai/101-ai-chatbot-new/video/speak_1.mp4",
    "https://cmm.ai/101-ai-chatbot-new/video/speak_2.mp4",
  ];
};

let videoSrc = ref("");
let hideAnchorPrologue = ref(false); // 顯示開場白 or 點頭影片
let videoIndex = ref(null); // 影片編號

// 選擇類別
async function selectCategory(value, index) {
  assignCategory.value = value;
  assignCategoryIndex.value = index;
  console.log("selectCategory index", assignCategoryIndex.value);
  console.log("selectCategory value", assignCategory.value);

  if (value === "叫出真人客服") {
    showAnchor.value = true;

    if (currentAudio.value && isAudioPlaying.value) {
      // currentAudio.value.addEventListener("ended", onAudioEnded); // 監聽音訊播放結束
      // setTimeout(() => {
      //   video.value.play();
      // }, 0);
      // return;
      handleVoice("pause"); // 暫停音訊
    }

    // 隨機取得影片路徑
    await loadVideoSources();

    // 主播開場白只顯示一次
    if (!hideAnchorPrologue.value) {
      let lang = getLang();
      let sources;

      if (lang === "ch") {
        sources = videoSources.value;
      } else if (lang === "en") {
        sources = videoSourcesEn.value;
      }

      const randomIndex = Math.floor(Math.random() * sources.length);
      videoSrc.value = sources[randomIndex];
      hideAnchorPrologue.value = true;
      videoIndex.value = randomIndex + 1;

      // const randomIndex = Math.floor(Math.random() * videoSources.value.length);
      // videoSrc.value = videoSources.value[randomIndex];
      // hideAnchorPrologue.value = true;
      // videoIndex.value = randomIndex + 1;
    } else {
      const randomIndex = Math.floor(
        Math.random() * videoMuteSources.value.length
      );
      videoSrc.value = videoMuteSources.value[randomIndex];
      videoIndex.value = randomIndex + 1;
    }

    // 播放影片
    setTimeout(() => {
      videoPlay();
    }, 0);

    // const randomIndex = Math.floor(Math.random() * videoSources.value.length);
    // videoSrc.value = videoSources.value[randomIndex];
  }
  //  else if (value === "隱藏真人客服") {
  //   showAnchor.value = false;
  //   video.value.pause();
  //   menuList[0][0].text = "customer_show";
  //   menuList[0][0].value = "叫出真人客服";
  // }
  else if (value === "秘境花園觀景台") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("observatory_info.tickets.purchase"),
    });

    messages.value.push({
      label: "observation_deck",
      author: "ai",
      body: observationList,
    });
  } else if (value === "位置導引") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("qr_code_scan_prompt"),
    });

    // messages.value.push({
    //   label: "map_img",
    //   author: "ai",
    //   body: mapList,
    // });

    messages.value.push({
      label: "location",
      author: "ai",
      body: locationList,
    });
  } else if (value === "美食/伴手禮") {
    // getAd("美食伴手禮");

    messages.value.push({
      label: "text",
      author: "ai",
      body: t("food_souvenirs_info.searching"),
    });

    messages.value.push({
      label: "dining",
      author: "ai",
      body: diningList,
    });
  } else if (value === "購物及優惠") {
    // getAd("購物及優惠");

    messages.value.push({
      label: "shopping",
      author: "ai",
      body: shoppingList,
    });
  } else if (value === "服務資訊") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("service_info.inquiry_prompt"),
    });

    messages.value.push({
      label: "service",
      author: "ai",
      body: serviceList,
    });
  }
}

let secondaryAd = ref({}); // 隨機廣告
let secondaryAdShow = ref(false);

// 取得隨機廣告 (美食伴手禮/購物及優惠)
async function getAd(type) {
  let lang = getLang();
  let url = `https://cmm.ai:9101/ad/${type}?language=${lang}`;

  try {
    const response = await axios.get(url);
    console.log("response", response);
    secondaryAd.value = response.data.data;
    // secondaryAdShow.value = true; // 取消蓋版廣告

    messages.value.push({
      label: "brand",
      author: "ai",
      body: [
        {
          info: response.data.data,
        },
      ],
    });
  } catch (error) {
    console.log("error", error);
  }
}

// 服務資訊回覆
function handleService(title, depiction) {
  messages.value.push({
    label: "text",
    author: "user",
    body: title,
  });

  if (title !== "AI 天燈") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: depiction,
    });
  } else {
    window.location.href = depiction;
    // window.open(depiction, "_blank"); // 另開天燈頁面
  }
}

// 參觀資訊回覆
function handleVisit(title, depiction) {
  messages.value.push({
    label: "text",
    author: "user",
    body: title,
  });

  messages.value.push({
    label: "text",
    author: "ai",
    body: depiction,
  });
}

// 計算使用次數
async function handleClick() {
  let url = "https://cmm.ai:9101/click";
  try {
    const response = await axios.get(url);
    console.log("Click", response);
  } catch (error) {
    console.log("error", error);
  }
}

let langList = reactive([
  {
    lang: "中文",
    value: "zh-tw",
  },
  {
    lang: "English",
    value: "en-us",
  },
  // {
  //   lang: "日本語",
  //   value: "ja-jp",
  // },
  // {
  //   lang: "한국어",
  //   value: "ko-kr",
  // },
]);

const btnList = reactive([
  {
    title: "observation_deck",
    value: "秘境花園觀景台",
  },
  {
    title: "location_guide",
    value: "位置導引",
  },
  {
    title: "food_souvenirs",
    value: "美食伴手禮",
  },
  {
    title: "shopping_discounts",
    value: "購物及優惠",
  },
  {
    title: "service_information",
    value: "服務資訊",
  },
]);

function getImageUrl(name) {
  return new URL(`../assets/img/icon/${name}`, import.meta.url).href;
}

let showAnchor = ref(false); // AI 主播影片
let videoContent = ref(null); // 主播影片區塊

// 動態更改主播區塊位置
// watch(showAnchor, () => {
//   console.log("showAnchor", showAnchor.value);
//   nextTick(() => {
//     changeAnchorTop();
//   });
// });

// watch(hideMenu, () => {
//   nextTick(() => {
//     changeAnchorTop();
//   });
// });

// function changeAnchorTop() {
//   const menuOffsetTop = menu.value.offsetTop;
//   videoContent.value.style.top = `${menuOffsetTop - 170}px`;
// }

const menuList = reactive([
  [
    {
      imgSrc: "素材-05.png",
      text: "customer_show",
      value: "叫出真人客服",
    },
    { imgSrc: "素材-06.png", text: "service_information", value: "服務資訊" },
    { imgSrc: "素材-07.png", text: "shopping_discounts", value: "購物及優惠" },
  ],
  [
    {
      imgSrc: "素材-08.png",
      text: "observation_deck",
      value: "秘境花園觀景台",
    },
    { imgSrc: "素材-09.png", text: "food_souvenirs", value: "美食/伴手禮" },
    { imgSrc: "素材-10.png", text: "location_guide", value: "位置導引" },
  ],
]);

// 美食伴手禮 or 購物及優惠類別篩選
async function findBrand(value) {
  console.log("findBrand", value);

  if (value === "館外店家") {
    value = "館外";
  }

  let lang = getLang();
  let url = `https://cmm.ai:9101/find_brand?keyword=${value}&language=${lang}`;

  try {
    const response = await axios.get(url);
    console.log("response", response);

    // response.data.data.map(
    //   (item) => (item.info.tags = JSON.parse(item.info.tags))
    // );

    messages.value.push({
      label: "brand",
      author: "ai",
      body: response.data.data,
    });

    assignCategoryIndex.value = null;
    assignCategory.value = "";

    // messages.value.push({
    //   label: "text",
    //   author: "ai",
    //   body: "請選擇問題類型：",
    // });

    // messages.value.push({
    //   label: "btn-list",
    //   author: "ai",
    //   body: "",
    // });
  } catch (error) {
    console.log("error", error);
  }
}

// 處理電話格式
// function getPhoneNumber(phoneString) {
//   const parts = phoneString.split("\n");
//   return parts[1];
// }

// 取得線上購票
async function getStaticTickets(type) {
  let url = `https://cmm.ai:9101/static_tickets?is_Chinese=${type}`;

  let info = {
    buttonList: [], // 按鈕
    ticketList: [], // 票券
  };

  try {
    const response = await axios.get(url);
    console.log("線上購票", response.data.result);

    response.data.result.map((item) => info.ticketList.push(item));
    console.log("info", info);

    messages.value.push({
      label: "ticket",
      author: "ai",
      body: info,
    });
  } catch (error) {
    console.log("error", error);
  }
}

// 秘境花園觀景台對話
function handleObservationDialog(value) {
  console.log("value", value);

  if (value === "線上購票") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("observatory_info.tickets.id_card"),
    });

    messages.value.push({
      label: "check",
      author: "ai",
      body: [
        {
          value: "是",
          text: "observatory_info.tickets.yes",
        },
        {
          value: "否",
          text: "observatory_info.tickets.no",
        },
      ],
    });
  } else if (value === "是" || value === "否") {
    if (value === "是") {
      getStaticTickets("1");
    } else if (value === "否") {
      getStaticTickets("0");
    }

    messages.value.push({
      label: "text",
      author: "ai",
      body: t("observatory_info.tickets.ticket_type"),
    });
  } else if (value === "參觀資訊") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("observatory_info.visitor.question"),
    });

    messages.value.push({
      label: "text",
      author: "ai",
      body: t("observatory_info.visitor.faq"),
    });

    messages.value.push({
      label: "visit",
      author: "ai",
      body: visitList,
    });
  } else if (value === "實境景色") {
    // window.location.href = "https://www.youtube.com/watch?v=RVV00FZbeH0";
    window.open("https://www.youtube.com/watch?v=RVV00FZbeH0", "_blank"); // 另開頁面
  } else if (value === "前往秘境花園觀景台") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("select_location"),
    });

    messages.value.push({
      label: "garden_route",
      author: "ai",
      body: gardenRouteList,
      // body: [
      //   "B1 鼎泰豐旁 數位屏幕",
      //   "B1 中環WOW屏幕",
      //   "B1 信義橘梯梯廳",
      //   "B1 信義綠梯梯廳",
      //   "B1 松智藍梯梯廳",
      //   "1F 信義綠梯出入口",
      //   "1F 松智梯廳",
      //   "2F 松智藍梯梯廳",
      // ],
    });
  }
}

let gardenRouteList = reactive([
  {
    value: "B1 鼎泰豐旁 數位屏幕",
    text: "location.b1_din_tai_fung",
  },
  {
    value: "B1 中環WOW屏幕",
    text: "location.b1_centre",
  },
  {
    value: "B1 信義橘梯梯廳",
    text: "location.b1_elevator_no_2",
  },
  {
    value: "B1 信義綠梯梯廳",
    text: "location.b1_elevator_no_4",
  },
  {
    value: "B1 松智藍梯梯廳",
    text: "location.b1_elevator_no_3",
  },
  {
    value: "1F 信義綠梯出入口",
    text: "location.1f_south_xinyi",
  },
  {
    value: "1F 松智梯廳",
    text: "location.1f_elevator_no_3",
  },
  {
    value: "2F 松智藍梯梯廳",
    text: "location.2f_elevator_no_3",
  },
]);

// 購物及優惠對話
function handleShoppingDialog(value) {
  console.log("value", value);

  if (value === "購物品牌查詢") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("shopping_discounts_info.brands.choose"),
    });

    messages.value.push({
      label: "shopping_brand",
      author: "ai",
      body: brandList,
    });
  } else if (value === "國際貴賓卡專屬禮遇") {
    messages.value.push({
      label: "text",
      author: "user",
      body: t("shopping_discounts_info.tourist_card.title"),
    });

    messages.value.push({
      label: "text",
      author: "ai",
      body: t("shopping_discounts_info.tourist_card.content"),
    });
  } else if (value === "參觀資訊") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: t("observatory_info.visitor.question"),
    });

    messages.value.push({
      label: "text",
      author: "ai",
      body: t("observatory_info.visitor.faq"),
    });

    messages.value.push({
      label: "visit",
      author: "ai",
      body: visitList,
    });
  }
}

let visitList = reactive([
  {
    title: "observatory_info.visitor.events_q",
    depiction: "observatory_info.visitor.events_a",
  },
  {
    title: "observatory_info.visitor.ball_q",
    depiction: "observatory_info.visitor.ball_a",
  },
  {
    title: "observatory_info.visitor.accessible_q",
    depiction: "observatory_info.visitor.accessible_a",
  },
]);

// 判斷價格是否包含 $ 符號
function formatPrice(price) {
  if (price === "") {
    return "";
  } else {
    if (price.includes("$")) {
      return price;
    } else {
      return `$${price}`;
    }
  }
}

let currentAudio = ref(null); // 當前音訊
let audioDuration = ref(null); // 音訊秒數

// 文字轉語音 (TTS)
async function handleTTS(message) {
  console.log("handleTTS", message);
  let audioLang; // 音訊語言
  let lang = localStorage.getItem("lang");
  console.log("lang", lang);

  switch (lang) {
    case "zh-tw":
      audioLang = "cmn-TW";
      break;
    case "en-us":
      audioLang = "en-US";
      break;
    case "ja-jp":
      audioLang = "ja-JP";
      break;
    case "ko-kr":
      audioLang = "ko-KR";
      break;
    default:
      break;
  }

  // let url = `https://cmm.ai:9001/ttsTry/tts_try?message=${message}&type=101`;
  let url = `https://cmm.ai:9001/gcp/text-to-speech?language_code=${audioLang}&gender=female`;

  const formData = new FormData();
  formData.append("text", message);

  try {
    const response = await axios.post(url, formData, { responseType: "blob" });
    console.log("TTS response", response);

    const blob = new Blob([response.data], { type: "audio/mp3" });
    const audioUrl = URL.createObjectURL(blob);
    console.log("audioUrl", audioUrl);
    cutVideo();

    // 取得 mp3 音訊秒數
    // audio.addEventListener("loadedmetadata", function () {
    //   audioDuration.value = audio.duration;
    //   cutVideo();
    // });

    // 暫停當前音訊
    if (currentAudio.value) {
      currentAudio.value.pause();
      currentAudio.value.currentTime = 0;
    }

    // 播放音檔
    currentAudio.value = new Audio(audioUrl);
  } catch (error) {
    console.log("error", error);
  }
}

let videoLoading = ref(false);
let isAudioPlaying = ref(false); // 音訊播放狀態

// 取得語音回覆 mp4
async function cutVideo() {
  videoSrc.value = videoSpeakSources.value[videoIndex.value - 1];
  video.value.load(); // 重新讀取影片

  // let duration = Math.floor(audioDuration.value); // 音訊秒數

  // 影片和音訊加載完成後播放
  video.value.oncanplay = () => {
    setTimeout(() => {
      // 監聽音訊播放結束
      currentAudio.value.addEventListener("ended", onAudioEnded);

      // 監聽音訊播放狀態
      currentAudio.value.addEventListener("play", onAudioPlay);
      currentAudio.value.addEventListener("pause", onAudioPause);

      video.value.play(); // 播放影片
      currentAudio.value.currentTime = 0; // 重置時間
      currentAudio.value.play(); // 播放音訊
      isVideoPause.value = true;
      videoLoading.value = false;
    }, 500);
  };

  // video.value.currentTime = 0;
  // video.value.play(); // 播放影片
  // currentAudio.value.play(); // 播放音訊
  // isVideoPause.value = true;
  // videoLoading.value = false;

  // setTimeout(()=>{
  //   video.value.play(); // 播放影片
  // },300)

  // // 監聽音訊播放狀態
  // currentAudio.value.addEventListener("play", onAudioPlay);
  // currentAudio.value.addEventListener("pause", onAudioPause);

  // 監聽音訊播放結束
  // currentAudio.value.addEventListener("ended", onAudioEnded);

  // if (video.value.currentTime >= duration) {
  //   video.value.pause();
  // }
}

// 音訊結束後暫停影片播放
const onAudioEnded = () => {
  video.value.pause();
};

// 判斷音訊是否為播放狀態
const onAudioPlay = () => {
  isAudioPlaying.value = true;
  console.log("isAudioPlaying.value", isAudioPlaying.value);
};

const onAudioPause = () => {
  isAudioPlaying.value = false;
  console.log("isAudioPlaying.value", isAudioPlaying.value);
};

const audioURL = ref(null);
const audioFile = ref(null); // 音訊檔案

let recordTime = ref(0); // 錄音時間
let isRecording = ref(false); // 錄音狀態
let timer;

// 語音轉文字
async function handleAudioToText() {
  isRecording.value = false;
  let audioLang; // 音訊語言
  let lang = localStorage.getItem("lang");
  console.log("lang", lang);

  switch (lang) {
    case "zh-tw":
      audioLang = "cmn-Hant-TW";
      break;
    case "en-us":
      audioLang = "en-US";
      break;
    case "ja-jp":
      audioLang = "ja-JP";
      break;
    case "ko-kr":
      audioLang = "ko-KR";
      break;
    default:
      break;
  }

  // let url = `http://172.104.93.163:9880/whisper/${audioLang}/`;
  // let url = `https://cmm.ai:9001/whisper/${audioLang}/`;
  let url = `https://cmm.ai:9001/gcp/speech-to-text?language_code=${audioLang}`;

  const formData = new FormData();
  formData.append("file", audioFile.value);

  try {
    console.log("audioFile.value", audioFile.value);
    const response = await axios.post(url, formData);
    console.log("語音轉文字 response", response);
    // showAnchor.value = false; // 關閉主播視窗

    userMessage.value = response.data[0];
    // handleTTS(userMessage.value); // 取得語音回覆

    if (response.data[0] && response.data[0] !== "") {
      sendMessage(); // 傳送使用者訊息
    } else {
      if (showAnchor.value) {
        alert("語音辨識有誤，請重新錄製。");
        videoLoading.value = false;
        return;
      } else {
        messages.value.push({
          label: "text",
          author: "user",
          body: "語音辨識有誤，請重新錄製。",
        });
      }
    }
  } catch (error) {
    console.log("error", error);
  }
}

// 語音轉文字 (使用 recorder-core 錄音)
let rec, wave;

// 調用 open 請求錄音權限
let recOpen = function (success) {
  rec = Recorder({
    type: "mp3",
    sampleRate: 16000,
    bitRate: 16,
    onProcess: function (
      buffers,
      powerLevel,
      bufferDuration,
      bufferSampleRate,
      newBufferIdx,
      asyncEnd
    ) {
      wave &&
        wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
    },
  });

  rec.open(
    function () {
      if (Recorder.WaveView) wave = Recorder.WaveView({ elem: ".recwave" });
      success && success();
    },
    function (msg, isUserNotAllow) {
      // 使用者未授權或不支援
      console.log((isUserNotAllow ? "UserNotAllow，" : "") + "無法錄音:" + msg);
    }
  );
};

/** 開始錄音 **/
function recStart() {
  togglePause("pause"); // 暫停影片音訊
  // 需先呼叫 recOpen() 開啟錄音後才能調用 start、stop 方法
  console.log("開始錄音");

  recOpen(function () {
    isRecording.value = true;

    // 開始計時
    timer = setInterval(() => {
      recordTime.value += 1;
    }, 1000);

    rec.start();
  });
}

/** 結束錄音 **/
function recStop() {
  videoLoading.value = true;
  rec.stop(
    function (blob, duration) {
      // 利用 URL 產生本地檔案位址，不用時需要 revokeObjectURL
      let localUrl = (window.URL || webkitURL).createObjectURL(blob); // 該 url 只能本地端使用 (例如給 audio.src 進行播放，或是給 a.href download 進行下載)
      console.log(blob, localUrl, "時長:" + duration + "ms");
      // rec.close(); // 釋放錄音資源 (若不釋放系統或瀏覽器將持續提示在錄音中)
      // rec = null;

      // 將 Blob 轉換為 File 對象
      audioFile.value = new File([blob], "recording.mp3", {
        type: "audio/mp3",
      });

      console.log("audioFile", audioFile.value);

      // 自動播放(測試用)
      // const audio = document.createElement("audio");
      // audio.src = localUrl;
      // audio.autoplay = true;
      // audio
      //   .play()
      //   .then(() => {
      //     console.log("Audio is playing automatically.");
      //   })
      //   .catch((error) => {
      //     console.error("Error playing audio:", error);
      //   });

      rec.close(); // 釋放錄音資源 (若不釋放系統或瀏覽器將持續提示在錄音中)
      rec = null;

      if (recordTime.value !== 0) {
        handleAudioToText(); // 語音轉文字
      } else {
        isRecording.value = false;
      }

      clearInterval(timer); // 清空計時秒數
      recordTime.value = 0;
    },
    function (msg) {
      console.log("錄音失敗：" + msg);
      rec.close(); // 可以透過 stop 方法的第 3 個參數來自動呼叫 close
      rec = null;
    }
  );
}

// 關閉主播視窗 (結束錄音)
function closeRec() {
  video.value.pause();
  isVideoPause.value = true;
  recordTime.value = 0;
  clearInterval(timer); // 清空計時秒數
  if (isRecording.value) {
    recStop();
  }
  showAnchor.value = false;
}

// watch(showAnchor, (val) => {
//   if (val) {
//     isVideoPause.value = true;
//   }
// });

let isVideoPause = ref(true);

// AI 主播影片播放 & 暫停
function togglePause(val) {
  if (val === "pause") {
    // video.value.pause();
    isVideoPause.value = false;

    if (video.value) {
      video.value.pause();
    }
    if (currentAudio.value) {
      currentAudio.value.pause(); // 暫停音訊
    }
  } else {
    // video.value.play();
    isVideoPause.value = true;

    if (video.value) {
      video.value.play();
    }
    if (currentAudio.value) {
      currentAudio.value.play(); // 播放音訊
      currentAudio.value.addEventListener("ended", onAudioEnded);
    }
  }
}

// 語音暫停
function handleVoice(state) {
  if (currentAudio.value) {
    if (state === "pause") {
      currentAudio.value.pause();
      isVideoPause.value = false;
    } else {
      currentAudio.value.play();
      isVideoPause.value = true;
    }
  }
}

// 失物招領表單
let lostForm = ref(null);
let lostDialog = ref(false);

const lostFormData = ref({
  title: "",
  content: "",
  client_name: "",
  gender: "",
  email: "",
  phone: "",
});

const requiredRule = (value) => !!value || "此欄位為必填";
const emailRule = (value) =>
  /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value) ||
  "請輸入有效的電子郵件地址";

// 寄送表單
const submitLostForm = async () => {
  // 驗證表單
  const validationResult = await lostForm.value[0].validate();
  console.log("validationResult", validationResult.valid);

  if (validationResult.valid) {
    let url = "https://cmm.ai:9101/insert_table?type=lost_property";

    try {
      const response = await axios.post(url, lostFormData.value);
      console.log("表單 response", response);

      if (response.data.state === 200) {
        alert(response.data.message);
        lostDialog.value = false;
      }
    } catch (error) {
      console.log("error", error);
    }
  }
};
</script>

<template>
  <Navbar v-if="!isLanguagePage" />

  <div v-if="isLanguagePage" class="lang-content">
    <div class="btn-list">
      <button
        v-for="(item, index) in langList"
        :key="index"
        @click="chooseLang(item.value)"
        class="main-btn"
      >
        {{ item.lang }}
      </button>
    </div>
  </div>

  <div v-else-if="!isLanguagePage && !showAnchor" class="main-containar">
    <!-- <div class="video-content">
      <video
        ref="video"
        preload
        playsinline
        :style="{ opacity: !isTTSVideo ? '1' : '0' }"
      >
        <source src="../assets/video/start_1.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>

      <video
        ref="ttsVideo"
        preload
        playsinline
        :style="{ opacity: isTTSVideo ? '1' : '0' }"
      >
        <source :src="ttsVideoSrc" type="video/mp4" />

        Your browser does not support the video tag.
      </video>

      <button @click="handleVideo(isTTSVideo)" class="control-btn">
        <img v-if="!videoPause" src="../assets/img/pause-button.png" alt="" />
        <img v-else src="../assets/img/play-button.png" alt="" />
      </button>
    </div> -->

    <!-- <Navbar /> -->
    <div v-if="chatLoading" class="d-flex justify-center pt-5">
      <v-progress-circular color="primary" indeterminate></v-progress-circular>
    </div>

    <div
      v-else
      class="chat-content"
      :class="{ 'hide-menu': hideMenu }"
      :style="{ paddingBottom: !hideMenu ? menuHeight + 'px' : '50px' }"
    >
      <!-- <div class="headline">
        <h1>{{ t("title") }}</h1>
        <button @click="isRotate = !isRotate">
          <img
            :class="{ rotate: isRotate }"
            src="../assets/img/angles-up-solid.svg"
            alt=""
          />
        </button>
      </div> -->

      <!-- 購票介面 -->
      <!-- <TicketPurchase />

      <router-link
        to="/brand-search"
        style="color: #fff; text-decoration: none"
        class="ps-3"
        >館外品牌測試頁面</router-link
      > -->

      <!-- 語音暫停按鈕 -->
      <div v-if="currentAudio" class="voice-btn">
        <button v-if="isAudioPlaying" @click="togglePause('pause')">
          <img src="../assets/img/pause-button.png" alt="" />
          <p>語音</p>
        </button>

        <button v-else @click="togglePause('play')">
          <img src="../assets/img/play-button.png" alt="" />
          <p>語音</p>
        </button>
      </div>

      <section
        ref="chatArea"
        class="chat-area"
        :class="{ 'hide-menu': hideMenu }"
      >
        <div v-for="message in messages" class="message-content">
          <p
            v-if="message.label === 'text'"
            class="message animate__animated"
            :class="{
              'message-out': message.author === 'user',
              'message-in': message.author !== 'user',
              animate__fadeInRight: message.author === 'user',
              animate__fadeInLeft: message.author !== 'user',
            }"
            v-html="message.body"
          ></p>

          <!-- 問題類別 -->
          <!-- <div v-else-if="message.label === 'btn-list'">
            <ul class="btn-list">
              <li v-for="(btn, index) in btnList">
                <button
                  :class="{ active: index === assignCategoryIndex }"
                  @click="selectCategory(btn.value, index)"
                >
                  {{ t(`${btn.title}`) }}
                </button>
              </li>
            </ul>
          </div> -->

          <!-- 秘境花園觀景台 -->
          <div v-else-if="message.label === 'observation_deck'">
            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button @click="handleObservationDialog(item.value)">
                    {{ t(item.text) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 確認按鈕 -->
          <div v-else-if="message.label === 'check'">
            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button @click="handleObservationDialog(item.value)">
                    {{ t(item.text) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 參觀資訊 -->
          <div v-else-if="message.label === 'visit'">
            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button
                    @click="handleVisit(t(item.title), t(item.depiction))"
                  >
                    {{ t(item.title) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 位置導引 (定位點) -->
          <div v-else-if="message.label === 'location'">
            <!-- <v-select
              @update:modelValue="changeLocation"
              v-model="assignLocation"
              label="當前位置"
              :items="locationList"
              item-title="location"
              item-value="location"
              variant="outlined"
              density="comfortable"
              hide-details
              color="primary"
              class="mt-5 me-15"
              :menu-props="{ maxHeight: '155px' }"
            ></v-select> -->

            <!-- 掃描 QR Code -->
            <v-btn @click="qrCodeDialog = true" color="primary" class="mt-5">
              {{ t("tap_to_start_scan") }}
            </v-btn>

            <v-dialog v-model="qrCodeDialog" width="auto">
              <v-card max-width="400">
                <v-card-text>
                  <div v-if="qrCodeLoading" class="d-flex justify-center pt-5">
                    <v-progress-circular
                      color="primary"
                      indeterminate
                    ></v-progress-circular>
                  </div>

                  <qrcode-stream
                    v-show="!qrCodeLoading"
                    @detect="onDetect"
                    @camera-on="onInit"
                  ></qrcode-stream>
                </v-card-text>

                <template v-slot:actions>
                  <v-btn class="ms-auto" @click="qrCodeDialog = false">
                    {{ t("close") }}
                  </v-btn>
                </template>
              </v-card>
            </v-dialog>

            <!-- <div class="d-flex">
              <v-menu location="top">
                <template v-slot:activator="{ props }">
                  <v-btn class="mt-5 py-2" color="primary" dark v-bind="props">
                    <p class="me-2">{{ assignLocation }}</p>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      fill="currentColor"
                      class="bi bi-caret-down-fill pt-1"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
                      />
                    </svg>
                  </v-btn>
                </template>

                <v-list style="max-height: 155px; overflow-y: auto">
                  <v-list-item
                    v-for="(item, index) in locationList"
                    :key="index"
                  >
                    <v-list-item-title @click="changeLocation(item)">
                      {{ index + 1 }}. {{ item.location }}
                    </v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>

              <v-menu location="top">
                <template v-slot:activator="{ props }">
                  <v-btn
                    class="ms-5 mt-5 py-2"
                    color="primary"
                    dark
                    v-bind="props"
                  >
                    <p class="me-2">查看平面圖</p>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="18"
                      height="18"
                      fill="currentColor"
                      class="bi bi-caret-down-fill pt-1"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
                      />
                    </svg>
                  </v-btn>
                </template>

                <v-list style="max-height: 155px; overflow-y: auto">
                  <v-list-item v-for="(item, index) in mapList" :key="index">
                    <v-list-item-title @click="assignMapImg(item)">
                      {{ item.title }}
                    </v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </div> -->
          </div>

          <!-- 定位點平面圖 -->
          <!-- <div v-else-if="message.label === 'map_img'" class="mt-5">
            <img
              class="map-img"
              :class="{ 'show-anchor': showAnchor }"
              :src="`../src/assets/img/map/${message.body}.webp`"
              alt=""
            />
          </div> -->

          <!-- 位置導引 (導覽點) -->
          <div v-else-if="message.label === 'navigation'">
            <!-- <v-select
              @update:modelValue="changeLocation"
              v-model="assignNavigation"
              label="導覽位置"
              :items="assignNavigationList"
              variant="solo"
              hide-details
              class="bg-white mt-4"
            ></v-select> -->
            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button
                    @click="
                      getArviews(item.value, t(`navigation.${item.text}`))
                    "
                  >
                    {{ t(`navigation.${item.text}`) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 秘境花園觀景台 -->
          <div v-else-if="message.label === 'garden_route'">
            <!-- <v-select
              @update:modelValue="changeLocation"
              v-model="assignNavigation"
              label="導覽位置"
              :items="assignNavigationList"
              variant="solo"
              hide-details
              class="bg-white mt-4"
            ></v-select> -->
            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button
                    @click="getArviews(item.value, t(item.text), 'garden')"
                  >
                    {{ t(item.text) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- AR 導覽影片 -->
          <div v-else-if="message.label === 'ar_views'">
            <div
              class="message animate__animated"
              :class="{
                'message-out': message.author === 'user',
                'message-in': message.author !== 'user',
                animate__fadeInRight: message.author === 'user',
                animate__fadeInLeft: message.author !== 'user',
              }"
            >
              <p v-html="message.body.words"></p>

              <button @click="arVideoDialog = true" class="ar-link my-3">
                <!-- 進行 AR 導覽 -->
                {{ t("ar_tour") }}
              </button>

              <v-dialog v-model="arVideoDialog" width="auto">
                <v-card class="ar-card">
                  <v-card-title class="mt-3"> AR 導覽 </v-card-title>

                  <v-card-text class="pa-0">
                    <!-- 測試 -->
                    <!-- <video
                      ref="vrVideo"
                      class="video-js vjs-default-skin"
                      controls
                      playsinline
                    >
                      <source :src="message.body.url" type="video/mp4" />
                    </video> -->

                    <a-scene>
                      <a-assets>
                        <video
                          id="vr-video"
                          ref="arVideo"
                          :src="message.body.url"
                          autoplay
                          crossorigin="anonymous"
                          ecrossorigin="anonymous"
                        ></video>
                      </a-assets>

                      <a-sky src="#vr-video"></a-sky>
                    </a-scene>
                  </v-card-text>

                  <template v-slot:actions>
                    <v-btn class="ms-auto" @click="arVideoDialog = false">
                      {{ t("close") }}
                    </v-btn>
                  </template>
                </v-card>
              </v-dialog>
            </div>
          </div>

          <!-- 美食伴手禮 -->
          <div v-else-if="message.label === 'dining'">
            <!-- <ul class="btn-options">
              <li v-for="item in message.body">
                <button @click="findBrand(item.value)">
                  {{ t(item.text) }}
                </button>
              </li>
            </ul> -->

            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button @click="findBrand(item.value)">
                    {{ t(item.text) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 購物及優惠 -->
          <div v-else-if="message.label === 'shopping'">
            <!-- <ul class="btn-options">
              <li v-for="item in message.body">
                <button @click="handleShoppingDialog(item.value)">
                  {{ t(item.text) }}
                </button>
              </li>
            </ul> -->

            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button @click="handleShoppingDialog(item.value)">
                    {{ t(item.text) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 購物品牌查詢 -->
          <div v-else-if="message.label === 'shopping_brand'">
            <!-- <ul class="btn-options">
              <li v-for="item in message.body">
                <button @click="findBrand(item.value)">
                  {{ item.value }}
                </button>
              </li>
            </ul> -->

            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button @click="findBrand(item.value)">
                    {{ t(item.text) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 服務資訊 (常見問題) -->
          <div v-else-if="message.label === 'service'">
            <swiper
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
            >
              <swiper-slide v-for="item in message.body">
                <div class="btn-container">
                  <button
                    @click="handleService(t(item.title), t(item.depiction))"
                  >
                    {{ t(item.title) }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 推薦資訊 -->
          <div v-else-if="message.label === 'ticket'" class="ticket-item">
            <!-- 按鈕 -->
            <swiper
              v-if="message.body.buttonList.length"
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
              :style="{
                marginBottom: message.body.ticketList.length ? '35px' : '0px',
              }"
            >
              <swiper-slide v-for="item in message.body.buttonList">
                <div class="btn-container">
                  <button @click="setBtnValue(item.info.value)">
                    {{ item.info.key }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>

            <!-- 票券 -->
            <swiper
              v-if="message.body.ticketList.length"
              :slidesPerView="1"
              :navigation="true"
              :modules="modules"
              class="ticket-slide"
            >
              <swiper-slide v-for="item in message.body.ticketList">
                <div class="slide-item">
                  <img
                    class="cover-img"
                    :src="item.info.img || item.info.cover_img"
                    alt=""
                  />
                  <section>
                    <h3 class="title">
                      {{ item.info.name || item.info.title }}
                    </h3>
                    <div class="price-info">
                      <span>{{ item.info.floor || item.info.price }}</span>
                      <div class="link-btn">
                        <a
                          :href="item.info.website_url || item.info.url"
                          target="_blank"
                        >
                          {{ t("ctaGoUrl") }}
                        </a>
                      </div>
                    </div>
                    <p class="description">
                      {{ item.info.content || item.info.description }}
                    </p>
                  </section>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <!-- 品牌資訊 -->
          <div v-else-if="message.label === 'brand'" class="ticket-item">
            <!-- 按鈕 -->
            <swiper
              v-if="message.body.buttonList?.length"
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
              class="btn-swiper"
              :style="{
                marginBottom: message.body.ticketList.length ? '35px' : '0px',
              }"
            >
              <swiper-slide v-for="item in message.body.buttonList">
                <div class="btn-container">
                  <button @click="setBtnValue(item.info.value)">
                    {{ item.info.key }}
                  </button>
                </div>
              </swiper-slide>
            </swiper>

            <!-- 票券 -->
            <swiper
              v-if="message.body.ticketList?.length"
              :slidesPerView="1"
              :navigation="true"
              :modules="modules"
              class="ticket-slide"
            >
              <swiper-slide v-for="item in message.body.ticketList">
                <div class="slide-item">
                  <img
                    class="cover-img"
                    :src="item.info.img || item.info.cover_img"
                    alt=""
                  />
                  <section>
                    <h3 class="title">
                      {{ item.info.name || item.info.title }}
                    </h3>
                    <div class="price-info">
                      <span>{{ item.info.floor || item.info.price }}</span>
                      <div class="link-btn">
                        <a
                          :href="item.info.url || item.info.website_url"
                          target="_blank"
                        >
                          {{ t("ctaGoUrl") }}
                        </a>
                      </div>
                    </div>
                    <p class="description">
                      {{ item.info.content || item.info.description }}
                    </p>
                  </section>
                </div>
              </swiper-slide>
            </swiper>

            <!-- 美食/伴手禮 -->
            <swiper
              v-if="message.body.length"
              :slidesPerView="1"
              :navigation="true"
              :modules="modules"
              class="ticket-slide"
            >
              <swiper-slide v-for="item in message.body">
                <div class="slide-item">
                  <img
                    class="cover-img"
                    :src="item.info.img || item.info.cover_img"
                    alt=""
                  />
                  <section>
                    <h3 class="title">
                      {{ item.info.name || item.info.title }}
                    </h3>

                    <div
                      v-if="item.info.phone !== ''"
                      class="d-flex align-center mt-3 mb-5"
                    >
                      <img
                        src="../assets/img/phone-solid.svg"
                        width="15"
                        alt=""
                      />
                      <p class="ms-2">
                        {{ item.info.phone }}
                      </p>
                    </div>

                    <div class="price-info">
                      <span>{{ item.info.floor || item.info.price }}</span>
                      <div class="link-btn">
                        <a :href="item.info.url" target="_blank">
                          {{ t("ctaGoUrl") }}
                        </a>
                      </div>
                    </div>

                    <p class="description">
                      {{ item.info.content || item.info.description }}
                    </p>
                  </section>
                </div>
              </swiper-slide>
            </swiper>

            <!-- <swiper
              v-if="message.body.length"
              :slidesPerView="'auto'"
              :spaceBetween="20"
              :modules="modules"
            >
              <swiper-slide v-for="item in message.body">
                <img
                  class="cover-img"
                  :src="item.info.img || item.info.cover_img"
                  alt=""
                />
                <section>
                  <h3 class="title">{{ item.info.name || item.info.title }}</h3>

                  <div
                    v-if="item.info.phone !== ''"
                    class="d-flex align-center mt-3 mb-5"
                  >
                    <img
                      src="../assets/img/phone-solid.svg"
                      width="15"
                      alt=""
                    />
                    <p class="ms-2">
                      {{ getPhoneNumber(item.info.phone) }}
                    </p>
                  </div>

                  <div class="price-info">
                    <span>{{ item.info.floor || item.info.price }}</span>
                    <div class="link-btn">
                      <a :href="item.info.url" target="_blank">
                        {{ t("ctaGoUrl") }}
                      </a>
                    </div>
                  </div>

                  <p class="description">
                    {{ item.info.content || item.info.description }}
                  </p>
                </section>
              </swiper-slide>
            </swiper> -->
          </div>

          <!-- 推薦資訊 -->
          <div v-else-if="message.label === 'recommend'" class="recommend-item">
            <img class="cover-img" :src="message.body.cover_img" alt="" />
            <section>
              <h3 class="title">{{ message.body.title }}</h3>
              <p class="description">{{ message.body.description }}</p>
              <div class="link-btn">
                <a
                  :href="message.body.store_info_url || message.body.url"
                  target="_blank"
                >
                  {{ t("ctaBuyNow") }}
                </a>
                <a :href="message.body.website_url" target="_blank"> 官網 </a>
              </div>

              <p class="date">{{ message.body.date }} 限時搶購</p>
            </section>
          </div>

          <!-- 店家資訊 -->
          <div v-else-if="message.label === 'store'" class="store-item">
            <p class="headline">店家資訊</p>
            <div class="cover-img">
              <img :src="message.body.cover_img" alt="" />
              <h3 class="title">{{ message.body.title }}</h3>
            </div>
            <section>
              <div class="info">
                <p>
                  <img
                    src="../assets/img/location-dot-solid.svg"
                    width="15"
                    alt=""
                  />
                  {{ message.body.location }}
                </p>
                <p>
                  <img src="../assets/img/phone-solid.svg" width="15" alt="" />
                  {{ message.body.contact }}
                </p>
              </div>
              <p class="description">{{ message.body.description }}</p>
            </section>
          </div>

          <!-- 套票資訊 -->
          <div v-else-if="message.label === 'ticket'" class="ticket-item">
            <img class="cover-img" :src="message.body.cover_img" alt="" />
            <section>
              <h3 class="title">{{ message.body.title }}</h3>
              <div class="link-btn">
                <a :href="message.body.store_info_url" target="_blank">
                  線上預約
                </a>
              </div>
              <p class="description">{{ message.body.description }}</p>
              <span class="price-item">{{ message.body.price }}</span>
            </section>
          </div>

          <!-- 聯絡我們 -->
          <div v-else-if="message.label === 'contact-form'">
            <v-dialog v-model="lostDialog" max-width="600">
              <template v-slot:activator="{ props: activatorProps }">
                <v-btn
                  text="填寫表單"
                  color="primary"
                  class="mt-5"
                  v-bind="activatorProps"
                ></v-btn>
              </template>

              <v-card class="lost-item">
                <v-card-title class="mt-3 ms-3"> 聯絡我們 </v-card-title>

                <v-form
                  ref="lostForm"
                  lazy-validation
                  @submit.prevent="submitLostForm"
                >
                  <v-card-text>
                    <p class="mb-5">
                      為加快為您服務或有其他問題，您可撥打客服電話：02-8101-8800<br />
                      (國際電話+886 2 8101-8800)，將有專人協助您；<br />
                      或於下方填寫聯絡資料及留言，我們將盡快為您處理。
                    </p>
                    <v-text-field
                      v-model="lostFormData.title"
                      :rules="[requiredRule]"
                      label="標題 *"
                      required
                    ></v-text-field>

                    <v-text-field
                      v-model="lostFormData.content"
                      :rules="[requiredRule]"
                      label="內容 *"
                      required
                      placeholder="請詳述說明，我們將盡快回覆您，您最多可輸入 1,000 字元"
                    ></v-text-field>

                    <v-text-field
                      v-model="lostFormData.client_name"
                      :rules="[requiredRule]"
                      label="姓名 *"
                      required
                    ></v-text-field>

                    <v-text-field
                      v-model="lostFormData.gender"
                      :rules="[requiredRule]"
                      label="性別 *"
                      required
                    ></v-text-field>

                    <v-text-field
                      v-model="lostFormData.email"
                      :rules="[requiredRule, emailRule]"
                      label="電子郵件 *"
                      required
                    ></v-text-field>

                    <v-text-field
                      v-model="lostFormData.phone"
                      :rules="[requiredRule]"
                      label="聯絡電話 *"
                      required
                    ></v-text-field>

                    <section class="mt-5">
                      <strong
                        >台北 101個人資料蒐集、處理及利用告知事項：</strong
                      >

                      <p>
                        台北金融大樓股份有限公司（即「台北101」）基於客戶服務及業務聯繫(特定目的代號090消費者、客戶管理與服務)及其他相關業務(181其他經營合於營業登記項目或組織章程所定之業務)，故有必要蒐集、處理或利用相關個人資料，請您詳閱。
                      </p>

                      <p>
                        基於前項目的蒐集之資料包含姓名、聯絡方式、性別(個人資料類別代號C001、C011、C132)等實際蒐集之個人資料，台北101將依前項特定目的存續期間，辦理紙本及電子化資料保存，並以非全自動化方式進行資料處理，且僅於臺灣地區之台北101營業範圍內進行特定目的內利用，除有法令規定或主管機關要求，或為答覆您的詢問而需提供商品或服務之合作夥伴共同處理外，台北101不會將資料提供給其他第三方或跨國境進行處理或利用。
                      </p>

                      <p>
                        依據不同法令適用規定，就台北101保有您的個人資料，您可行使下列權利：
                      </p>

                      <ol>
                        <li>
                          除有法令規定之例外情形外，得向台北101查詢、請求閱覽或請求製給複製本，惟台北101得依法令及實際狀況酌收必要成本費用。
                        </li>
                        <li>
                          向台北101請求補充或更正您的個人資料，惟需應適當釋明其原因及事實。
                        </li>
                        <li>
                          若台北101違反法令規定蒐集、處理或利用個人資料，得依法令規定向台北101請求停止繼續蒐集、處理或利用您的個人資料。
                        </li>
                        <li>
                          若個人資料正確性有爭議者，得向台北101請求停止處理或利用您的個人資料，惟因執行業務所必須並註明其爭議或經您書面同意者，不在此限。
                        </li>
                        <li>
                          依法令規定，個人資料蒐集之特定目的消失、期限屆滿、受法令拘束要求、您撤回同意、反對台北101繼續處理時，得向台北101請求刪除、停止處理或利用您的個人資料，惟因台北101因執行業務、履行雙方契約關係所必須、履行法定義務要求或經您書面同意者，不在此限。
                        </li>
                        <li>
                          若您針對資料的正確性或處理方式提出疑義、反對台北101繼續處理、台北101非法處理、特定目的消失或保存期間屆滿時，台北101於進行法律訴訟、待完成法令適用釐清、查證等作業期間，仍需持續保存，您可要求台北101限制資料的處理；若台北101基於合法利益或公共利益處理您的個人資料，您亦有提出拒絕(異議)之權利。
                        </li>
                        <li>
                          您可依法令適用之不同，將台北101基於履行契約、您同意處理或台北101以自動化方式處理的個人資料，並以您提供的資料為限，以機器可讀之格式，指定傳輸至其他機關(構)。
                        </li>
                        <li>
                          若處理之依據為您明確表示同意之前提下進行蒐集、處理或利用，您可撤回您的同意，惟不影響您撤回同意前台北101處理個資之合法性。
                        </li>
                      </ol>

                      <p>
                        若您如欲行使上述各項法定權利、了解如何行使之方式，或有任何個人資料相關問題，得向台北101客服(電話：02-8101-8800；電子郵件：mallservice@tfc101.com.tw）詢問、於台北101官方網站【聯絡我們】提出詢問，或連繫台北101隱私保護官（EMAIL：dpo@tfc101.com.tw），隱私權及資訊安全政策請詳台北101網站。您另有向個人資料保護法之主管機關「個人資料保護委員會」申訴之權利。
                      </p>

                      <p>
                        您可自由選擇是否提供相關個人資料及類別，惟您拒絕提供之個人資料及類別，如是辦理業務審核或作業所必需，或為成立雙方契約關係或法令要求之資料，台北101可能無法進行必要之業務審核或作業而無法提供您相關服務或無法提供較佳之服務，敬請見諒。（2024.06修訂）
                      </p>
                    </section>
                  </v-card-text>

                  <v-divider></v-divider>

                  <v-card-actions class="py-5">
                    <v-spacer></v-spacer>

                    <v-btn
                      text="取消"
                      variant="plain"
                      @click="lostDialog = false"
                    ></v-btn>

                    <v-btn
                      type="submit"
                      color="primary"
                      text="確認送出"
                      variant="tonal"
                    >
                    </v-btn>

                    <!-- <v-btn
                    color="primary"
                    text="確認送出"
                    variant="tonal"
                    @click="dialog = false"
                  ></v-btn> -->
                  </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </div>
        </div>

        <!-- 對話輸入框 -->
        <!-- <form
          @submit.prevent="sendMessage('out')"
          class="chat-inputs"
          :class="{ 'd-none': !hideMenu }"
        >
          <button @click="hideMenu = false" class="menu-btn">
            <img src="../assets/img/icon/素材-02.png" alt="" width="50" />
          </button>

          <input
            v-model="userMessage"
            type="text"
            placeholder="Type a message..."
          />
          <button type="submit" class="submit">
            <img width="20" src="../assets/img/paper-plane-solid.svg" alt="" />
          </button>
        </form> -->
      </section>

      <!-- 廣告輪播 -->
      <!-- <div class="slider-content">
        <swiper
          :slidesPerView="1"
          :autoplay="{
            delay: 5000,
            disableOnInteraction: false,
          }"
          :modules="modules"
        >
          <swiper-slide>
            <img src="../assets/img/banner-1.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/img/banner-2.jpg" alt="" />
          </swiper-slide>
        </swiper>
      </div> -->

      <!-- AI 主播影片 -->
      <!-- <div
        ref="videoContent"
        v-show="showAnchor"
        class="video-content"
        :class="{ 'video-down': hideMenu }"
      >
        <div v-show="!isTTSVideo">
          <video ref="video" preload playsinline>
            <source src="../assets/video/start_1.mp4" type="video/mp4" />
            Your browser does not support the video tag.
          </video>
        </div>

        <div v-show="isTTSVideo">
          <video ref="ttsVideo" preload playsinline>
            <source :src="ttsVideoSrc" type="video/mp4" />

            Your browser does not support the video tag.
          </video>
        </div>
      </div> -->
    </div>

    <!-- 底部選單 -->
    <div ref="menu" class="menu">
      <!-- AI 主播影片 -->
      <!-- <div
        v-show="showAnchor"
        class="video-content"
        :class="{ 'video-down': hideMenu }"
      >
        <div v-show="!isTTSVideo">
          <video ref="video" preload playsinline>
            <source src="../assets/video/start_1.mp4" type="video/mp4" />
            Your browser does not support the video tag.
          </video>
        </div>

        <div v-show="isTTSVideo">
          <video ref="ttsVideo" preload playsinline>
            <source
              :src="`https://cmm.ai:9001/${ttsVideoSrc}`"
              type="video/mp4"
            />

            Your browser does not support the video tag.
          </video>
        </div>
      </div> -->

      <div class="menu-table" :class="{ 'hide-table': hideMenu }">
        <table class="mt-3">
          <tbody>
            <tr v-for="(row, rowIndex) in menuList" :key="rowIndex">
              <td v-for="(item, itemIndex) in row" :key="itemIndex">
                <button @click="selectCategory(item.value, itemIndex)">
                  <img :src="getImageUrl(item.imgSrc)" alt="" class="icon" />
                  <p>{{ t(`${item.text}`) }}</p>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- <table class="mt-3">
        <tbody>
          <tr v-for="(row, rowIndex) in menuList" :key="rowIndex">
            <td v-for="(item, itemIndex) in row" :key="itemIndex">
              <button @click="selectCategory(item.value, itemIndex)">
                <img :src="getImageUrl(item.imgSrc)" alt="" class="icon" />
                <p>{{ t(`${item.text}`) }}</p>
              </button>
            </td>
          </tr>
        </tbody>
      </table> -->

      <div class="d-flex align-center position-relative">
        <div class="position-absolute">
          <button
            v-if="!showInput"
            @click="
              hideMenu = true;
              showInput = true;
            "
            class="ms-3 pt-1"
          >
            <img src="../assets/img/icon/素材-04.png" alt="" width="35" />
          </button>

          <button
            v-else
            @click="
              hideMenu = false;
              showInput = false;
            "
          >
            <img
              src="../assets/img/icon/素材-02.png"
              alt=""
              width="50"
              class="pt-2"
            />
          </button>
        </div>

        <div class="w-100 d-flex align-center justify-center">
          <button
            v-if="!showInput"
            @click="
              hideMenu = true;
              showInput = true;
            "
            class="d-flex align-center question-btn"
          >
            <img
              class="me-2"
              src="../assets/img/icon/素材-03.png"
              alt=""
              width="45"
            />
            {{ t("question") }}
          </button>

          <!-- 對話輸入框 -->
          <form
            v-else
            @submit.prevent="sendMessage('text')"
            class="chat-inputs"
            :class="{ 'd-none': !showInput }"
          >
            <!-- <button @click="hideMenu = false" class="menu-btn">
              <img src="../assets/img/icon/素材-02.png" alt="" width="50" />
            </button> -->

            <input
              v-model="userMessage"
              type="text"
              placeholder="Type a message..."
            />
            <button type="submit" class="submit">
              <img
                width="20"
                src="../assets/img/paper-plane-solid.svg"
                alt=""
              />
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- AI 主播語音轉文字 -->
  <div v-else class="anchor-voice">
    <div v-show="showAnchor" class="video-content">
      <div>
        <video ref="video" preload playsinline>
          <source :src="videoSrc" type="video/mp4" />
          <!-- <source src="../assets/video/start_1.mp4" type="video/mp4" /> -->
          Your browser does not support the video tag.
        </video>

        <div v-if="videoLoading" class="video-progress">
          <v-progress-circular
            color="primary"
            indeterminate
          ></v-progress-circular>
        </div>
      </div>

      <!-- <div v-show="isTTSVideo">
        <video ref="ttsVideo" preload playsinline>
          <source
            :src="` ${ttsVideoSrc}`"
            type="video/mp4"
          />

          Your browser does not support the video tag.
        </video>
      </div> -->
    </div>

    <div class="control-item">
      <!-- <p class="text-center">連接中…</p> -->

      <div class="d-flex flex-column align-center">
        <audio v-if="audioURL" :src="audioURL" controls></audio>
        <p
          v-if="!isRecording"
          class="mb-3 text-center"
          v-html="t('system_construction')"
        ></p>
        <!-- <p v-if="!isRecording" class="mb-3">
          {{ t("tap_to_record") }}
        </p> -->
        <p v-else class="mb-3">錄音中：{{ recordTime }} 秒</p>
        <!-- 錄音按鈕 -->
        <!-- <v-btn
          v-if="!isRecording"
          @click="recStart"
          icon="mdi-circle"
          size="large"
        >
          <v-icon icon="mdi-circle" color="red" size="large"></v-icon>
        </v-btn> -->

        <v-btn
          v-else
          @click="recStop"
          icon="mdi-circle"
          size="large"
          color="success"
        >
          <v-icon icon="mdi-square" size="large"></v-icon>
        </v-btn>
      </div>

      <div class="d-flex justify-space-between mt-3 mx-10">
        <!-- 暫停按鈕 -->
        <v-btn
          v-if="isVideoPause"
          @click="togglePause('pause')"
          icon="mdi-pause"
          size="large"
          color="grey-darken-3"
        ></v-btn>

        <v-btn
          v-else
          @click="togglePause('play')"
          icon="mdi-play"
          size="large"
          color="grey-darken-3"
        ></v-btn>

        <!-- 關閉按鈕 -->
        <v-btn
          @click="closeRec()"
          icon="mdi-close-thick"
          size="large"
          color="red"
        ></v-btn>
      </div>
    </div>
  </div>

  <!-- 主要廣告 -->
  <v-dialog v-model="showAd">
    <div class="ad-content">
      <button @click="showAd = false" class="close-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="28"
          height="28"
          fill="currentColor"
          class="bi bi-x-circle"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"
          />
          <path
            d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
          />
        </svg>
      </button>

      <img class="cover-img" :src="ad.cover_img" alt="" />
      <section>
        <h2 class="title">{{ ad.title }}</h2>
        <span></span>
        <p v-html="ad.description"></p>

        <div v-if="ad.included.length" class="product">
          <p>訂單內含商品</p>
          <ul>
            <li v-for="(product, index) in ad.included" :key="index">
              {{ product }}
            </li>
          </ul>
        </div>

        <div v-if="ad.branch.length" class="branch">
          <p>分店資訊</p>
          <ul>
            <li v-for="(name, index) in ad.branch" :key="index">
              {{ name }}
            </li>
          </ul>
        </div>

        <!-- <p class="date">{{ item.body.date }}</p> -->

        <span v-if="ad.location !== ''" class="info justify-end">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 384 512"
          >
            <path
              d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
            />
          </svg>
          <p>{{ ad.location }}</p>
        </span>
      </section>
    </div>
  </v-dialog>

  <!-- 隨機廣告 -->
  <v-dialog v-model="secondaryAdShow">
    <div class="ad-content">
      <button @click="secondaryAdShow = false" class="close-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="28"
          height="28"
          fill="currentColor"
          class="bi bi-x-circle"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"
          />
          <path
            d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
          />
        </svg>
      </button>

      <img class="cover-img" :src="secondaryAd.img" alt="" />
      <section>
        <h2 class="title">{{ secondaryAd.name }}</h2>

        <span class="price">
          <p>{{ formatPrice(secondaryAd.price) }}</p>
          <a :href="secondaryAd.url">前往官網</a>
        </span>

        <p class="mb-5" v-html="secondaryAd.content"></p>

        <span v-if="secondaryAd.phone !== ''" class="info">
          <img
            src="../assets/img/phone-solid.svg"
            width="15"
            alt=""
            style="
              filter: invert(50%) sepia(21%) saturate(1061%) hue-rotate(348deg)
                brightness(96%) contrast(92%);
            "
          />
          <p class="ms-1">{{ secondaryAd.phone }}</p>
        </span>

        <span v-if="secondaryAd.address !== ''" class="info">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 384 512"
            class="mt-1"
          >
            <path
              d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
            />
          </svg>
          <p>{{ secondaryAd.address }}</p>
        </span>
      </section>
    </div>
  </v-dialog>

  <!-- <div
    v-show="showAd"
    v-for="(item, index) in ad"
    :key="index"
    class="ad-content"
  >
    <div>
      <button @click="showAd = false" class="close-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="28"
          height="28"
          fill="currentColor"
          class="bi bi-x-circle"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"
          />
          <path
            d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
          />
        </svg>
      </button>
      <img class="cover-img" :src="item.body.cover_img" alt="" />
      <section>
        <h2 class="title">{{ item.body.title }}</h2>
        <span></span>
        <p>
          {{ item.body.description }}
        </p>

        <div v-if="item.body.included.length" class="product">
          <p>訂單內含商品</p>
          <ul>
            <li v-for="(product, index) in item.body.included" :key="index">
              {{ product }}
            </li>
          </ul>
        </div>

        <div v-if="item.body.branch.length" class="branch">
          <p>分店資訊</p>
          <ul>
            <li v-for="(name, index) in item.body.branch" :key="index">
              {{ name }}
            </li>
          </ul>
        </div>

        <span v-if="item.body.location !== ''" class="map">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 384 512"
          >
            <path
              d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
            />
          </svg>
          <p>{{ item.body.location }}</p>
        </span>
      </section>
    </div>
  </div> -->
</template>

<style lang="scss">
.main-btn {
  padding: 16px 70px;
  font-size: 22px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  letter-spacing: 2px;
  color: white;
  background-color: var(--main-color);
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    background-color: #c19c75;
  }
}

.lang-content {
  width: 100%;
  height: 100vh;
  padding: 0 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: multiply;
  background-image: url("@/assets/img/banner.jpg");
  background-size: cover;
  background-position: center center;

  .main-btn {
    margin-bottom: 40px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .btn-list {
    max-width: 400px;
    display: flex;
    flex-direction: column;
  }
}

.main-containar {
  width: 100%;
  background-color: var(--sub-color);
  // height: 150vh;
  // min-height: -webkit-fill-available;
  // display: flex;
  // flex-direction: column;
  // padding-bottom: 70vh;
  // min-height: 100%;
  // overflow-x: hidden;
  // overflow-y: scroll;

  .video-content {
    width: 25vw;
    position: absolute;
    right: -5px;
    top: -45vw;

    @media (max-width: 360px) {
      width: 22vw;
      top: -40vw;
    }

    video {
      // position: fixed;
      // top: 50px;
      // left: 0;
      // right: 0;
      // z-index: 10;
      width: 100%;
      height: auto;
    }

    .control-btn {
      width: 33px;
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      z-index: 50;
      top: 70px;
      right: 7px;
      background: var(--main-color);
      border: none;
      border-radius: 100px;

      img {
        width: 25px;
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
          brightness(103%) contrast(103%); // 改成白色
      }
    }
  }

  .chat-content {
    width: 100%;
    position: relative;
    z-index: 200;
    letter-spacing: 1px;
    background-color: var(--sub-color);

    &.hide-menu {
      min-height: 90vh;
    }

    .headline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 25px;
      border-radius: 15px 15px 0 0;
      background-color: var(--main-color);

      h1 {
        font-size: 1.125rem;
        font-weight: 500;
        color: white;

        @media (max-width: 375px) {
          font-size: 0.875rem;
        }
      }

      button {
        padding-top: 3px;
        display: flex;
        align-items: center;
        border: none;
        background-color: transparent;
        cursor: pointer;

        img {
          width: 25px;
          height: 20px;
          transition: all 0.3s;
          transform: rotate(0deg);

          &.rotate {
            transform: rotate(180deg);
          }
        }
      }
    }

    .chat-area {
      // display: flex;
      // flex-direction: column;
      min-height: 60vh;
      background: var(--sub-color);
      padding: 0.5em 1em 1.5em;

      .btn-list {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        list-style: none;

        button {
          margin-right: 15px;
          margin-bottom: 15px;
          padding: 5px 15px;
          color: white;
          border: 2px solid white;
          letter-spacing: 2px;
          font-weight: bold;
          text-shadow: 1px 1px 1px #939393;

          &.active {
            color: var(--sub-color);
            background-color: white;
            text-shadow: none;
          }
        }
      }
    }

    .message-content {
      display: flex;
      flex-direction: column;
      // margin-top: 20px;

      .message {
        max-width: 45%;
        border-radius: 20px;
        padding: 0.8em 1.2em;
        white-space: pre-line;

        &:first-child {
          margin-top: 0;
        }

        @media (max-width: 600px) {
          max-width: 75%;
          font-size: 0.875em;
        }

        &.message-out {
          margin-left: auto;
          background: var(--bg-grey);
          color: white;
        }

        &.message-in {
          margin-right: auto;
          background: #f1f0f0;
          color: black;
        }

        &.message-in,
        &.message-out {
          margin-top: 20px;
        }
      }
    }

    .branch {
      ul,
      li,
      p {
        margin: 10px 0;
        font-size: 14px;
      }
    }

    .recommend-item {
      width: 350px;
      border-radius: 10px;
      background-color: white;
    }

    .recommend-item,
    .ticket-item {
      .cover-img {
        width: 100%;
        height: 22.5vh;
        object-fit: contain;
        overflow: hidden;
        border-radius: 10px 10px 0 0;
      }

      section {
        padding: 15px 25px;
        letter-spacing: 1px;

        .title {
          margin-bottom: 0;
          font-weight: 600;
          font-size: 1.25rem;
          text-align: left;
          // 超過則省略
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          line-break: after-white-space;
        }

        .description {
          line-height: 1.8;
          // text-align: justify;
          font-size: 0.875rem;
        }

        .date {
          color: #646464;
          font-size: 0.875rem;
          text-align: center;
        }
      }

      .link-btn {
        display: flex;
        justify-content: center;
        a {
          display: block;
          width: 100%;
          max-width: 200px;
          margin: 25px 3px;
          padding: 8px;
          text-align: center;
          border-radius: 20px;
          color: white;
          background-color: var(--main-color);
          text-decoration: none;
          transition: all 0.3s;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }

    .store-item {
      width: 350px;

      .cover-img {
        position: relative;
        margin-bottom: -5px;

        img {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }

        .title {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
          font-size: 1.25rem;
          letter-spacing: 2px;
          text-shadow: 2px 2px 4px #333;
        }
      }

      .headline {
        color: white;
        justify-content: center;
      }

      section {
        padding: 20px;
        letter-spacing: 1px;
        border-radius: 0 0 10px 10px;
        background-color: white;

        .info {
          margin-bottom: 15px;
          p {
            display: flex;
            align-items: center;
            img {
              margin-right: 10px;
            }

            &:last-child {
              margin-top: 3px;
            }
          }
        }
      }
    }

    .ticket-item {
      width: 100%;
      margin-top: 20px;

      h3 {
        margin-bottom: 10px;
        text-align: center;
      }

      .ticket-slide {
        width: 90%;
        position: relative;

        .slide-item {
          max-width: 70vw;
          border-radius: 10px;
          background-color: white;
        }

        .swiper-button-prev {
          display: none;
        }
      }

      .title,
      .description {
        // 超過則省略
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        // -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-break: after-white-space;
      }

      .title {
        -webkit-line-clamp: 3;
      }

      .description {
        -webkit-line-clamp: 5;
      }

      section {
        margin-top: -6px;
        border-radius: 0 0 10px 10px;
        background-color: white;

        .link-btn {
          a {
            max-width: 150px;
            margin: 0;
            padding: 8px 12px;
            font-size: 0.75rem;
          }
        }

        .price-item {
          display: block;
          margin-top: 10px;
          text-align: end;
        }

        .price-info {
          margin: 20px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;

          @media (max-width: 575px) {
            font-size: 0.875rem;
            // flex-direction: column;
            // align-items: start;
          }

          span {
            display: block;
            margin: 10px 0;
            padding-right: 5px;
            font-size: 1rem;
            font-weight: 600;
            color: var(--main-color);
          }
        }
      }
    }
  }
}

.lost-item {
  p,
  strong {
    display: block;
    margin-bottom: 1rem;
    line-height: 1.7;
  }

  section {
    font-size: 0.875rem;
    color: #808080;

    ol {
      margin-left: 1.25rem;
      li {
        margin-bottom: 0.5rem;
        line-height: 1.7;
      }
    }
  }
}

.btn-options {
  // max-width: 85%;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  list-style: none;

  li {
    margin-top: 15px;
    margin-right: 20px;

    button {
      display: block;
      width: 100%;
      padding: 8px 16px;
      border-radius: 5px;
      color: white;
      border: none;
      background-color: var(--main-color);
      letter-spacing: 2px;
      transition: all 0.3s;
      font-size: 0.875rem;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}

.btn-swiper {
  .swiper-slide {
    width: auto;
    // max-width: 185px;

    .btn-container {
      display: flex;
      justify-content: center;

      button {
        display: block;
        width: 100%;
        padding: 10px 20px;
        border-radius: 5px;
        color: white;
        border: none;
        background-color: var(--main-color);
        letter-spacing: 2px;
        transition: all 0.3s;
        font-size: 0.875rem;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

.ad-content {
  // width: 90%;
  max-height: 95vh;
  padding: 35px;
  overflow-y: auto;
  // position: absolute;
  // z-index: 500;
  border-radius: 10px;
  background-color: #fff;
  // box-shadow: 2px 2px 14px #5f5f5f;

  .close-btn {
    position: absolute;
    top: 7px;
    right: 5px;
    border: none;
    background-color: transparent;
    transition: all 0.3s;
    cursor: pointer;

    svg {
      filter: invert(57%) sepia(45%) saturate(391%) hue-rotate(350deg)
        brightness(93%) contrast(84%);
    }

    &:hover {
      opacity: 0.8;
    }
  }

  .ar-link {
    display: flex;
    justify-content: center;
  }

  section {
    p {
      // padding: 0 10px;
      line-height: 1.7;
      letter-spacing: 2px;
    }

    .title {
      margin: 15px auto;
      color: var(--main-color);
      font-weight: 600;
      font-size: 1.375em;
      text-align: center;
      letter-spacing: 2px;
    }

    .product,
    .branch {
      margin-top: 20px;
      background-color: #f1e9dc;

      p {
        padding: 10px 0;
        font-weight: 500;
        font-size: 0.875em;
        text-align: center;
        border-bottom: 2px solid #fff;
      }

      ul {
        padding: 10px;
        list-style: none;

        li {
          padding-bottom: 5px;
          letter-spacing: 1px;
          font-weight: 500;
          font-size: 0.875em;
        }
      }
    }

    .date {
      margin: 20px 0;
      text-align: center;
    }

    .info {
      display: flex;
      align-items: center;
      margin-top: 5px;

      p {
        padding-left: 10px;
        letter-spacing: 2px;
        // font-weight: 500;
        // color: var(--main-color);
      }

      svg {
        filter: invert(57%) sepia(45%) saturate(391%) hue-rotate(350deg)
          brightness(93%) contrast(84%);
      }
    }
  }

  .cover-img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
  }

  .price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;

    p {
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--main-color);
    }

    a {
      max-width: 150px;
      margin: 10px 0;
      padding: 8px 25px;
      display: inline-block;
      text-decoration: none;
      text-align: center;
      border-radius: 20px;
      letter-spacing: 1px;
      color: white;
      background-color: var(--main-color);
    }
  }
}

.slider-content {
  width: 100%;

  img {
    width: 100%;
    margin-bottom: -5px;
  }
}

.branch {
  margin-top: 30px;
  ul {
    padding: 0;
    list-style: none;

    li {
      letter-spacing: 1px;
    }
  }
}

.video-progress {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.dialog-content {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 100;
}

.vr-content {
  width: 700px;
  height: 700px;
}

.ar-link {
  display: inline-block;
  padding: 7px 17px;
  color: #fff;
  background-color: var(--main-color);
  border-radius: 5px;
  text-decoration: none;
  letter-spacing: 1px;
}

.ar-card {
  width: 85vw;
  height: 100vh;

  .v-card-title {
    text-align: center;
  }

  #vr-video {
    height: 77vh;
  }
}

.btn-swiper {
  margin-top: 20px;
}

.v-expansion-panel-text {
  font-size: 0.875rem;
  line-height: 1.7;
}

// 對話輸入框
.chat-inputs {
  width: 100%;
  display: flex;
  padding: 10px 20px;
  background-color: white;

  input {
    width: 100%;
    border: none;
    margin-left: 2rem;

    &:focus-visible {
      outline: none;
    }
  }

  .menu-btn {
    position: absolute;
    top: 2px;
    left: 0;
  }

  button.submit {
    border: none;
    background: white;
    cursor: pointer;
    &:hover {
      img {
        opacity: 0.8;
      }
    }

    img {
      padding-top: 5px;
      transition: all 0.3s;
      filter: invert(75%) sepia(20%) saturate(459%) hue-rotate(360deg)
        brightness(100%) contrast(85%);
    }
  }

  ::placeholder {
    font-size: 1rem;
    font-weight: 500;
    color: var(--sub-color);
    opacity: 1; /* Firefox */
  }

  ::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: var(--sub-color);
  }
}

// 底部選單
.menu {
  position: fixed;
  z-index: 300;
  left: 0;
  bottom: 0px;
  right: 0;
  color: var(--text-color);
  background-color: white;

  &.hide-menu table {
    height: 0;
    z-index: -1;
  }

  .icon {
    width: 80px;

    @media (max-width: 414px) {
      width: 60px;
    }

    @media (max-width: 375px) {
      width: 45px;
    }
  }

  .menu-table {
    height: 100%;
    transition: all 0.3s;

    &.hide-table {
      height: 0;

      table {
        display: none;
        height: 0;
      }
    }

    table {
      width: 95%;
      height: 100%;
      margin: auto;
      border-collapse: collapse;
      position: relative;
      transition: all 0.3s;

      &::before,
      &::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        bottom: 0%;

        @media (max-width: 390px) {
          width: 8px;
        }
      }

      &::before {
        left: -5px;
      }

      &::after {
        right: -5px;
      }

      tr {
        td {
          width: 50px;
          padding: 1rem 0;
          text-align: center;
          border: 1px solid #ccc;

          @media (max-width: 414px) {
            width: 100px;
            padding: 1rem 0;
          }

          @media (max-width: 390px) {
            padding: 0.5rem 0;
          }

          p {
            padding: 0 0.3rem;
            letter-spacing: 0.03rem;

            @media (max-width: 430px) {
              // width: 115px;
              font-size: 0.875rem;
            }
          }
        }

        &:first-child {
          td {
            border-top: 0px solid transparent;
          }
        }

        &:last-child {
          td {
            border-bottom: 0px solid transparent;
          }
        }
      }
    }
  }

  .question-btn {
    color: var(--main-color);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.1rem;

    @media (max-width: 414px) {
      font-size: 1rem;
    }
  }
}

.anchor-voice {
  height: 94vh;
  color: white;
  background-color: black;

  .video-content {
    height: 70vh;
    overflow: hidden;

    @media (max-width: 375px) {
      height: 65vh;
    }

    video {
      width: 100%;

      @media (max-width: 375px) {
        margin-top: -50px;
      }
    }
  }

  .control-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 24vh;

    @media (max-width: 375px) {
      height: 29vh;
    }
  }

  // .v-btn.v-btn--density-default {
  //   height: 55px !important;
  // }
}

.map-img {
  max-width: 100%;

  &.show-anchor {
    max-width: 70%;
  }
}

.voice-btn {
  position: fixed;
  right: 5px;
  top: 55px;
  z-index: 100;

  button {
    display: flex;
    align-items: center;

    img {
      width: 22px;
      filter: invert(49%) sepia(66%) saturate(368%) hue-rotate(348deg)
        brightness(91%) contrast(92%);
    }

    p {
      margin-left: 5px;
      font-size: 0.85rem;
      color: var(--main-color);
    }
  }
}

.v-btn {
  // &.v-btn--density-default {
  //   height: auto !important;
  // }

  p {
    font-size: 0.875rem;
  }
}

.v-field__outline {
  --v-field-border-width: 0 !important;
}

.swiper {
  // width: 300px;
  margin-left: 0;
}

.a-modal {
  position: relative !important;
  top: 50% !important;
  z-index: 15000 !important;
}

html.a-fullscreen {
  position: relative !important;
}

a-video-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.fc-direction-ltr {
  height: 500px;
}

.fc {
  .fc-scrollgrid,
  .fc-scrollgrid table,
  .fc-daygrid-body {
    height: 94%;
    width: 100% !important;
  }

  .fc-toolbar.fc-header-toolbar {
    padding: 5px;
    margin-bottom: 0;
    letter-spacing: 1px;
    background-color: #f2f2f2;
    border-radius: 5px 5px 0 0;
  }

  .fc-toolbar-title {
    font-size: 1.125em;
  }

  .fc-day-past {
    &.fc-day-other {
      a {
        text-decoration: none;
      }
    }

    a {
      color: #cccccc;
      text-decoration: line-through;
    }
  }

  .fc-button .fc-icon {
    color: #969696;
    font-size: 1em !important;
    vertical-align: baseline !important;
  }

  .fc-icon-chevron-left::before {
    content: "＜";
  }

  .fc-icon-chevron-right::before {
    content: "＞";
  }

  .fc-button-primary {
    border: none;
    background-color: transparent;

    &:hover,
    &:focus,
    &:not(:disabled):active:focus {
      box-shadow: none;
      background-color: transparent;
    }

    &:disabled {
      display: none;
    }
  }

  .fc-daygrid-day-top {
    justify-content: center;
  }

  .fc-day-today.fc-daygrid-day,
  .fc-day-future.fc-daygrid-day {
    cursor: pointer;
  }
}
</style>