<template>
  <div id="headside">
    <nav class="navbar user-info-navbar" role="navigation">
      <i :class="[{ 'el-icon-s-unfold left_hide_icon': left_panel_state }, { 'el-icon-s-fold left_show_icon': !left_panel_state }]"
         @click="left_hide"
      />
      <span class="title">
				场馆管理系统
			</span>
      <ul class="user-info-menu pull-right  list-unstyled">
        <span class="customer_serve logoutBtn" @click="logoutClick">
		  		<i class="el-icon-switch-button"/>
          退出
        </span>
        <span v-if="canChange == 1">
          <span class="customer_serve changeShopBtn" @click="changeShop">切换店铺</span>
        </span>

        <span class="el-dropdown-link customer_serve shopinfo">{{ shopName }}</span>
        <span class="el-dropdown-link customer_serve">{{ userName }}</span>
      </ul>

      <div class="tabs">
        <el-tabs v-model="editableTabsValue" type="card" editable @tab-click="handleTabsEdit" @tab-remove="remove">
          <el-tab-pane v-for="item in editableTabs"
                       :key="item.name" :label="item.title" :name="item.name"/>
        </el-tabs>
      </div>
    </nav>
  </div>
</template>
<script>
import axios from "axios";
import Global from "../Global.js";
import {
  DefaultRequest
} from "@/grpc/base_pb";

let qs = require("qs");
export default {
  data() {
    return {
      userName: '',
      shopName: localStorage.shopName,
      left_panel_state: true,
      // tabs
      editableTabsValue: '',
      editableTabs: [],
      tabIndex: 2,
      canChange: 0
    };
  },
  props: ['tableTabs'],
  watch: {
    tableTabs: {
      handler(newName, oldName) {
        console.log('handler', newName, oldName);
        let that = this;
        that.editableTabs = newName;
        that.editableTabsValue = that.editableTabs[that.editableTabs.length];
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    // this.left_hide();//默认展开侧边栏
    this.name = localStorage.shopName;
    this.userName = localStorage.userName;
    this.canChange = localStorage.canChange;
    console.log(localStorage.canChange);
  },
  methods: {
    //隐藏左侧和显示
    left_hide: function () {
      let that = this;
      that.left_panel_state = !that.left_panel_state;
      this.$emit("lefthide");
    },
    //移除顶部菜单标签
    remove(p) {
      console.log('remove(p)', p);
      let that = this;
      if (this.editableTabs.length == 1) {
        that.$message.error('最后一页咯');
      } else {
        this.editableTabs.forEach((tab, index) => {
          if (tab.clmurl == p) {
            this.editableTabs.splice(index, 1);
            this.$router.push({
              path: this.editableTabs[this.editableTabs.length - 1].clmurl
            })
          }
        });
      }
    },
    //切换tab标签
    handleTabsEdit(targetName, action) {
      console.log('handleTabsEdit', targetName.paneName, action);
      this.$router.push({
        path: targetName.paneName
      })
    },
    //切换店铺
    changeShop() {
      let that = this;
      that.$confirm("此操作将切换当前店铺, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let that = this;
        that.$router.push({path: "/login", query: {status: 10011}});
      }).catch(() => {
      });
    },
    // 退出登录
    logoutClick() {
      let that = this;
      that.$confirm("此操作将退出当前账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let that = this;
        let paraRequest = new DefaultRequest();
        console.log(paraRequest);
        that.client.signOut(paraRequest, {"Token": localStorage.token}, () => {
          that.$message({
            showClose: true,
            message: "当前用户已退出登陆！",
            type: "success",
          });
          localStorage.token = '';
          that.$router.push({path: "/login", query: {status: 10010}});
        });
      });
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

#headside {
  width: 100%;
  height: 72px;
  overflow: hidden;
  float: right;
  z-index: 1111;
  background-color: #0063c9;
}

.user-info-navbar {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  min-height: 72px;
  height: 72px;
  border: 0;
  padding: 0;
  margin-bottom: 0px;

  .user-info-menu > li > a {
    position: relative;
    display: block;
    padding: 12px 20px;
    color: #979898;
    border-bottom: 1px solid #ffffff;
    top: 1px;
    z-index: 5;
  }
}

.customer_serve {
  float: right;
  margin-right: 20px;
  font-size: 14px;
  color: #fff;
  text-align: right;
  line-height: 42px;
}

.logoutBtn {
  width: 80px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin-top: 10px;
  padding: 0;
  border-radius: 250px;
  color: white;
  background-color: #e30000;
  cursor: pointer;
}

#about_us {
  color: #03b1ff;
  cursor: pointer;
}

.dropdown-menu-list a img {
  width: 30px;
  height: 30px;
}

.left_hide_icon {
  width: 20px;
  height: 20px;
  margin-top: 25px;
  float: left;
  margin-left: 15px;
  cursor: pointer;
  color: #badcff;
  font-size: 22px;
}


.left_show_icon {
  width: 20px;
  height: 20px;
  margin-top: 25px;
  float: left;
  margin-left: 15px;
  cursor: pointer;
  color: #badcff;
  font-size: 22px;
}


.user-profile {
  float: right;
  cursor: pointer;
  margin-right: 29px;
}

.el-dropdown-menu__item {
  padding: 5px;
}

.title {
  float: left;
  color: #badcff;
  font-size: 19px;
  line-height: 42px;
  margin-left: 23px;

  em {
    font-style: normal;
    font-size: 14px;
    margin-left: 10px;
    font-size: 14px;
  }
}


.lteHead {
  margin-top: 25px;
  margin-right: 10px;
  float: left;
}

.user-profile span {
  float: left;
  color: #fff;
  font-size: 14px;
  line-height: 43px;
}

.shopinfo span {
  padding-left: 10px;
}

.pull-right {
  float: right;
  height: 30px;
  line-height: 30px;
  color: #fff;
}

.changeShopBtn {
  width: 80px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin-top: 10px;
  padding: 0;
  border-radius: 250px;
  color: white;
  background-color: #E38F00;
  cursor: pointer;
}

.tabs {
  width: 95%;
  height: 55px;
  margin: 0 auto;
  display: block;
  padding-top: 40px;
  cursor: pointer;
  color: #7fd2d2;
}

/deep/ .el-tabs__new-tab {
  display: none;
}

/deep/ .el-tabs__nav-wrap {
  left: 0;
  float: left;
}

/deep/ .el-tabs__item {
  height: 35px;
  color: white;
  line-height: 35px;
}

/deep/ .el-tabs--card > .el-tabs__header {
  width: 100%;
  overflow: hidden;
  display: block;
  border-color: #0063c9;
  margin: 0;
  padding: 0;

  .el-tabs__nav {
    border-color: #0063c9;
    background-color: #0092e5;
    border-radius: 0;
  }
}

@media (min-width: 960px) and (max-width: 1367px) {
  #headside {
    height: 40px;
  }

  .user-info-navbar {
    min-height: 40px;
    height: 40px;
  }

  .title {
    line-height: 40px;
  }

  .user-profile span {
    line-height: 40px;
  }

  .customer_serve {
    float: right;
    margin-right: 20px;
    font-size: 12px;
    color: #fff;
    text-align: right;
    line-height: 45px;
  }

  .logoutBtn {
    width: 80px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
    padding: 0;
    border-radius: 250px;
    color: white;
    background-color: #e30000;
    cursor: pointer;
  }
  .changeShopBtn {
    width: 80px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
    padding: 0;
    border-radius: 250px;
    color: white;
    background-color: #E38F00;
    cursor: pointer;
  }

}
</style>
