<template>
  <div class="header">
    <div class="header-top">
      <div class="toggle-box common_box_defaule">
        <div class="common_box_defaule">
          <img class="img_logo" src="../../assets/img/hszh_logo.jpg">
        </div>
        <div class="common_box_defaule">
          <div class="personal-info common_box_defaule">
              <el-row v-if="path_full !=='/hs/applist'">
                    <el-col style="float: right; margin-left: 10px" >
                      <el-button v-show="path " size="small" @click="go_applist" type="primary">APP列表</el-button>
                    </el-col>
                  </el-row>
              <el-row v-if="path_full !=='/hs/system'">
                    <el-col style="float: right; margin-left: 10px" >
                      <el-button  v-show="path"  size="small" @click="go_system" type="primary">系统升级</el-button>
                    </el-col>
                  </el-row>
                    <!-- <el-row>
                    <el-col style="float: right; margin-left: 10px">
                      <el-button v-show="path" size="small" @click="go_admintool" type="primary">AdminTool</el-button>
                    </el-col>
                  </el-row> -->
                   <el-row v-if="path_full ==='/hs/system'">
                    <el-col style="float: right; margin-left: 10px">
                      <el-button v-show="path" size="small" @click="logout" type="primary">退出登录</el-button>
                    </el-col>
                  </el-row>
            <!-- <el-dropdown
              @command="handleCommand"
            >
              <span class="el-dropdown-link">
                <b style="color:#fff">更多</b>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  style="min-width: 80px;"
                  command="resetID"
                  v-if="bIsAdmin"
                >重置redis起始ID</el-dropdown-item>
                <el-dropdown-item
                  style="min-width: 80px;"
                  command="reload_redis"
                  v-if="bIsAdmin"
                >重新加载redis</el-dropdown-item>
                <el-dropdown-item @click="logout()" style="min-width: 80px;" command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const issuePage = r => require.ensure([], () => r(require('./issue_page')))
const debug_sql = r => require.ensure([], () => r(require('./debug_sql')))
const invitation = r => require.ensure([], () => r(require('./invitation')))
const trans_register = r =>
  require.ensure([], () => r(require('./header_components/trans_register.vue')))
const menu_edit = r =>
  require.ensure([], () => r(require('./header_components/menu_edit.vue')))
export default {
  inject: ['reload'],
  name: 'header',
  components: {
    issuePage,
    debug_sql,
    trans_register,
    menu_edit,
    invitation
  },
  data() {
    return {
      user_info: {},
      problem_dialog_visible: false,
      dialogVisible: false,
      pwdVisable: false,
      selectedStr: '',
      selectedTab: {},
      queryStr: [],
      txt: {},
      debug_sql_dialog_visible: false,
      trans_register_visible: false,
      is_debug_sql_butt: true,
      invitation: false,
      invitation_code: {},
      invitation_show: false,
      path: '',
      path_full: ''
    }
  },
  // 监听路由的变化
  watch: {
    $route(to, from) {
      this.watchpath(to.path)
    },
    user(old, news) {
      this.user = news
    }
  },
  mounted() {
    this.user = sessionStorage.user
    this.watchpath(this.$route.path)
  },
  created() {
  },
  methods: {
    // 去tools页面
    go_admintool() {
      window.open('http://www.baidu.com')
    },
    // 监听路由变化
    watchpath(path) {
      this.$nextTick(_ => {
        if (path === '/login') {
          this.path = false
        } else {
          this.path = true
        }
        this.path_full = path
      })
    },
    CallImprove(vla) {
      this.invitation_show = vla
    },
    // 去APP列表
    go_applist() {
      this.$router.push({ path: '/hs/applist' })
    },
    // 去首页
    go_system() {
      if (sessionStorage.user) {
        this.$router.push({ path: '/hs/system' })
      } else {
        this.$router.push({ path: '/login' })
      }
    },
    // 去客服页面
    // 退出
    logout() {
      sessionStorage.removeItem('user')
      // sessionStorage.removeItem('permissions_tree_list')
      this.$router.push('/')
    },
    handleCommand(command) {
      if (command === 'about') {
        this.getTxt()
      } else if (command === 'setPwd') {
        this.user_info.newPwd = ''
        this.user_info.confirmPwd = ''
        this.pwdVisable = true
      } else if (command === 'logout') {
        this.$store.commit('del_token')
        sessionStorage.removeItem('login_data')
        sessionStorage.removeItem('menu')
        this.$router.push('/login')
      } else if (command === 'resetID') {
        this.resetID()
      } else if (command === 'reload_redis') {
        this.reload_redis()
      }
    }
    // 跳转tab
  }
}
</script>

<style scoped lang="scss" type="text/scss">
.child {
  font-size: 12px;
}
.icon-style {
  margin-right: 5px;
}
.mini_logo {
  position: absolute;
  top: 5px;
  left: 20px;
  width: 200px;
  height: 60px;
  background: url(../../assets/img/hszh_logo.jpg) no-repeat 17px 15px;
  background-size: 80%;
  padding-bottom: 10px;
}
.img_logo {
  height: 50px;
}
.my-search-bar {
  li {
    .name {
      padding-top: 8px;
      line-height: 18px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.header {

  // position: absolute;
  // top: 0;
  width: 100%;
  font-size: 18px;
  color: #333333;
  padding: 20px;
  z-index: 1000;
  box-sizing: border-box;
  clear: both;
  // box-shadow: 10px 5px 5px #e4e4e4;
  .toggle-box {
    height: 40px;
    line-height: 40px;
    text-align: left;
    background-color: transparent;
    color: #999;
    margin-bottom: 10px;
    div .icon-center {
      position: absolute;
      left: 18px;
      top: 10px;
    }
    .company_span {
      color: #ffffff;
      font-size: 18px;
      width: 300px;
      margin-left: 40px;
    }
    .search-bar {
      width: 300px;
    }
    .personal-info {
      width: 400px;
      text-align: left;
      cursor: pointer;
      div {
        width: 50%;
        color: rgb(72, 97, 106);
        b {
          font-weight: normal;
          font-size: 14px;
          position: absolute;
          top: 1px;
        }
      }
    }
    .global-search {
      position: absolute;
    }
  }
}
.active {
  border: 1px solid rgb(229, 209, 214);
  border-bottom-color: #eee;
  border-radius: 4px 4px 0 0;
}
.helper_icon {
  font-size: 14px;
  text-decoration: none;
}
.helper_icon:hover {
  color: #01b7cc;
}
.helper_icon i {
  font-size: 16px;
}
.dvMenu {
  text-align: center;
  cursor: pointer;
  padding: 10px 0;
  width: 100px;
}
.dvMenu:hover {
  background: #f0f0f0;
  color: #42d885;
}
.common_box_defaule {
  display: flex;
  justify-content: space-between;
}
</style>
