<template>
  <el-header>
    <div class="left">
      <Crumbs :crumbs="getCrumbs"></Crumbs>
    </div>
    <div class="right">
      <!-- <el-tag>当前环境：{{ env }}</el-tag> -->
      <el-select v-model="env" @change="envChange" placeholder="请选择环境">
        <el-option v-for="item in envList" :key="item.key" :label="item.desc" :value="item.key">
        </el-option>
      </el-select>
      <el-button type="primary" @click="logout">退出</el-button>
    </div>
  </el-header>
</template>

<script>
import { getNamespaceList } from '@/api/getXyqbData/'
import Crumbs from './Crumbs'
import { mapGetters } from 'vuex'
export default {
  name: 'Header',
  data() {
    return {
      envList: [],
      env: window.sessionStorage.getItem('env')
    }
  },
  computed: {
    ...mapGetters({
      getCollapseState: 'header/CollapseState',
      getCrumbs: 'header/Crumbs'
    })
  },
  methods: {
    getEnvList() {
      getNamespaceList().then((resp) => {
        this.envList = resp.data.data
      })
    },
    envChange(newEnv) {
      window.sessionStorage.setItem('env', newEnv) // 重新设置session里的值
      this.$router.go(0) // 刷新页面
    },
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/')
    },
    isOpen() {
      // 判断左侧栏是否展开或收缩
      if (this.getCollapseState === false) {
        this.$store.commit('header/setCollapse', true)
        this.$notify({
          title: '成功',
          message: '关闭左侧导航栏',
          type: 'success',
          duration: 1000
        })
      } else {
        this.$store.commit('header/setCollapse', false)
        this.$notify({
          title: '成功',
          message: '打开左侧导航栏',
          type: 'success',
          duration: 1000
        })
      }
    }
  },
  created() {
    this.getEnvList()
  },
  components: {
    Crumbs
  }
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #525e7d;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.right {
  display: flex;
  margin: 10px 20px 0 0;
  > .el-tag {
    margin-top: 5px;
    margin-right: 15px;
  }
  > .el-button {
    height: 40px;
  }
  > .el-select {
    width: 150px;
    margin-right: 20px;
  }
}
</style>
