<template>
  <el-menu class="navbar" mode="horizontal">
    <teloperation v-if="seatflag" />
    <!-- <outboundTask v-if="seatflag && telIsLogin" class="navar_item"/> -->
    <div v-if="seatflag" class="navar_item personalInfoWrapper">
      <div class="personalInfoLine">
        <span class="personalInfoText">登陆账号:{{ usercode }}</span>
        <span class="personalInfoText">姓名:{{ username }}</span>
      </div>
      <div class="personalInfoLine">
        <span class="personalInfoText">小组:{{ teamName }}</span>
        <span class="personalInfoText">分机号:{{ extension }}</span>
      </div>
    </div>
    <div v-if="seatflag" class="navar_item telState">
      <svg-icon :class="{ state_normal: telTopRightLamp, state_abnormal: !telTopRightLamp }" icon-class="zhuangtai" />
      {{ telTopRightState }}
    </div>
    <!-- <div v-if="seatflag" class="navar_item seatState">
			坐席状态
			<svg-icon class="state_abnormal" icon-class="zhuangtai" />
		</div> -->
    <el-popover ref="popover" :value="showTopNotice" visible-arrow popper-class="topNoticePop" placement="bottom" width="360" trigger="click" transition="el-zoom-in-top">
      <TopNotice @getTopNoticeNums="getTopNoticeNum" />
      <OutboundTask />
      <div slot="reference" :class="[seatflag ? 'navar_item notice' : 'navar_item notice notice_right']">
        <svg-icon icon-class="lingdang" />
        <!-- <span class="dot"/> -->
        <span v-if="topNoticeNum" class="badge_dot">{{ topNoticeNum }}</span>
      </div>
    </el-popover>
    <div v-if="seatflag" class="navar_item close">
      <span class="" @click="logout">退出</span>
      <!-- <i class="el-icon-close">退出</i> -->
    </div>
    <el-dropdown class="avatar-container" trigger="click">
      <div class="avatar-wrapper">
        <img :src="!avatar ? '/static/img/user.png' : avatar" class="user-avatar" />
      </div>
      <el-dropdown-menu slot="dropdown" class="user-dropdown">
        <router-link class="inlineBlock" to="/">
          <el-dropdown-item> 首页 </el-dropdown-item>
        </router-link>
        <router-link class="inlineBlock" to="/personalInfo">
          <el-dropdown-item> 个人资料 </el-dropdown-item>
        </router-link>
        <el-dropdown-item divided>
          <span style="display: block" @click="logout">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-menu>
</template>

<script>
import { mapGetters } from "vuex"
import store from "@/store"
import { Send } from "@/utils/telWebsocket"
import { createWebSocket } from "@/utils/telWebsocket"
import Teloperation from "@/components/teloperation"
import OutboundTask from "@/components/outboundTask"
import TopNotice from "@/components/TopNotice"

export default {
  components: {
    Teloperation,
    OutboundTask,
    TopNotice,
  },
  data() {
    return {
      showTopNotice: false, // 是否显示项目到期的消息
      topNoticeNum: 0, // 顶部消息数量
      roleName: "", // 用户角色名称
    }
  },
  computed: {
    ...mapGetters([
      "usercode", // 工号
      "extension", // 分机号
      "username", // 姓名
      "teamName", // 小组
      "sidebar",
      "avatar",
      "seatflag",
      "telIsLogin", // 是否签入
      "telIsConnected", // 连接是否建立
      "telTopRightState", // 状态信息
      "telTopRightLamp", // 状态灯
    ]),
  },
  created() {
    // this.roleName = window.localStorage.getItem("roleName")
    if (!this.telIsConnected && this.seatflag) {
      createWebSocket()
    }
  },
  methods: {
    logout() {
      this.$confirm("您确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.isDisable = false
          this.signOut() // 签出
          this.$store.dispatch("FedLogOut").then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          })
        })
    },
    // 签出
    signOut() {
      // Send({
      //   'Type': 'Logout',
      //   'AgentID': this.usercode,
      //   'AgentExten': this.extension
      // })
      store.dispatch("UpdateCalloutScreen", false)
    },
    // 从子组件获取的 消息数量值
    getTopNoticeNum(value) {
      this.topNoticeNum = value.num
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
  position: fixed;
  z-index: 10;
  right: 0;
  top: 0;
  width: 100%;
  height: 52px;
  line-height: 52px;
  background-color: #373d41;
  border-bottom-color: #373d41;
  border-radius: 0px !important;
  .navar_item {
    position: absolute;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #2a2f32;
  }
  .notice {
    width: 50px;
    right: 110px;
    cursor: pointer;
    // border-left: 1px solid #2a2f32;
    .dot {
      position: absolute;
      right: 18px;
      top: 18px;
      display: block;
      width: 6px;
      height: 6px;
      background-color: #ff0000;
      border-radius: 50%;
    }
    .badge_dot {
      position: absolute;
      right: 8px;
      top: 6px;
      display: block;
      background-color: #ff0000;
      border-radius: 10px;
      color: #fff;
      // display: inline-block;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
      padding: 0 6px;
      text-align: center;
      white-space: nowrap;
    }
  }
  .notice_right {
    right: 60px;
  }
  .telState {
    font-size: 14px;
    // width: 140px;
    padding-right: 15px;
    right: 160px;
    color: #ffffff;
    .svg-icon {
      // margin-left: 8px;
      font-size: 16px;
      vertical-align: -0.17em;
    }
  }
  .personalInfoWrapper {
    font-size: 14px;
    width: 260px;
    height: 52px;
    // padding-right: 15px;
    right: 245px;
    line-height: 25px;
    color: #ffffff;
    .personalInfoLine {
      width: 280px;
      height: 25px;
      .personalInfoText {
        margin-right: 12px;
        font-size: 14px;
        z-index: -1;
      }
    }
  }
  .seatState {
    font-size: 14px;
    width: 100px;
    right: 120px;
    color: #ffffff;
    .svg-icon {
      margin-left: 8px;
      font-size: 16px;
      vertical-align: -0.17em;
    }
  }
  .state_normal {
    color: #009900;
  }
  .state_abnormal {
    color: #f60303;
  }
  .close {
    width: 55px;
    right: 55px;
    cursor: pointer;
    span {
      font-size: 14px;
      color: #ffffff;
    }
  }

  .hamburger-container {
    line-height: 80px;
    height: 50px;
    float: left;
    padding: 0 10px;
  }
  .screenfull {
    position: absolute;
    right: 90px;
    top: 16px;
    color: red;
  }
  .avatar-container {
    height: 50px;
    line-height: 50px;
    width: 60px;
    text-align: center;
    display: inline-block;
    position: absolute;
    right: 0;
    .avatar-wrapper {
      cursor: pointer;
      position: relative;
      .user-avatar {
        width: 36px;
        height: 36px;
        vertical-align: middle;
        border-radius: 50%;
      }
    }
  }
}
</style>

