<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('/createVideo')">
          <div class="icon">
            <el-icon><i-ep-edit /></el-icon>
          </div>
          {{ $t("createVideo.title") }}
        </div>
        <div class="myRouter-item" @click="router.push('/myCreating')">
          <div class="icon">
            <el-icon><i-ep-menu /></el-icon>
          </div>
          {{ $t("myCreating.title") }}
        </div>
        <div class="myRouter-item" @click="router.push('/separation')">
          <div class="icon">
            <el-icon><i-ep-user /></el-icon>
          </div>
          {{ $t("userModel.title") }}
        </div>
        <div class="myRouter-item" @click="router.push('/voiceprint')">
          <div class="icon">
            <el-icon><i-ep-phone /></el-icon>
          </div>
          {{ $t("voiceModel.title") }}
        </div>

        <!-- <div class="bottomBtx"> -->
          <div class="myRouter-item" @click="router.push('/myStore')">
            <div class="icon">
              <el-icon><i-ep-Goods /></el-icon>
            </div>
            {{ $t("shop.title") }}
          </div>
          <!-- <div class="myRouter-item" @click="router.push('/myAPI')">
            <div class="icon">
              <el-icon><i-ep-DocumentAdd /></el-icon>
            </div>
            {{ $t("API.title") }}
          </div> -->
          <el-menu
            default-active=""
            class="el-menu-vertical-demo"
            active-text-color="#ffd04b"
            background-color="#000"
            text-color="#fff"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>{{ $t("my.title") }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="router.push('/myRecharge')">{{ $t("recharge.title") }} </el-menu-item>
                <el-menu-item index="2-2" @click="router.push('/coindeduc')">{{ $t("coindeduc.title") }} </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            </el-menu>
        <!-- </div> -->
      </div>
    </div>
    <!-- 右边显示部分 -->
    <div class="rightBox">
      <!-- nav栏 -->
      <div class="nav">
        <div class="navItem">{{ $t("navbar.currencyValue") }}：{{ currentValue }}</div> 
        <!-- 语言 -->
        <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="currentPhone">{{ currentPhone }}</div>
        <!-- 登录 -->
        <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";
import { getUserPoinsApi } from '@/apis/my.js'

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

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

// 当前币值
const currentValue = ref('')
const currentPhone = localStorage.getItem('phone')
function currentValFn() {
  getUserPoinsApi().then(res => {
    currentValue.value = res.data
    localStorage.setItem('userPoinsVal', res.data)
  })
}

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

//#region 页面跳转
function toUserModel() {
 // router.push("/userModel");
  window.location.href = '/priMakeHtml/dingzhifenshen/index.shtml'
  showTalkUsDialog.value = true;
}
//#endregion ------------------------------------
</script>

<!-- 新样式 -->
<style lang="scss" scoped>
.app-wrapper {
  width: 100%;
  display: flex;
  overflow: hidden;
}
.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: 40px 20px 0;
    color: #fff;
    user-select: none;
    // color: #868593;
    overflow: auto;
    overflow-x: hidden;

    .bottomBtx {
      position: absolute;
      bottom: 30px;
    }
    &-item {
      display: flex;
      width: 100%;
      height: 50px;
      padding-left: 10px;
      font-size: 18px;
      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: calc(100% - 230px);
  // 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: 18px;
  }

}
</style>
