<template>
  <div class="avue-top" id="avue-bar">
    <div class="top-bar__left">
      <div class="title-area">
        <img src="~@/assets/images/logo.png" class="logo" />
        <div class="title">{{ website.indexTitle }}</div>
        <div class="breadcrumb" :class="[{ 'breadcrumb--active': isCollapse }]" v-if="setting.collapse && !isHorizontal">
          <i class="icon-navicon icon-size" @click="setCollapse"></i>
        </div>
      </div>

      <div class="top-nav">
        <el-radio-group v-model="currentTab" @change="handleClick">
          <!-- <el-radio-button label="/home"><i class="iconfont">&#xe639;</i>首页</el-radio-button> -->
          <!-- <el-radio-button label="/communal/bdproject/index"><i class="iconfont">&#xe66a;</i>数据管理</el-radio-button> -->
          <!-- <el-radio-button label="/dr/search/index"><i class="iconfont">&#xec17;</i>数据检索</el-radio-button> -->
          <!-- <el-radio-button label="/picture"><i class="iconfont">&#xec17;</i>一张图</el-radio-button> -->
          <!-- <el-radio-button label="/history"><i class="iconfont">&#xec17;</i>一张图</el-radio-button> -->
          <!-- <el-radio-button label="/history"><i class="iconfont">&#xyec17;</i>数据展示</el-radio-button> -->
        </el-radio-group>
      </div>
    </div>
    <div class="top-bar__title">
      <div class="top-bar__item top-bar__item--show" v-if="setting.menu">
        <top-menu ref="topMenu"></top-menu>
      </div>
      <span class="top-bar__item" v-if="setting.search">
        <top-search></top-search>
      </span>
    </div>
    <div class="top-bar__right">
      <el-tooltip v-if="setting.color" effect="dark" :content="$t('navbar.color')" placement="bottom">
        <div class="top-bar__item">
          <top-color></top-color>
        </div>
      </el-tooltip>
      <el-tooltip v-if="setting.debug" effect="dark" :content="logsFlag ? $t('navbar.bug') : logsLen + $t('navbar.bugs')" placement="bottom">
        <div class="top-bar__item">
          <top-logs></top-logs>
        </div>
      </el-tooltip>

      <el-tooltip v-if="setting.lock" effect="dark" :content="$t('navbar.lock')" placement="bottom">
        <div class="top-bar__item">
          <top-lock></top-lock>
        </div>
      </el-tooltip>

      <el-tooltip v-if="setting.theme" effect="dark" :content="$t('navbar.theme')" placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-theme></top-theme>
        </div>
      </el-tooltip>

      <!-- <el-tooltip
        effect="dark"
        :content="$t('navbar.notice')"
        placement="bottom"
      >
        <div class="top-bar__item top-bar__item--show">
          <top-notice></top-notice>
        </div>
      </el-tooltip> -->
      <!-- 语言 -->
      <!-- <el-tooltip
        effect="dark"
        :content="$t('navbar.language')"
        placement="bottom"
      >
        <div class="top-bar__item top-bar__item--show">
          <top-lang></top-lang>
        </div>
      </el-tooltip> -->
      <el-tooltip v-if="setting.fullscren" effect="dark" :content="isFullScren ? $t('navbar.screenfullF') : $t('navbar.screenfull')" placement="bottom">
        <div class="top-bar__item">
          <i :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'" @click="handleScreen"></i>
        </div>
      </el-tooltip>

      <!-- <img class="top-bar__img" :src="userInfo.avatar" /> -->
      <!-- <span class="hello">你好，</span> -->

      <!-- <avue-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></avue-avatar> -->
      <!-- <i class="iconfont user-icon">&#xe62b;</i> -->
      <i class="iconfont icon-okdc-touxiang3 user-icon"></i>

      <el-dropdown>
        <span class="el-dropdown-link">
          <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->

          {{ userInfo.cnName }}
          <i class="iconfont arrow">&#xe62e;</i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!--       <router-link to="/">
            <el-dropdown-item>
              {{ $t('navbar.dashboard') }}
            </el-dropdown-item>
          </router-link> -->
          <!--  <router-link to="/info/index">
            <el-dropdown-item>
              {{ $t('navbar.userinfo') }}
            </el-dropdown-item>
          </router-link> -->
          <!-- <router-link to="/info/setting">
            <el-dropdown-item>
              {{ $t('navbar.setting') }}
            </el-dropdown-item>
          </router-link> -->
          <el-dropdown-item @click.native="logout" divided>{{ $t('navbar.logOut') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { fullscreenToggel, listenfullscreen } from '@/util/util'
// import topLock from './top-lock'
// import topMenu from './top-menu'
// import topSearch from './top-search'
// import topTheme from './top-theme'
// import topLogs from './top-logs'
// import topColor from './top-color'
// import topNotice from './top-notice'
// import topLang from './top-lang'
import { setStore, getStore } from '@/util/store'
export default {
  components: {
    // topLock,
    // topMenu,
    // topSearch,
    // topTheme,
    // topLogs,
    // topColor,
    // topNotice,
    // topLang
  },
  name: 'top-bar',
  data() {
    return {
      currentTab: this.$route.path,
      create: false
    }
  },
  filters: {},
  created() {},
  mounted() {
    listenfullscreen(this.setScreen)
    if (process.env.NODE_ENV === 'production') {
      // this.watermarkInit()
    }
  },
  computed: {
    ...mapGetters(['setting', 'userInfo', 'isFullScren', 'tagWel', 'tagList', 'isCollapse', 'tag', 'logsLen', 'logsFlag', 'isHorizontal'])
  },
  methods: {
    watermarkInit() {
      if (this.create) {
        return
      }
      this.create = true
      let userInfo = getStore({ name: 'userInfo' })
      if (this.$parent.$parent.$el.querySelector('.avue-main')) {
        this.obj = this.watermark({
          id: 'avue-main',
          text: '历史文化数据中心-' + userInfo.cnName,
          color: 'rgba(100,100,100,0.15)'
        })
      }
    },

    handleClick() {
      let that = this
      // console.log(that.currentTab)
      switch (that.currentTab) {
        case '/home':
          that.$router.push({
            path: that.currentTab
          })
          break

        case '/communal/bdproject/index':
          let url = ''
          // that.$store.dispatch('GetMenu', 'dataManageMenu')
          let menu = getStore({ name: 'menu' })
          // console.log(menu)
          if (menu[0]) {
            url = menu[0]['children'][0]['path']
          }
          that.$router.push({
            // path: that.currentTab
            path: url
          })

          break

        case '/dr/search/index':
          // that.$store.dispatch('GetMenu', 'dataSearchMenu')
          that.$router.push({
            path: that.currentTab
          })
          break
        case '/picture':
          window.open('http://192.168.1.110:8004/#/Historical_Building')
          break

        case '/history':
          // if (process.env.NODE_ENV === 'production') {
          //   window.open('http://3deditor.okaygis.com:10099/cesium/view/index.html?pid=1')
          // } else {
          //   let mapUrl = process.env.VUE_APP_ONE_PIC + '#/?token=' + this.$store.getters.token
          //   window.open(mapUrl)
          // }

          let mapUrl = process.env.VUE_APP_ONE_PIC + '#/?token=' + this.$store.getters.token
          window.open(mapUrl)

          break

        default:
          that.noData()
          break
      }
    },
    noData() {
      this.$message({
        showClose: true,
        message: '功能开发中',
        type: 'error',
        duration: 1000
      })
    },
    handleScreen() {
      fullscreenToggel()
    },
    setCollapse() {
      this.$store.commit('SET_COLLAPSE')
    },
    setScreen() {
      this.$store.commit('SET_FULLSCREN')
    },
    logout() {
      this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#avue-bar {
  background: $gray_main no-repeat;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
  .top-bar__left {
    font-size: 22px;
    color: #fff;
    margin-left: 20px;
    margin-top: 0;

    .title-area {
      position: relative;
      padding-right: 50px;
      margin-right: 50px;
      display: flex;
    }

    .breadcrumb {
      // width: 34px;
      position: absolute;
      right: 0;
      top: 0;
      // line-height: 24px;
      margin: 2px 0 0 0px;
      .icon-size {
        font-size: 26px !important;
        // vertical-align: -5px;
      }
    }
    .breadcrumb--active {
      transform: rotate(90deg);
      // margin-top: 28px;
      margin-left: 35px;
    }

    .logo {
      width: 33px;
      height: 31px;
      margin: 20px 10px 0 0;
    }
  }

  .el-dropdown {
    cursor: pointer;
    color: #fff;
    // padding-top: 10px;
    margin-right: 10px;
  }
  .avue-avatar {
    margin-top: 10px;
    margin-right: 10px;
  }
  .user-icon {
    // vertical-align: -10px;
    margin-right: 6px;
    margin-top: 10px;
    color: #fff;
    font-size: 30px;
  }
  .arrow {
    vertical-align: middle;
    margin-left: 5px;
    font-size: 10px;
  }

  .hello {
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    display: inline-block;
    padding-top: 12px;
  }

  .index {
    position: absolute;
    top: 19px;
    left: 500px;
    width: 106px;
    .bg-purple {
      line-height: 28px;
      height: 32px;
      background-color: #2c9eff;
      border-radius: 20px 0 0 20px;
      .icon-index {
        font-size: 24px;
        color: #fff;
        margin-left: 16px;
      }
    }
    .bg-purple-light {
      height: 32px;
      line-height: 21px;
      background-color: #ededed;
      border-radius: 0px 20px 20px 0px;
      .icon-ddd {
        font-size: 12px;
        color: #3385e9;
        margin-left: 7px;
      }
      .txt {
        font-size: 14px;
        font-weight: bold;
        color: #323232;
        margin-left: 3px;
      }
    }
  }
}
</style>
