<template>
  <div class="navbar">
    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

    <div class="right-menu">
		<div>
			<!-- <a href="/bigScreen/index.vue" target="_blank">
				<span class="el-icon-s-platform" style="font-size: 0.2rem; line-heigth: 0.6rem !important"/>
				<span style="font-size: 0.2rem; line-heigth: 0.6rem">大屏</span>
			</a> -->
		</div>
		<div class="currentUser">当前用户:<span style="margin-left: 20px;">{{this.userName}}</span></div>
		 <div>
			 <el-popover
				placement="bottom"
				title="信息提醒"
				trigger="click"
				style="margin-right: 50px;"
				>
				<div class="card">
				    <div v-for="item in this.searchInfo" class="card_border">
						<div class="card_top">
							<div>
								{{item.name}}
							</div>
							<div>
								{{item.tel}}
							</div>
							<div class="card_button" @click="gotoView(item)">前往查看</div>
						</div>
						<div class="card_bottom">
							<div style="width: 50%;">需求说明:<span>{{item.remarks}}</span></div>
							<div class="card_button" style="width: 50%;">转交销售</div>
						</div>
					</div>
				</div>
				<div slot="reference" style="margin-right: 30px;">
					<el-badge :value="this.searchInfo.length" class="item" >
						<el-button size="small" icon="el-icon-message-solid">通知</el-button>
					</el-badge>
				</div>
			</el-popover>
		</div>
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <span style="display:block;" @click="show = true">
            <el-dropdown-item>
              布局设置
            </el-dropdown-item>
          </span>
          <router-link to="/user/center">
            <el-dropdown-item>
              个人中心
            </el-dropdown-item>
          </router-link>
          <span style="display:block;" @click="open">
            <el-dropdown-item divided>
              退出登录
            </el-dropdown-item>
          </span>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Doc from '@/components/Doc'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import Avatar from '@/assets/images/avatar.png'
import { getAllnotice} from "@/api/narvInterface.js" 
export default {
  components: {
    Breadcrumb,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    Doc
  },
  data() {
    return {
      Avatar: Avatar,
      dialogVisible: false,
	  userId:'',
	  searchInfo:[],
	  userName:''
	  
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'device',
      'user',
      'baseApi'
    ]),
    show: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    }
  },
  mounted() {
    this.Allnotice();
    this.getUsername();
	// 通知减少
	this.$store.state.settings.Allnotice = ()=>{
		this.Allnotice();
	};
  },
  methods: {
	  // 获取username
	  getUsername(){
		  this.userName=this.$store.getters.user.username;
		  console.log(this.userName,"userName---------------")
	  },
	  // 点击查看跳转
	   gotoView (item){
		   console.log(item)
		   console.log("点了点了")
		    this.$router.push({
				 path: '/customer/customerManagement',
				 query: {
				   id: item.id,
				 }// 要传递的参数
	     })
	  },
	  Allnotice(params){
		  this.userId=this.$store.getters.user.id;
		  var params = {
		     userId:this.userId
		  };
		 getAllnotice(params).then((res) => {
		 console.log(res,"已读接口-----")
		 this.searchInfo=res.object
		 console.log(this.searchInfo,'this.searchInfo')
		 });
		  
	  },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
      })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
	display: flex;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
.card{
	width: 390px;
	height: 334px;
	background: inherit;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 0px;
	min-height: 330px;
	overflow-y: auto;
}
.card_border{
	width: 100%;
	height: 65px;
	border-bottom: 1px solid  rgba(121, 121, 121, 1);
}
.card_top{
	width:100%;
	height: 50%;
	display: flex;
	justify-content: space-around;
	align-items:center;
	
}
.card_bottom{
	width:100%;
    height: 50%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	
}
.card_button{
	font-family: Microsoft YaHei;
	font-size: 14px;
	color: #169bd5;
	text-align: center;
}
.currentUser{
	font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
	font-weight: 700;
	font-style: normal;
	margin-right: 50px;
	margin-top:8px;
}
.item{
	margin-top: 8px;
	margin-right: 20px;
}
</style>
