<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">{{ user.name }}</span>
      </ul>

      <div class="tabs">
        <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit" @tab-remove="remove">
          <el-tab-pane
              :key="item.name"
              v-for="(item, index) in editableTabs"
              :label="item.title"
              :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
    </nav>
  </div>
</template>
<script>
import axios from "axios";
import Global from "../Global.js";
import {SignOut, ManagerSelfQuery, ShopListQuery} from "../api/getApiRes.js";

let qs = require("qs");
export default {
  data() {
    return {
      user: {
        name: '',
      },
      time: "8:30-17:30",
      tel: "0000-0079-000",
      qq: "0000079000",
      newnum: "",
      newnumState: false,
      left_panel_state: true,
      screen_full: false,
      ShopName: localStorage.shopName,
      userLevelText: "",
      current: globalcurrentWeek(),
      // tabs
      editableTabsValue: '',
      editableTabs: [],
      tabIndex: 2,
      canChange:0
    };
  },
  props: ['tableTabs'],
  watch: {
    tableTabs: {
      handler(newName, oldName) {
        let that = this;
        console.log('newName', newName);
        that.editableTabs = newName;
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.left_hide();//默认展开侧边栏
    this.name = localStorage.shopName;
    this.user.name = localStorage.userName;
    this.canChange = localStorage.canChange;
    console.log(localStorage.canChange);
    // this.getManagerSelfQuery();// TODO 待重构
  },
  methods: {
    remove(p) {
      let that = this;
      if (p == 1) {
        let firstPage = {
          name: '1',
          title: '系统首页',
        };
        that.editableTabs.push(firstPage);
        that.$message.error('最后一页咯');
      }
    },
    //隐藏左侧和显示
    left_hide: function () {
      let that = this;
      that.left_panel_state = !that.left_panel_state;
      this.$emit("lefthide");
    },
    getManagerSelfQuery() {
      let that = this;
      let param = {
        token: localStorage.token,
      };
      let postdata = qs.stringify(param);
      ManagerSelfQuery(postdata).then((res) => {
        let json = res;
        if (json.Code == 0) {
          that.user.name = json.Rs.Name;
          localStorage.shopId = json.Rs.ShopId;
          localStorage.userLevel = json.Rs.Role.Id;
          localStorage.ServiceId = json.Rs.Shop.ServiceId;
          localStorage.ServiceKey = json.Rs.Shop.ServiceKey;

          that.userLevelText = json.Rs.Role.Name;
          // 1 会员 2 系统 3 店铺 4 教练
          switch (parseInt(json.Rs.Role.Id)) {
            case 1:
              that.userLevel = 1;
              break;
            case 2:
              that.userLevel = 2;
              break;
            case 3:
              that.userLevel = 3;
              break;
            case 4:
              that.userLevel = 4;
              break;
          }
          localStorage.shopId = json.Rs.ShopId;
          this.panelSelect(json.Rs.ShopId);
        } else {
          if (json.Code == 1010) {
            that.$message.error(json.Memo + " 错误码：" + json.Code);
            that.$router.push({path: "/login", query: {status: 1}});
            return false;
          } else {
            that.$message.error(json.Memo + " 错误码：" + json.Code);
          }
        }
      });
    },
    // 获取所属店铺
    panelSelect(ShopId) {
      let that = this;
      let param = {
        token: localStorage.token,
      };
      let postdata = qs.stringify(param);
      ShopListQuery(postdata).then((res) => {
        let json = res;
        if (json.Code == 0) {
          json.Rs.map(function (item) {
            if (item.ShopID == ShopId) {
              that.ShopName = item.ShopName;
            }
          });
        } else {
          that.$message.error(json.Memo + " 错误码：" + json.Code);
        }
      });
    },
    // 退出登录
    logoutClick() {
      let that = this;
      that
          .$confirm("此操作将退出当前账号, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            let that = this;
            that.$router.push({path: "/login", query: {status: 10010}});
            that.$message({
              showClose: true,
              message: "当前用户已退出登陆！",
              type: "success",
            });
          })
          .catch(() => {
          });
    },
    changeShop() {
      let that = this;
      that
          .$confirm("此操作将切换当前店铺, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            let that = this;
            that.$router.push({path: "/login", query: {status: 10011}});
            let param = {
              token: localStorage.token,
            };
            let postdata = qs.stringify(param);
            // todo 替换成真实的切换接口
            SignOut(postdata).then((res) => {
              let json = res;
              if (json.Code == 0) {
                localStorage.clear();
                // that.$router.push({path: '/login', query: {status: 1}});
                that.$message({
                  showClose: true,
                  message: "当前当前店铺已切换！",
                  type: "success",
                });
              } else {
                that.$message.error(json.Memo + " 错误码：" + json.Code);
              }
            });
          })
          .catch(() => {
          });
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    },
  },
  components: {},
};
</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: 90%;
  height: 35px;
  margin: 0 auto;
  display: block;
  margin-top: 40px;
  cursor: pointer;
  color: white;
}

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

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

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

/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: #3699FF;
    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>
