<template>
  <div class="app-wrapper">
    <!-- 侧边栏 -->
    <div class="Sidebar">
      <div class="imgBox">
        <img
          class="boxCentreImg"
          src="../assets//img/left-top-logo.png"
          alt=""
        />
      </div>
      <!-- 侧边路由列表 -->
      <div class="myRouter">
        <div class="myRouter-item" @click="router.push('/model')">
          <div class="icon">
            <el-icon><i-ep-edit /></el-icon>
          </div>
          {{ $t("modelMangage.title") }}
        </div>

        <div class="myRouter-item" @click="router.push('/createVideo')">
          <div class="icon">
            <el-icon><i-ep-edit /></el-icon>
          </div>
          {{ $t("businessMangage.title") }}
        </div>

        <div class="myRouter-item" @click="router.push('/createVideo')">
          <div class="icon">
            <el-icon><i-ep-edit /></el-icon>
          </div>
          {{ $t("keyMangage.title") }}
        </div>

        <div class="myRouter-item" @click="router.push('/createVideo')">
          <div class="icon">
            <el-icon><i-ep-edit /></el-icon>
          </div>
          {{ $t("priceMangage.title") }}
        </div>

        <div class="myRouter-item" @click="router.push('/createVideo')">
          <div class="icon">
            <el-icon><i-ep-edit /></el-icon>
          </div>
          {{ $t("dataCount.title") }}
        </div>

        <div class="bottomBtx">
          <div class="myRouter-item" @click="router.push('/myAPI')">
            <div class="icon">
              <el-icon><i-ep-DocumentAdd /></el-icon>
            </div>
            {{ $t("apiMangage.title") }}
          </div>
        </div>
      </div>
    </div>
    <!-- 右边显示部分 -->
    <div class="rightBox">
      <!-- nav栏 -->
      <div class="nav">
        <!-- 语言 -->
        <el-tooltip
          style="cursor: pointer; z-index: 999"
          class="box-item"
          effect="dark"
          :content="$t('navbar.LanguageChange')"
          placement="top-start"
        >
          <lang-select class="navItem" />
        </el-tooltip>
        <!-- 登录 -->
        <div class="navItem" v-if="!AccessToken" @click="router.push('login')">
          {{ $t("navbar.goLogin") }}
        </div>
        <!-- 注销 -->
        <div
          class="navItem"
          v-if="AccessToken"
          @click="logout"
          style="margin-left: 10px"
        >
          {{ $t("navbar.logout") }}
        </div>
      </div>
      <!-- 主页面 -->
      <app-main style="background-color: #000" />
    </div>
    <!-- 联系我们对话框 -->
    <talkUs
      :showTalkUsDialog="showTalkUsDialog"
      @updateShowTalkUsDialog="updateShowTalkUsDialog"
    ></talkUs>
  </div>
</template>

<script setup lang="ts">
import { computed, watchEffect } from "vue";
import { useWindowSize } from "@vueuse/core";
import { AppMain, Navbar } from "./components/index";
import talkUs from "@/components/talkUs.vue";
import LangSelect from "@/components/LangSelect/index.vue";
import { useAppStore } from "@/store/modules/app";
// import { useSettingsStore } from "@/store/modules/settings";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

import { userInfoModules } from "@/store/modules/userInfo";

const userInfoPinia = userInfoModules();
const route = useRoute();
const router = useRouter();
const { params } = route;
const { width } = useWindowSize();
const AccessToken = localStorage.getItem("AccessToken");
// 当前语言状态与国际化组件
const { locale } = useI18n();
const lanChange = ref(locale);
function logout() {
  const msg =
    (lanChange.value as string) == "zh-cn"
      ? "确定退出登录吗？"
      : "Are you sure to log out？";
  const notice = (lanChange.value as string) == "zh-cn" ? "提示" : "Notice";
  const confirm = (lanChange.value as string) == "zh-cn" ? "确定" : "Confirm";
  const cancel = (lanChange.value as string) == "zh-cn" ? "取消" : "Cancel";
  ElMessageBox.confirm(msg, notice, {
    confirmButtonText: confirm,
    cancelButtonText: cancel,
  }).then(() => {
    userInfoPinia.loginOut();
    router.push(`/login`);
    localStorage.removeItem("AccessToken");
  });
}
/**
 * 响应式布局容器固定宽度
 *
 * 大屏（>=1200px）
 * 中屏（>=992px）
 * 小屏（>=768px）
 */
const WIDTH = 992;

const appStore = useAppStore();
// const settingsStore = useSettingsStore();

watchEffect(() => {
  if (width.value < WIDTH) {
    appStore.toggleDevice("mobile");
    appStore.closeSideBar(true);
  } else {
    appStore.toggleDevice("desktop");

    if (width.value >= 1200) {
      //大屏
      appStore.openSideBar(true);
    } else {
      appStore.closeSideBar(true);
    }
  }
});

function handleOutsideClick() {
  appStore.closeSideBar(false);
}

onMounted(() => {});
//#region 联系我们弹窗
const showTalkUsDialog = ref(false);
const updateShowTalkUsDialog = (newValue: any) => {
  showTalkUsDialog.value = newValue;
};
//#endregion ------------------------------------
</script>

<!-- 新样式 -->
<style lang="scss" scoped>
.app-wrapper {
  width: 1920px;
  display: flex;
}
.Sidebar {
  width: 230px;
  background-color: #000;
  height: 100vh;
  color: #fff;
  .imgBox {
    width: 100%;
    height: 80px;
    position: relative;
    img {
      max-width: 80%;
      max-height: 80%;
    }
  }
  .myRouter {
    position: relative;
    height: calc(100% - 80px);
    padding: 130px 20px 0;
    color: #fff;
    // color: #868593;

    .bottomBtx {
      position: absolute;
      bottom: 30px;
    }
    &-item {
      display: flex;
      width: 100%;
      height: 50px;
      padding-left: 10px;
      font-size: 20px;
      font-weight: 500;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
      // border-bottom: 2px solid #fff;
      transition: all 0.3s;
      border-radius: 5px;
      margin-bottom: 20px;
      margin-right: 20px;

      .icon {
        width: 40px;
        height: 40px;
        color: #fff;
        border-radius: 50%;

        .el-icon {
          width: 25px;
          height: 25px;
          font-size: 25px;
          // color: #797a9f;
          color: #fff;
          text-align: center;
          vertical-align: sub;
        }
      }

      &:hover {
        // background: rgba(255, 255, 255, 0.2);
        color: #000;
        background: #fff;
        .el-icon {
          // color: #d4d0ff;
          color: #000;
        }
      }
    }

    .pricing {
      position: absolute;
      bottom: 60px;
      width: calc(100% - 40px);
      text-align: center;
    }
    .API {
      position: absolute;
      bottom: 0px;
      width: calc(100% - 40px);
      text-align: center;
    }
  }
}
.rightBox {
  width: 1690px;
  // background-color: #000;
  .nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 20px;
    width: 100%;
    height: 80px;
    background-color: #000;
    padding: 30px;
    // padding: 30px 30px 0 1500px;
    color: #fff;
    .navItem {
      font-size: 16px;
      margin-right: 30px;
    }
  }
}
</style>
