<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 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 phone">
      <svg-icon icon-class="shouji" />
    </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 // 顶部消息数量
    }
  },
  computed: {
    ...mapGetters([
      'usercode', // 工号
      'extension', // 分机号
      'sidebar',
      'avatar',
      'seatflag',
      'telIsLogin', // 是否签入
      'telIsConnected', // 连接是否建立
      'telTopRightState', // 状态信息
      'telTopRightLamp'// 状态灯
    ])
  },
  created() {
    if (!this.telIsConnected && this.seatflag) {
      createWebSocket()
    }
  },
  methods: {
    logout() {
      this.signOut()// 签出
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    // 签出
    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: 60px;
			right: 120px;
			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: 180px;
			color: #ffffff;
			.svg-icon{
				// margin-left: 8px;
				font-size: 16px;
				vertical-align: -0.17em;
			}
		}
		.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;
		}
		.phone{
			width: 60px;
			right: 60px;
			cursor: pointer;
			.svg-icon{
				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>

