<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">
        <el-menu
        default-active="1"
        active-text-color="#ffd04b"
        background-color="#000"
        text-color="#fff"
        class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="router.push('/home')">
            <el-icon><i-ep-House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <!-- 邃芒后台 -->
            <el-menu-item v-if="isAdmin === '1'" index="2" @click="router.push('/apiManage')">
              <el-icon><i-ep-link /></el-icon>
              <span>API接入方管理</span>
            </el-menu-item>
           <el-menu-item v-if="isAdmin === '1' && localDeploy !== 'true'" index="3" @click="router.push('/privatization')">
              <el-icon><i-ep-edit /></el-icon>
              <span>私有化客户管理</span>
            </el-menu-item>
          <!-- 私有化客户管理 API v-if="(isAdmin === '1' && localDeploy === 'true') || isAdmin === '0'" -->
          <template v-else>
            <el-menu-item index="4"  @click="router.push('/template')">
              <el-icon><i-ep-edit /></el-icon>
              <span>模版管理</span>
            </el-menu-item>
            <el-menu-item index="5"  @click="router.push('/secretKey')">
              <el-icon><i-ep-edit /></el-icon>
              <span>密钥查看</span>
            </el-menu-item>
            <el-menu-item index="6" @click="router.push('/video')">
              <el-icon><i-ep-edit /></el-icon>
              <span>视频制作统计</span>
            </el-menu-item>
          </template>
        </el-menu>
      </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="!isLogin" @click="router.push('login')">
          {{ $t("navbar.goLogin") }}
        </div>
        <!-- 注销 -->
        <div
          v-if="isLogin"
          class="navItem"
          @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 { getMenuNavApi } from "@/apis/Permission.js";
import { userInfoModules } from "@/store/modules/userInfo";
import { logoutApi } from '@/apis/login.js'

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);
const isLogin = ref(false);
const isAdmin = localStorage.getItem("isAdmin")
const localDeploy = localStorage.getItem("localDeploy")

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(() => {
    logoutApi().then(res => {
      userInfoPinia.loginOut();
      localStorage.clear()
      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(() => {
  getMenuNavFunc();
});
//#region 联系我们弹窗
const showTalkUsDialog = ref(false);
const updateShowTalkUsDialog = (newValue: any) => {
  showTalkUsDialog.value = newValue;
};
//#endregion ------------------------------------

//#region 获取路由列表
const MenuList = ref([{ id: "", name: "" }]);
async function getMenuNavFunc() {
  try {
    const res = await getMenuNavApi();
    MenuList.value = res.data.menuList;
    if (res.code === 200) {
      isLogin.value = true
    }
  } catch (error) {
    console.log(error);
  }
}
//#endregion ------------------------------------

//#region 路由及子路由
const showChildrenRouter = ref("");

//#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;
    width: 230px;
    // 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;
      overflow: hidden;
      .icon {
        display: flex;
        color: #fff;
        border-radius: 50%;
        margin-right: 10px;
        width: 100%;
        height: 50px;
        line-height: 50px;

        .el-icon {
          margin-left: 10px;
          margin-top: 12px;
          margin-right: 10px;
          width: 25px;
          height: 25px;
          font-size: 25px;
          // color: #797a9f;
          color: #fff;
          text-align: center;
          vertical-align: sub;
        }
      }
      .childrenRouter {
        cursor: pointer;
        transition: all 0.3s;
      }
      .childrenRouter:hover {
        color: #ffffff;
        background-color: #000000;
      }
      &:hover {
        // background: rgba(255, 255, 255, 0.2);

        color: #000;
        background: #fff;
        .icon {
          color: #000;
        }
        .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;
    }
  }
}
.el-menu{
  border: none;
  :deep .el-sub-menu__title, :deep .el-menu-item{
    font-size: 16px;
  }

}
</style>
