<template>
  <q-layout view="lhh LpR lff" class="bg-grey-1">
    <q-header :reveal="true" class="text-white" style="background: #212121">
      <q-toolbar class="q-py-sm q-px-md">
        <img class="logo" src="../assets/image/logo.png" />
        <div
          class="GL__toolbar-link q-ml-xs q-gutter-md text-body2 text-weight-bold row items-center no-wrap"
        >
          <q-tabs inline-label class="q-pl-xl q-pr-xl aiFonts" align="justify">
            <q-route-tab to="/" label="AI生图" />
            <q-route-tab to="/history" name="history" label="生成历史" />
            <q-route-tab to="/aicg" name="acg" label="AIGC认证" />
          </q-tabs>
        </div>

        <q-space />

        <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
          <div
            class="q-pl-sm q-gutter-sm row items-center no-wrap cursor-pointer"
          >
            <img
              style="width: 17px; height: auto"
              src="../assets/image/ai/message.png"
            />
            <span @click="goFeedBack" class="msg">留言反馈</span>
          </div>
          <q-btn dense flat no-wrap>
            <q-avatar size="40px">
              <img :src="user.avatar" @click="updateInfo">
            </q-avatar>
            <q-icon name="arrow_drop_down" size="16px" />
            <q-menu auto-close>
              <div class="pop-box">
                <div class="userInfo">
                  <img :src="user.avatar" />
                  <div style="margin-bottom: 10px">
                    <div class="user-name">{{ user.nickName }}</div>
                    <div class="phone">{{ user.telNum }}</div>
                  </div>
                </div>
                <n-button class="create" quaternary>
                  <div style="color: #fff">
                    剩余积分<span style="margin-left: 30px">{{
                      user.coin
                    }}</span>
                  </div>
                </n-button>
                <div class="list" @click="goDetail">
                  <div style="display: flex; align-items: center">
                    <img src="../assets/image/coin.png" alt="设置" />
                    <span style="margin-left: 5px">积分明细</span>
                  </div>
                  <span> > </span>
                </div>
                <div class="list" @click="goMine">
                  <div  style="display: flex; align-items: center">
                    <img src="../assets/image/per.png" alt="设置" />
                    <span style="margin-left: 5px">个人中心</span>
                  </div>
                  <span> > </span>
                </div>
                <div class="log-out" @click="logOut">
                  <img src="../assets/image/exit.png" alt="设置" />
                  <span style="margin-left: 5px">退出登录</span>
                </div>
              </div>
            </q-menu>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view  />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { LocalStorage, SessionStorage } from "quasar";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const tab = ref("ai");
const user = ref(null)
const router = useRouter();
user.value = LocalStorage.getItem("sd-accountInfo") || {};
const logOut = () => {
  LocalStorage.remove("sd-accountInfo");
  LocalStorage.remove("sd-token");
  window.location.href = "/#/login";
};
const updateInfo = () => {
  user.value = LocalStorage.getItem("sd-accountInfo") || {};
};
const goMine = () => {
  router.push("/mine?active=mineCenter");
};
const goDetail = () => {
  router.push("/mine?active=pointDetail");
};
const goFeedBack = () => {
  router.push("/feedback");
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "aiFonts";
  src: url("../assets/fonts/aiFonts.ttf") format("truetype");
  font-weight: lighter !important;
  font-style: normal;
}
.aiFonts {
  font-family: "aiFonts";
}
.logo {
  height: 40px;
  width: auto;
  margin-right: 10px;
}
.q-tab {
  width: 200px;
}
.msg {
  font-size: 14px;
  margin-left: 5px;
  margin-bottom: 2px;
}
.pop-box {
  width: 310px;
  padding: 0px 27px 15px 27px;
  height: 330px;
  background: #19191a;
  .userInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20px;
    font-weight: bold;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .user-name {
      font-size: 18px;
      color: #fff;
      margin-top: 10px;
    }
    .phone {
      font-size: 16px;
      color: #bebebe;
      margin-top: 5px;
    }
  }
  .list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      font-size: 16px;
      color: #bebebe;
      margin-left: 10px;
    }
  }
  .log-out {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #707070;
    justify-content: center;
    margin-top: 20px;
    cursor: pointer;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      font-size: 16px;
      color: #C348B8;
      margin-left: 10px;
    }
  }
}
.create {
  margin-top: 10px;
  width: 100%;

  height: 44px;
  background: linear-gradient(260deg, #c448b8, #591df5);
  border-radius: 6px;
  color: #fff;
  font-weight: bolder;
  font-size: 18px;
  margin-bottom: 5px;
}
:deep(.q-tab--active .q-tab__indicator) {
  opacity: 1;
  width: 40px;
  left: 39%;
  height: 5px;
  background: linear-gradient(to right, #be45ba, #5d1ef1);
}
:deep(.q-tab--active .q-tab__label) {
  color: #fff;
  font-size: 20px;
  font-weight: lighter;
  text-shadow: 0px 3px 4px #de53ab;
}
:deep(.q-tab--inactive .q-tab__label) {
  color: #bebebe;
  font-size: 20px;
  font-weight: lighter;
}
:deep(.q-menu) {
  left: 1586px;
}

</style>
