101-aiv1/src/views/HomeView.vue

<script setup>
import { ref, reactive, onMounted, watch, nextTick } 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";

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://devbox10.itri-nlp.tw:38125/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";
            }
          });

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

          setTimeout(() => {
            messages.value.push({
              label: labelContent,
              author: "ai",
              body: info,
            });
          }, 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://bf18-61-230-0-215.ngrok-free.app/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://bf18-61-230-0-215.ngrok-free.app/${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"),
  });

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

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

  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_area",
      },
    ],
    // 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: [
        "B1 鼎泰豐旁 數位屏幕",
        "B1 中環WOW屏幕",
        "B1 信義橘梯梯廳",
        "B1 信義綠梯梯廳",
        "B1 松智藍梯梯廳",
        "1F 信義綠梯出入口",
        "1F 松智梯廳",
        "2F 松智藍梯梯廳",
      ],
    });
  }
}

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

  if (value === "購物品牌查詢") {
    messages.value.push({
      label: "text",
      author: "ai",
      body: "請選擇品牌類別",
    });

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

    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://bf18-61-230-0-215.ngrok-free.app/ttsTry/tts_try?message=${message}&type=101`;
  let url = `https://bf18-61-230-0-215.ngrok-free.app/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://bf18-61-230-0-215.ngrok-free.app/whisper/${audioLang}/`;
  let url = `https://bf18-61-230-0-215.ngrok-free.app/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;
    }
  }
}
</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"
                    text="關閉"
                    @click="qrCodeDialog = false"
                  ></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, item, 'garden')">
                    {{ item }}
                  </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 導覽
              </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">
                    <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"
                      text="關閉"
                      @click="arVideoDialog = false"
                    ></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 aa"
                    :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" 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>

        <!-- 對話輸入框 -->
        <!-- <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://bf18-61-230-0-215.ngrok-free.app/${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">點選以進行錄音</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: 80%;
        position: relative;

        .slide-item {
          max-width: 60vw;
          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);
          }
        }
      }
    }
  }
}

.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;
}

.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>