<template>
  <div class="navbar">
    <div class="navbar-main">
      <div class="logo-container" :style="{ 'padding-left': device === 'mobile' ? '0' : '30px' }">
        <hamburger
          v-if="device === 'mobile'"
          :is-active="sidebar.opened"
          class="hamburger-container"
          @toggleClick="toggleSideBar"
        />
        <img src="/static/setting/logo.png" alt="" />
        <span class="split-line"></span>
        <span class="title">{{ title }}</span>
      </div>
      <div class="right-menu">
        <div class="left-box">
          <el-button
            class="link-button"
            size="small"
            type="success"
            v-for="item of TOP_MENUS"
            :key="item.index"
            @click="openPage(item)"
          >
            {{ item.name }}
          </el-button>
        </div>
        <div class="right-box">
          <el-button
            v-for="item in buttons"
            :key="item.id"
            :class="item.class"
            :type="item.styleType"
            @click="eval(item.script)"
            >{{ item.text }}</el-button
          >
          <el-button class="link-button" size="small" type="success" @click="open3DPage">
            指挥中心
          </el-button>
          <el-button class="link-button" size="small" type="success" @click="openToolsPage">
            模型组态
          </el-button>
          <template v-if="device !== 'mobile'">
            <audio
              id="audioMusic"
              class="audio"
              src="../../assets/music/warn.mp3"
              controls
              autoplay="autoplay"
              hidden="true"
              ref="audio"
            ></audio>
            <search id="header-search" class="right-menu-item" />
            <message-center class="right-menu-item hover-effect" :msgConfig="msgConfig" />
            <error-log class="errLog-container right-menu-item hover-effect" />
            <screenfull id="screenfull" class="right-menu-item hover-effect" />
            <el-tooltip content="布局大小" effect="dark" placement="bottom">
              <size-select id="size-select" class="right-menu-item hover-effect" />
            </el-tooltip>
            <el-tooltip content="主体颜色" effect="dark" placement="bottom">
              <theme-picker
                style="border: 2px"
                class="right-menu-item hover-effect"
                @change="themeChange"
              />
            </el-tooltip>
            <!-- <lang-select class="right-menu-item hover-effect" /> -->
          </template>
          <el-dropdown class="avatar-container" size="small" trigger="click">
            <div class="avatar-wrapper">
              <img src="../../assets/images/user.svg" class="user-avatar" />
              <i class="el-icon-caret-bottom" />
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <router-link to="/">
                <el-dropdown-item> 首页 </el-dropdown-item>
              </router-link>
              <!-- <router-link to="/center/userCenter">
            <el-dropdown-item> 个人中心 </el-dropdown-item>
          </router-link> -->
              <el-dropdown-item @click.native="$refs.pass.dialog = true">
                <span style="display: block">修改密码</span>
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">
                <span style="display: block">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <updatePass ref="pass" :id="user.id" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
// import LangSelect from '@/components/LangSelect'
import Search from '@/components/HeaderSearch'
import ErrorLog from '@/components/ErrorLog'
import ThemePicker from '@/components/ThemePicker'
import MessageCenter from '@/components/MessageCenter'
import Hamburger from '@/components/Hamburger'

import AlarmMessage from '../mixin/alarmMessage'
import updatePass from './updatePass'
import { getInfo, setInfo } from '@/api/system/personal'
import { getList } from '@/api/system/topButton'
import { getToken } from '@/utils/auth'
export default {
  components: {
    // Breadcrumb,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    ErrorLog,
    ThemePicker,
    MessageCenter,
    updatePass,
  },
  mixins: [AlarmMessage],
  data() {
    return {
      user: { id: '', email: '' },
      buttons: [],
      title: this.$basicinfo.company_short_name,
      TOP_MENUS,
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device']),
  },
  created() {
    this.getInfo()
    this.getTopButtonList()
  },
  methods: {
    getInfo() {
      getInfo().then((res) => {
        this.user = res.data
        this.form = {
          id: this.user.id,
          realName: this.user.realName,
          gender: this.user.gender,
          mobile: this.user.mobile,
          email: this.user.email,
        }
      })
    },
    getTopButtonList() {
      getList()
        .then((res) => {
          if (res.code === 20000) this.buttons = res.data.content
        })
        .catch((error) => console.log(error))
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    themeChange(val) {
      this.$store.dispatch('settings/changeSetting', {
        key: 'theme',
        value: val,
      })
    },
    eval(script) {
      eval(script)
    },
    open3DPage() {
      const token = getToken()
      // const url = encodeURIComponent('http://localhost:9901/#/basePage?token=' + token)
      window.open(`${VISUAL_PAGE_PATH}?token=${token}`)
    },
    openToolsPage() {
      const token = getToken()
      // const url = encodeURIComponent('http://localhost:9901/#/basePage?token=' + token)
      window.open(`${TOOLS_PAGE_PATH}?token=${token}`)
    },
    openGasPage() {
      const token = getToken()
      // const url = encodeURIComponent('http://localhost:9901/#/basePage?token=' + token)
      window.open(`http://172.16.214.237:8080/cqj/`)
    },
    async openPage(item) {
      const { routeTo, hideSidebar } = item
      await this.$store.dispatch('settings/changeSetting', {
        key: 'needSidebar',
        value: hideSidebar,
      })
      await this.$store.dispatch('settings/changeSetting', {
        key: 'tagsView',
        value: hideSidebar,
      })
      await this.$store.dispatch('settings/changeSetting', {
        key: 'needBreadcrumb',
        value: hideSidebar,
      })
      this.$router.push(routeTo)
    },
  },
}
</script>

<style lang="scss" scoped>
// 绿色变量
$greenBg: #00827c;
$greenButtonBg: #00b59a;
$greenButtonBorder: #5cf0e1;

// 蓝色变量
$blueBg: #296fd4;
$blueButtonBg: #0084ff;
$blueButtonBorder: #53caff;

.navbar {
  width: 100%;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: $blueBg;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background-image: url('~@/assets/images/nav_bg.png');
  background-repeat: no-repeat;
  background-size: 700px 50px;
  background-position: right 0;

  .navbar-main {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .logo-container {
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    img {
      height: 44px;
      width: auto;
    }
    .split-line {
      width: 2px;
      height: 16px;
      background-color: #fff;
      margin: 0 15px;
    }
    .title {
      color: #fff;
      font-weight: 600;
      letter-spacing: 1.2px;
    }
    .hamburger-container {
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background 0.3s;
      -webkit-tap-highlight-color: transparent;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }

  .right-menu {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    .left-box {
      display: flex;
      justify-items: center;
      padding-left: 20px;
    }
    .right-box {
      display: flex;
      align-items: center;
      // line-height: 50px;
      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }
      }

      .avatar-container {
        margin-right: 30px;
        margin-left: 10px;
        .avatar-wrapper {
          margin-top: 5px;
          position: relative;

          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 2px;
            margin-left: -10px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -5px;
            top: 20px;
            font-size: 12px;
            color: #fff;
          }
        }
      }
      // ::v-deep svg {
      //   fill: #fff !important;
      // }
    }
    .link-button {
      display: inline-block;
      height: 32px;
      width: 100px;
      font-size: 14px;
      margin-right: 10px;
      border: 1px solid #fff;
      background-color: transparent;
      &:hover,
      &:focus {
        background-color: $blueButtonBg;
        border-color: $blueButtonBorder;
        // color: var(--el-button-font-color);
      }
    }
  }
  .nav-bg {
    position: absolute;
    right: 0;
    width: 700px;
    height: 50px;
    z-index: 0;
    pointer-events: none;
  }
}
</style>
