<template>
  <el-container style="height: 100%">

    <el-header>
      <el-row class="launch-header">

        <!-- logo -->
        <el-col :span="4">
          <div class="launch-logo">
            <a href="javascript:void(0);">
              <img src="/logo.png">
            </a>
          </div>
        </el-col>

        <!-- 菜单 -->
        <el-col :span="10">
          <div class="launch-model">

            <div class="launch-model-item">
              <el-tooltip
                  :show-after="800"
                  content="主页"
                  effect="light"
                  placement="bottom"
              >
                <el-icon :size="20" @click="toHome">
                  <House/>
                </el-icon>
              </el-tooltip>
            </div>

            <el-popover
                trigger="hover"
                :offset="1"
                width="50vw"
                :visible="modelVisible"
            >

              <template #reference>
                <div class="launch-model-item" @mouseover="modelPopoverShow" >
                  <el-tooltip
                      :show-after="800"
                      content="菜单"
                      effect="light"
                      placement="bottom"
                  >
                    <el-icon :size="20">
                      <Menu/>
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>

              <div>

                <div class="launch-popover-search">

                  <el-row justify="end">
                    <el-button @click="modelPopoverHide()" :icon="Close" circle/>
                  </el-row>

                </div>

                <el-row>
                  <el-col :span="8">
                    <el-scrollbar>

                      <div class="launch-popover-model-l">
                        <el-row v-for="item in parentMenus">
                          <el-col :span="24" v-if="item.menuPath !== '-'">
                            <el-row class="launch-m-l-item" @click="parentMenusClick(item)">
                              <component :is="item.menuIcon" class="launch-r-icon"/>
                              {{ item.menuName }}
                            </el-row>
                          </el-col>
                          <el-col :span="24" v-if="item.menuPath === '-'">
                            <div class="launch-rgb-hr"/>
                          </el-col>

                        </el-row>
                      </div>

                    </el-scrollbar>
                  </el-col>
                  <el-col :span="16">
                    <el-scrollbar>

                      <div class="launch-popover-model-r">

                        <el-empty
                            v-if="childrenMenus.length <= 0"
                            description="没有可选项"
                            style="height: 98%"
                        />

                        <div v-for="item in childrenMenus" class="launch-p-m-r-item">

                          <div v-if="item.children.length > 0" >
                            <div class="launch-m-r-no-item" v-if="item.menuPath === '#'">
                              <el-row>
                                <component :is="item.menuIcon" class="launch-l-icon"/>
                                {{item.menuName}}
                              </el-row>
                            </div>
                            <div v-else>
                              <div class="launch-m-r-item" @click="itemClick(item.menuPath)">
                                <el-row>
                                  <component :is="item.menuIcon" class="launch-l-icon"/>
                                  {{item.menuName}}
                                </el-row>
                              </div>
                            </div>

                            <div v-for="child in item.children">
                              <div class="launch-m-r-no-item" v-if="child.menuPath === '#'">
                                <el-row>
                                  <component :is="child.menuIcon" class="launch-l-icon"/>
                                  - {{child.menuName}}
                                </el-row>
                              </div>
                              <div v-else>
                                <div class="launch-m-r-item" @click="itemClick(child.menuPath)">
                                  <el-row>
                                    <component :is="child.menuIcon" class="launch-l-icon"/>
                                    - {{child.menuName}}
                                  </el-row>
                                </div>
                              </div>
                            </div>

                          </div>

                          <div v-else>

                            <div class="launch-m-r-no-item" v-if="item.menuPath === '#'">
                              <el-row>
                                <component :is="item.menuIcon" class="launch-l-icon"/>
                                {{item.menuName}}
                              </el-row>

                            </div>
                            <div v-else>
                              <div class="launch-m-r-item" @click="itemClick(item.menuPath)">

                                <el-row>
                                  <component :is="item.menuIcon" class="launch-l-icon"/>
                                  {{item.menuName}}
                                </el-row>

                              </div>
                            </div>

                          </div>
                        </div>

                      </div>

                    </el-scrollbar>
                  </el-col>
                </el-row>

              </div>

            </el-popover>


          </div>
        </el-col>

        <!-- 搜索 -->
        <el-col :span="6">
          <div class="launch-search">
            <el-input
                v-model="searchInput"
                size="default"
                placeholder="请输入搜索内容..."
                :suffix-icon="Search"
            >
            </el-input>
          </div>
        </el-col>

        <!-- 用户 -->
        <el-col :span="4">
          <div class="launch-user">
            <el-popover
                trigger="click"
                :offset="-5"
            >
              <template #reference>
                <div style="width: 150px">
                  <div class="launch-user-image">
                    <el-avatar :size="24" :src="userImg"/>
                  </div>
                  <div class="launch-user-name" :title="username">
                    <div>{{ username }}</div>
                  </div>
                </div>
              </template>
              <div>
                <el-row>
                  <el-button type="danger" @click="logout">安全退出</el-button>
                </el-row>
              </div>
            </el-popover>

          </div>
        </el-col>

      </el-row>

    </el-header>

    <!-- tags -->
    <div class="launch-tags-container">
      <div class="launch-tags-left">
        <el-button style="height: 100%" text :icon="ArrowLeft" plain/>
      </div>
      <el-scrollbar>
        <div class="launch-tags">
          <el-tag class="launch-tag" size="large" effect="plain">主页</el-tag>
          <el-tag class="launch-tag" size="large" :closable="true" effect="dark">核心配置</el-tag>
          <el-tag class="launch-tag" size="large" :closable="true" effect="plain">核心配置</el-tag>
          <el-tag class="launch-tag" size="large" :closable="true" effect="plain">核心配置</el-tag>
          <el-tag class="launch-tag" size="large" :closable="true" effect="plain">核心配置</el-tag>
        </div>
      </el-scrollbar>
      <div class="launch-tags-right">
        <el-button style="height: 100%" text :icon="ArrowRight" plain/>
      </div>
    </div>

    <!-- 内容显示 -->
    <el-main :style="defaultHeight">
      <!-- 路由出口 -->
      <router-view></router-view>
    </el-main>

    <!-- 关于 -->
    <Launch-Affix/>

  </el-container>
</template>

<script setup>
import { ref,getCurrentInstance, onMounted  } from 'vue'
import { Search, Close, ArrowLeft, ArrowRight, Menu } from '@element-plus/icons-vue'
import { useMenusStore } from "./core/stores/menus"

let {proxy} = getCurrentInstance()

const loginApi = proxy.$launchApi.loginApi
const menusApi = proxy.$launchApi.menusApi

let defaultHeight = ref('')
let defaultTopHeight = ref(0)

let searchInput = ref('')

let modelVisible = ref(false)

let userImg = new URL('./assets/images/user/user-img.png', import.meta.url).href

let username = ref("")

/* 菜单 */
let menusStore = useMenusStore()
let parentMenus = ref([])
let childrenMenus = ref([])


if(localStorage.getItem("launchUser")){
  let user = JSON.parse(localStorage.getItem("launchUser"))
  if(user.nickname){
    username.value = user.nickname
  }else {
    username.value = "未设置昵称用户"
  }
}

function toHome(){
  proxy.$router.push('/main/home')
  modelPopoverHide()
}

function modelPopoverShow(){
  modelVisible.value = true
}

function modelPopoverHide(){
  modelVisible.value = false
}

function logout() {
  loginApi.logout().then(data => {
    if(data){
      proxy.$message.success("退出成功！")
      localStorage.clear()
      proxy.$router.push("/login")
    }
  })
}

/**
 * todo 需要完成的功能
 * 前提准备，动态路由的实现。使得主页能获取到最新的路由。
 * 初始路由的准备
 *
 * 1.主页获取当前路由信息，遍历生成菜单项。
 * 2.当菜单点击后，需要添加一个 tags，并且更新其它tags的状态为未选中。并跳转到指定路由组件
 * 3.点击 tags，加载缓存组件，并更新所有 tags 状态
 * 4.点击 tags 的关闭，删除 tags，并且删除当前缓存组件，并且选中最后一个tags，和跳转路由
 *
 * /



/**
 * 处理 el-main 高度自适应
 */
function setDefaultHeight(){
  let header = getComputedStyle(document.documentElement).getPropertyValue("--launch-header-h")
  let tags = getComputedStyle(document.documentElement).getPropertyValue("--launch-top-tags-h")
  defaultTopHeight.value = handleHeight(header) + handleHeight(tags) + 2
}

function handleHeight(h){
  if(h !== undefined){
    return parseInt(h.trim().replace("px",""))
  }
}

function setHeight(){
  let height = window.innerHeight - defaultTopHeight.value
  defaultHeight.value = "height:"+ height + "px"
}

/**
 * 菜单处理
 */
function searchUserMenus() {
  // 获取用户菜单
  menusApi.searchUserMenus(1).then(data => {
    if(data){
      menusStore.menus = data

      parentMenus.value = menusStore.getParentMenus

    }
  })
}

function parentMenusClick(menu) {
  childrenMenus.value = menusStore.getChildrenMenus(menu.id, menusStore.getMenus)
}

function itemClick(path) {
  modelPopoverHide()
  proxy.$router.push("/main"+path)
}


onMounted(() => {
  setDefaultHeight()
  setHeight()
  window.addEventListener("resize",  setHeight);

  searchUserMenus()
})


</script>

<style scoped>
/* header */

/* logo */
.launch-header{
  border-bottom: 1px solid var(--el-border-color);
  height: 60px;
}
.launch-logo{
  width: 100%;
  margin-top: 10px;
}
.launch-logo a img{
  width: var(--launch-log-img-w);
  height: var(--launch-log-img-h);
  margin-left: 20%;
}

/* 功能菜单 */
.launch-model{
  height: 60px;
}
.launch-model-item{
  width: 60px;
  height: 59px;
  float: left;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary-dark-2);
}
.launch-model-item:hover{
  border-bottom: 2px solid var(--el-color-primary-light-3);
  color: var(--el-color-primary-light-3);
  background: var(--el-color-primary-light-9);
  transition: background 0.5s,color 0.2s;
}

.launch-popover-search{
  /*border-bottom: 1px solid var(--el-border-color);*/
  /*height: 30px;*/
}
.launch-popover-model-l{
  float: left;
  width: 98%;
  height: 40vh;
}
.launch-popover-model-r{
  width: 98%;
  height: 40vh;
  float: left;
  border-left: 1px solid #d9ecff;
}
.launch-p-m-r-item{
  width: 150px;
  float: left;
  margin-left: 1%;
  margin-top: 1%;
  background: #d9ecff;
  border-radius: 5px;
}
.launch-m-r-no-item{
  padding-left: 10px;
  margin-left: 10px;
  color: #a7a9ad;
  line-height: 25px;
}
/* 右边 */
.launch-m-r-item{
  cursor: pointer;
  padding-left: 10px;
  border-radius: 5px;
  height: 26px;
  line-height: 26px;

}
.launch-m-r-item:hover{
  color: #F2F6FC;
  background: var(--launch-color);
}
.launch-r-icon{
  padding-top: 13px;
  padding-right: 5px;
  width: 14px;
  height: 14px;
}
/* 左边 */
.launch-m-l-item{
  cursor: pointer;
  height: 40px;
  padding-left: 10px;
  margin-top: 5px;
  line-height: 40px;
  color: var(--launch-color);
  border-radius: 5px;
  transition: background 0.5s,color 0.5s;

}
.launch-m-l-item:hover{
  background: var(--launch-color);
  color: #F2F6FC;

}
.launch-l-icon{
  padding-top: 6px;
  padding-right: 5px;
  width: 14px;
  height: 14px;
}

.launch-rgb-hr{
  margin-top: 10px;
  margin-bottom: 8px;
  margin-left: 10px;
  height: 2px;
  background: linear-gradient(to right, #6d35a6,#00a8fe,#98d6ec,#91cf42,
  #ffff00,#ffa03d,#fd2000);
  width: 90%;
}


/* 搜索 */
.launch-search{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
}

/* 用户 */
.launch-user{
  height: 60px;
  cursor: pointer;
}

.launch-user-image{
  width: 40px;
  height: 59px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.launch-user-name{
  width: 100px;
  height: 59px;
  padding-left: 5px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.launch-user-name div{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* tags */
.launch-tags-container{
  height: var(--launch-top-tags-h);
  border-bottom: 1px solid var(--el-border-color);
  display: flex;
}
.launch-tags-left,.launch-tags,.launch-tags-right{
  height: 30px;
  margin-top: 6px;
}

.launch-tags-left{
  width: 40px;
  padding-right: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.launch-tags{
  width: calc(100vw - 85px);
  display: flex;
}
.launch-tag{
  cursor: pointer;
  margin-left: 5px;
}
.launch-tags-right{
  width: 40px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

</style>
