<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#001529"
    text-color="#fff"
    active-text-color="#1378e6"
    :unique-opened="true"
    :collapse="iscollapse"
  >
    <h2 class="title">A2</h2>
    <el-submenu index="/">
      <template slot="title">
        <i class="el-icon-s-home"></i>
        <span>首頁</span>
      </template>
      <el-menu-item index="/everydayCheck">每日質(zhì)檢</el-menu-item>
      <el-menu-item index="/order">采購訂單</el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: "Menu",
  data() {
    return {
      // 在 el-menu 中綁定 :collapse="iscollapse" ，預(yù)設(shè)值為 false，展開菜單
      iscollapse: false,
    };
  },
  mounted() {
    // 用事件總線綁定事件，兄弟組件觸發(fā)后，就傳遞參數(shù)true/false，控制是否展開
    this.$bus.$on("clickCollapse", (iscollapse) => {
      this.iscollapse = iscollapse;
    });
  },
};
</script>
<style scoped>
/* 設(shè)置展開寬度，不至于收縮出現(xiàn)bug */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.title {
  margin: 20px 0 0 20px;
  color: #fff;
}
.el-menu {
  border-right: 0;
  height: 100vh;
}
.el-menu /deep/.el-submenu__title {
  font-size: 13px !important;
}
.el-menu-vertical-demo {
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>

<template>
  <div class="container">
    <div class="left">
      <i :class="iscollapse" @click="clickCollapse"></i>
      <h6>歡迎進入 管理臺</h6>
      <span>內(nèi)部系統(tǒng)使用手冊 ></span>
    </div>
    <div class="right">
      <span><i class="el-icon-date"></i>授課日程</span>
      <span><i class="el-icon-tickets"></i>導(dǎo)入/導(dǎo)出任務(wù)</span>
      <span class="user">
        <img src="./images/headPortrait.gif" alt="" />
        泡泡龍
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      // elementui中的字體圖標
      iscollapse: "el-icon-s-fold",
      // 傳值flag閥門
      flag: false,
    };
  },
  methods: {
    clickCollapse() {
      // 1、每次傳遞先取反
      // 2、觸發(fā)事件總線的折疊事件，傳值判斷是否折疊
      // 3、三元表達式改變折疊按鈕的圖標
      this.flag = !this.flag;
      this.$bus.$emit("clickCollapse", this.flag);
      this.iscollapse =
        this.flag == true ? "el-icon-s-unfold" : "el-icon-s-fold";
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 0 15px;
  font-size: 13px;
  height: 58px;
  border-bottom: 1px solid #cecece;
}
.container > div {
  display: flex;
  align-items: center;
}
.left i {
  padding: 5px;
  font-size: 23px;
  cursor: pointer;
}
.left h6 {
  margin: 0 20px 0 10px;
}
.left span {
  color: #3f9cfb;
  font-weight: 700;
}
.right span > i {
  margin-right: 5px;
}
.right span:nth-child(1) {
  color: #ff6b00;
  font-weight: 700;
}
.right span:nth-child(2) {
  margin: 0 20px;
  color: #6c6c6c;
}
.right span:nth-child(3) {
  font-weight: 700;
  color: #101010;
}
.right .user {
  display: flex;
  align-items: center;
}
.right .user img {
  margin-right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 20%;
}
</style>