101-aiv2/src/components/Chat.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";
// Qrcode.vue
import QrcodeVue from "qrcode.vue";
// 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: "讀取錯誤，請重新掃描。",
    });
  }
}

// QR Code 彈跳視窗
let qrcodeImgDialog = ref(false);
let qrcodeImgUrl = ref("");

// 開啟掃描視窗
function openQrcodeDialog(item) {
  console.log("item", item);
  qrcodeImgUrl.value = item;
  qrcodeImgDialog.value = true;
}

// 判斷 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;
    console.log("chatArea.value", chatArea.value.scrollHeight);

    chatArea.value.scrollTo({
      top: chatArea.value.scrollHeight,
      behavior: "smooth",
    });

    // 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 message = userMessage.value;
  userMessage.value = "";
  let url = "https://api.itri-101-5g.com/v1/qa/";

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

    videoLoading.value = true;
    let isVideoCache = await getVideoCache(message); // 判斷使用者問題是否有 Video Cache

    console.log("isVideoCache", isVideoCache);

    // 如果有 Video Cache 則不需回傳工研院回答
    if (isVideoCache) {
      handleVideoCache(); // 播放 Video Cache
      if (audioFile.value && type !== "text") {
        messageSaveMp3(message, videoCacheData.value.answer, []);
      } else {
        messageSave(message, videoCacheData.value.answer, []);
      }
      return;
    }

    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(async (response) => {
        // if (showAnchor.value) {
        //   getVideo(response.data);
        // }

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

        console.log("response", response);
        if (audioFile.value && type !== "text") {
          messageSaveMp3(message, response.data.response, response.data.data);
        } else {
          messageSave(message, response.data.response, response.data.data);
        }

        messageNotInCache(message, response.data.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 hideMenu = ref(true); // 底部選單
let showInput = ref(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;
    }
  });
};

// 語言下拉選單 (Kiosk)
function onLanguageChange(lang) {
  isVideoPause.value = true;

  if (lang === "中文") {
    chooseLang("zh-tw");
  } else if (lang === "English") {
    chooseLang("en-us");
  }
}

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

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

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

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

  setAd();
  handleClick();

  // 影片路徑
  loadVideoSources();
  // let lang = getLang();
  let sources;
  console.log("videoSources.value", videoSources.value);
  if (language === "zh-tw") {
    sources = videoSources.value;
  } else if (language === "en-us") {
    sources = videoSourcesEn.value;
  }

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

  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: {
      value: "B1 鼎泰豐", // 編號 1
      text: "location.b1_din_tai_fung",
    },
    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",
      },
    ],
  },
  {
    location: {
      value: "B1 中環", // 編號 2
      text: "location.b1_centre",
    },
    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: {
      value: "B1 2號電梯", // 編號 3
      text: "location.b1_elevator_no_2",
    },
    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: {
      value: "B1 4號電梯", // 編號 4
      text: "location.b1_elevator_no_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: {
      value: "B1 3號電梯", // 編號 5
      text: "location.b1_elevator_no_3",
    },
    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: {
      value: "1F 信義環", // 編號 6
      text: "location.1f_south_xinyi",
    },
    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: {
      value: "1F 3號電梯", // 編號 7
      text: "location.1f_elevator_no_3",
    },
    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: {
      value: "2F 3號電梯", // 編號 8
      text: "location.2f_elevator_no_3",
    },
    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: {
      value: "89F 觀景台", // 編號 9
      text: "location.89f_observatory",
    },
    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: {
      value: "88F 觀景台", // 編號 10
      text: "location.88f_observatory",
    },
    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([
  {
    value: "B1 平面圖",
    text: "b1_floor_plan",
  },
  {
    value: "1F 平面圖",
    text: "1f_floor_plan",
  },
  {
    value: "2F 平面圖",
    text: "2f_floor_plan",
  },
]);

let assignLocation = ref("當前位置"); // 指定定位點
let assignLocationText = ref(""); // 指定定位點 (i18n)
let assignNavigationList = ref(null); // 指定導覽點列表

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;

    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) {
  console.log("item", item);
  console.log("定位點：", item);

  // 掃描 QR Code
  // assignLocation.value = item;
  // let assign = locationList.filter((e) => e.location === item);
  // console.log("assign", assign);
  // assignNavigationList.value = assign[0].navigation;

  // 下拉選單
  assignLocation.value = item.location.value;
  assignNavigationList.value = item.navigation;
  assignLocationText.value = item.location.text;

  console.log("assignLocation.value", assignLocation.value);
  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.value === "B1 平面圖") {
    name = "All_b1";
  } else if (item.value === "1F 平面圖") {
    name = "All_1";
  } else if (item.value === "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;

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

    if (currentAudio.value && isAudioPlaying.value) {
      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 === "位置導引") {
    assignLocationText.value = "";

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

    // 掃描 QR Code
    // 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,
    });
  }

  // 關閉選單
  hideMenu.value = true;
  showInput.value = true;
}

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 主播影片

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);

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

    assignCategoryIndex.value = null;
    assignCategory.value = "";
  } catch (error) {
    console.log("error", error);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 文字轉語音 (TTS)
async function handleTTS(message) {
  console.log("handleTTS", message);

  let audioLang; // 音訊語言
  let lang = localStorage.getItem("lang");
  console.log("lang", lang);

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

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

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

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

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

    cutVideo(); // 剪接影片

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

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

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

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

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

  // 影片和音訊加載完成後播放
  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);
  };
}

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

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

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

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

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

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

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

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

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

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

    userMessage.value = response.data[0];

    // handleTTS(userMessage.value); // 取得語音回覆

    if (response.data[0] && response.data[0] !== "") {
      sendMessage(); // 傳送使用者訊息
    } else {
      if (showAnchor.value) {
        alert("語音辨識有誤，請重新錄製。");
        videoLoading.value = false;
        return;
      } else {
        messages.value.push({
          label: "text",
          author: "user",
          body: t("speech_error"),
        });
        videoLoading.value = false;
      }
    }
  } 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);

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

let videoCacheData = ref({});

// 儲存問答 Log
async function messageSave(question, answer, data) {
  let url = "https://cmm.ai:9101/message_save";

  let parameters = {
    question: question,
    answer: answer,
    data_list: data.length ? JSON.stringify(data) : "[]",
  };

  console.log("messageSave", parameters);

  try {
    const response = await axios.post(url, parameters);
    console.log("response", response);
  } catch (error) {
    console.log("error", error);
  }
}

// 儲存問答 Log (有使用者錄音檔)
async function messageSaveMp3(question, answer, data) {
  let url = "https://cmm.ai:9101/message_save_mp3";

  const formData = new FormData();
  formData.append("question", question);
  formData.append("answer", answer);
  formData.append("data_list", data.length ? JSON.stringify(data) : "[]");
  formData.append("mp3_file", audioFile.value);

  try {
    const response = await axios.post(url, formData);
    console.log("response", response);
    audioFile.value = null;
  } catch (error) {
    console.log("error", error);
  }
}

async function getVideoCache(messages) {
  let url = `https://cmm.ai:9101/video_cache?client_message=${messages}`;

  try {
    const response = await axios.post(url);
    console.log("response", response);
    console.log("response.status", response.status);
    if (response.data.state === 200) {
      videoCacheData.value = response.data.message[0];
      console.log("videoCacheData.value", videoCacheData.value);
      return true;
    } else {
      return false;
    }
  } catch (error) {
    console.log("error", error);
  }
}

// 播放 Video Cache
function handleVideoCache() {
  console.log("播放 Video Cache", videoCacheData.value);
  // AI 客服回傳訊息
  messages.value.push({
    label: "text",
    author: "ai",
    body: videoCacheData.value.answer,
  });

  // 播放 Cache 影片
  videoSrc.value = `https://cmm.ai:9101${videoCacheData.value.video_url}`;
  video.value.load();

  // 清空音訊
  if (currentAudio.value) {
    currentAudio.value.pause();
    currentAudio.value.currentTime = 0;
    currentAudio.value = null;
  }

  video.value.play();
  isVideoPause.value = true;

  setTimeout(() => {
    videoLoading.value = false;
  }, 1000);
}

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

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

// 回傳未收錄問題
async function messageNotInCache(question, answer) {
  let url = `https://cmm.ai:9101/message_not_in_cache?question=${question}&answer=${answer}&client_id=0`;

  try {
    const response = await axios.post(url);
    console.log("messageNotInCache response", response);
  } catch (error) {
    console.log("error", error);
  }
}
</script>

<template>
  <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 class="main-containar">
    <div class="video-content">
      <!-- 語言選單 -->
      <div class="lang-select">
        <v-select
          label="切換語言"
          :items="['中文', 'English']"
          variant="solo"
          @update:modelValue="onLanguageChange"
        ></v-select>
      </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>

      <!-- <img src="../assets/img/logo.png" alt="" /> -->
      <!-- <video
        ref="video"
        preload
        playsinline
        :style="{ opacity: !isTTSVideo ? '1' : '0' }"
      >
        <source src="../assets/video/start.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="togglePause('pause')" class="control-btn">
        <img v-if="!isVideoPause" src="../assets/img/pause-button.png" alt="" />
        <img v-else src="../assets/img/play-button.png" alt="" />
      </button> -->

      <button
        v-if="isVideoPause"
        @click="togglePause('pause')"
        class="control-btn"
      >
        <img src="../assets/img/pause-button.png" alt="" />
        <!-- <p>語音</p> -->
      </button>

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

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

        <div class="d-flex flex-column align-center">
          <audio v-if="audioURL" :src="audioURL" controls></audio>
          <!-- <p
          v-if="!isRecording"
          class="mb-3 text-center"
          v-html="t('system_construction')"
        ></p> -->
          <p v-if="!isRecording" class="mb-3">
            {{ t("tap_to_record") }}
          </p>
          <span v-else>
            <p class="text-center">
              {{ t("recording") }}：{{ recordTime }} {{ t("second") }}
            </p>
            <p class="text-center mb-3" v-html="t('stop_recording')"></p>
          </span>
          <!-- 錄音按鈕 -->
          <v-btn
            v-if="!isRecording"
            @click="recStart"
            icon="mdi-circle"
            size="x-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>

      <!-- <ArGuided /> -->

      <!-- <div class="dialog-content pa-4">
        <v-select
          v-model="selectArGuided"
          @update:modelValue="handleSelectChange"
          label="AR 導覽"
          :items="['5號 b1 松智藍梯梯廳 > 五樓觀景台售票處']"
          variant="solo"
          density="compact"
          hide-details
          style="min-width: 120px"
        ></v-select>

        <v-dialog v-model="arGuidedDialog" width="auto">
          <v-card width="85vw" height="1000" class="rounded-lg">
            <ArGuided />

            <v-btn
              class="mt-auto ms-auto mr-5 mb-5"
              text="結束導覽"
              @click="arGuidedDialog = false"
            ></v-btn>
          </v-card>
        </v-dialog>
      </div> -->
    </div>

    <div class="chat-content">
      <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>
      <section
        ref="chatArea"
        class="chat-area"
        :class="{ 'area-open': isRotate, 'hide-menu': hideMenu }"
        :style="{ paddingBottom: !hideMenu ? menuHeight + 20 + 'px' : '90px' }"
      >
        <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'">
            <!-- 定位點 & 平面圖下拉選單 -->
            <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">
                      {{
                        assignLocationText !== ""
                          ? t(assignLocationText)
                          : t("current_location")
                      }}
                    </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 }}. {{ t(item.location.text) }}
                    </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">{{ t("view_floor_plan") }}</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)">
                      {{ t(item.text) }}
                    </v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            <!-- 票券 -->
            <swiper
              v-if="message.body.ticketList.length"
              :slidesPerView="1"
              :navigation="true"
              :modules="modules"
              class="ticket-slide"
            >
              <swiper-slide v-for="(item, index) 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("cta_url") }}
                        </a> -->

                        <!-- 掃描 QR Code -->
                        <v-btn
                          @click="
                            openQrcodeDialog(
                              item.info.website_url || item.info.url
                            )
                          "
                          color="primary"
                        >
                          <p class="text-white m-0">{{ t("cta_url") }}</p>
                        </v-btn>
                      </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, index) 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("cta_url") }}
                        </a> -->

                        <!-- 掃描 QR Code -->
                        <v-btn
                          @click="openQrcodeDialog(item.info.url)"
                          color="primary"
                        >
                          <p class="text-white m-0">{{ t("cta_url") }}</p>
                        </v-btn>
                      </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, index) 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("cta_url") }}
                        </a> -->

                        <!-- 掃描 QR Code -->
                        <v-btn
                          @click="openQrcodeDialog(item.info.url)"
                          color="primary"
                        >
                          <p class="text-white m-0">{{ t("cta_url") }}</p>
                        </v-btn>
                      </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("cta_url") }}
                      </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("cta_buy") }}
                </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>
      </section>

      <!-- <form @submit.prevent="sendMessage('text')" class="chat-inputs">
        <input
          v-model="userMessage"
          type="text"
          placeholder="Type a message..."
        />
        <button type="submit">
          <img width="20" src="../assets/img/paper-plane-solid.svg" alt="" />
        </button>
      </form> -->

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

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

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

        <div class="menu-table mb-3" :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" style="bottom: 20px">
          <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()"
              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 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> -->
    </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>

        <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="qrcodeImgDialog" width="auto">
    <v-card class="pa-5">
      <v-card-title class="text-center"> 請掃描 QR Code 前往 </v-card-title>
      <v-card-text>
        <qrcode-vue
          :value="qrcodeImgUrl"
          class="w-100 h-100"
          style="max-width: 300px"
        />
      </v-card-text>
    </v-card>
  </v-dialog>
</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%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;

  .video-content {
    height: 73vh;
    display: flex;
    justify-content: center;
    transform: scale(1);
    background-color: #cab78e;
    // background-color: #d1bf99;
    // background-color: var(--sub-color);

    video {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 55px;
      left: 0;
      right: 0;
      z-index: 10;

      @media (max-width: 575px) {
        top: 15px;
      }

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

    .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%); // 改成白色
      }
    }

    .control-item {
      display: flex;
      justify-content: end;
      flex-direction: column;
      z-index: 10;
      position: absolute;
      bottom: 20px;

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

      p {
        color: #fff;
        font-size: 1rem;
        letter-spacing: 1px;
        text-shadow: 1px 1px 2px #333;
      }
    }
  }

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

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

  .chat-content {
    width: 100%;
    height: 65vh;
    margin-top: -1rem;
    position: relative;
    z-index: 100;
    letter-spacing: 1px;
    border-radius: 10px 10px 0 0;
    // box-shadow: 2px 2px 8px #ccc;

    .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: 1rem;
        }
      }

      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;
      background: var(--sub-color);
      height: 45vh;
      padding: 0 1em 2em;
      overflow-x: hidden;
      overflow-y: auto;
      transition: all 0.3s;

      // @media (max-width: 575px) {
      //   height: 50vh;
      // }

      &.area-open {
        height: 75vh;

        @media (max-width: 400px) {
          height: 67vh;
        }
      }

      .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.5em 1.2em;
        white-space: pre-line;

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

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

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

    .chat-inputs {
      width: 100%;
      display: flex;
      padding: 13px 20px;
      background-color: white;

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

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

      button {
        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);
      }
    }

    .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: 1rem;
        }

        .date {
          color: #646464;
          font-size: 1rem;
          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: 63%;
        margin: 0;
        position: relative;

        @media (max-width: 767px) {
          width: 90%;
        }

        .swiper-slide {
          margin-left: 1px;

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

            @media (max-width: 767px) {
              max-width: 70vw;
            }
          }
        }

        .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: 1rem;
            // flex-direction: column;
            // align-items: start;
          }

          button {
            border-radius: 100px;
          }

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

.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: 10px;
        color: white;
        border: none;
        background-color: var(--main-color);
        letter-spacing: 2px;
        font-size: 1rem;
        transition: all 0.3s;

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

.a-modal {
  display: none !important;
}

.ad-content {
  max-height: 95vh;
  padding: 35px;
  overflow-y: auto;
  border-radius: 10px;
  background-color: #fff;

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

  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: 1rem;
        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: 1rem;
        }
      }
    }

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

    .map {
      display: flex;
      align-items: center;
      justify-content: end;

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

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

  .cover-img {
    width: 100%;
    object-fit: cover;
  }
}

.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%;
  z-index: 100;
  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;
}

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

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

// 底部選單
.menu {
  position: fixed;
  z-index: 300;
  left: 0;
  bottom: 0px;
  right: 0;
  color: var(--text-color);
  background-color: white;
  box-shadow: 0px -3px 10px rgba(150, 150, 150, 0.7);

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

  .icon {
    width: 80px;

    @media (max-width: 767px) {
      width: 50px;
    }

    // @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: 767px) {
            width: 100px;
            padding: 0.5rem 0;
          }

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

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

        &: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;
    }
  }
}

.lang-select {
  position: absolute;
  z-index: 100;
  bottom: 15px;
  right: 20px;
  width: 130px;
}
</style>