<template>
  <el-header>
    <!-- <div class="left">
      <el-button icon="el-icon-s-fold" plain @click="toggleCollapse"></el-button>
      <Crumbs :crumbs="getCrumbs"></Crumbs>
    </div> -->
    <div class="left">
      <div class="toggle" @click="toggleCollapse">
        <p multiBtn>
          <i :class="{'el-icon-s-fold': getCollapseState == false?true:false,
          'el-icon-s-unfold': getCollapseState == true?true:false}">
          </i>
        </p>
      </div>
      <Crumbs :crumbs="getCrumbs"></Crumbs>
    </div>
    <div class="right">
      <!-- <el-tag>当前环境：{{ env }}</el-tag> -->
      <el-select v-model="env" @change="envChange" placeholder="请选择环境" style="width:90px">
        <el-option v-for="item in envList" :key="item.key" :label="item.desc" :value="item.key">
        </el-option>
      </el-select>
      <el-dropdown>
        <span class="el-dropdown-link">{{getUserName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-button type="text" @click="logout">退出</el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script>
import { getNamespaceList } from '@/api/getXyqbData/'
import Crumbs from './Crumbs'
import { mapGetters } from 'vuex'
import { logout } from '@/api/Login/'
export default {
  name: 'Header',
  data() {
    return {
      envList: [],
      env: window.sessionStorage.getItem('env')
    }
  },
  computed: {
    ...mapGetters({
      getCollapseState: 'header/CollapseState',
      getCrumbs: 'header/Crumbs',
      // 获取用户名称
      getUserName: 'user/chineseName'
    })
  },
  methods: {
    toggleCollapse() {
      if (this.getCollapseState === false) {
        this.$store.commit('header/setCollapse', true)
      } else {
        this.$store.commit('header/setCollapse', false)
      }
    },
    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()
      logout()
        .then((resp) => {
          this.$store.commit('user/RESET_USER')
          window.sessionStorage.clear()
          this.$router.push('/')
        })
        .catch((error) => {
          this.$message({ type: 'error', message: error })
        })
    }
  },
  created() {
    this.getEnvList()
  },
  components: {
    Crumbs
  }
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #fcfcfc;
  color: #333;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e9eaf1;
  // box-shadow: 0 1px 0 #f4f4f4;
}
.left {
  display: flex;
  .toggle {
    margin-top: 8px;
  }
}

.right {
  display: flex;
  right: 0;
  margin: 10px 20px 0 0;
  > .el-tag {
    margin-top: 5px;
    margin-right: 15px;
  }
  > .el-button {
    height: 40px;
  }
  > .el-select {
    width: 150px;
    margin-right: 20px;
  }
}

p[multiBtn] {
  width: 38px;
  max-width: 38px;
  height: 38px;
  max-height: 38px;
  font-size: 18px;
  border-radius: 38px;
  margin: 2px;
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
}

[multiBtn] i {
  line-height: 38px;
  margin: 0 auto;
}

[multiBtn]:hover {
  box-shadow: 0 0 6px #b3b3b3 inset;
  transition: all 0.5s ease;
}
.el-dropdown-link {
  cursor: pointer;
  color: #606266;
  font-size: 16px;
}
.el-icon-arrow-down {
  margin-top: 10px;
}
</style>
