<template>
  <div>
    <!--通告弹出框-->
    <el-dialog :title="notice.noticeTitle" :visible.sync="open" width="780px" append-to-body>
      <span v-html="notice.noticeContent"></span>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="userDelNotice(notice.noticeId,notice.noticeType)">删 除</el-button>
      </div>
    </el-dialog>
    <div id="bell_block" @mouseleave="closeBellBlock">
      <ul>
        <li v-for="(item,index) in informList" :key="index">
          <span @click="noticeClick(item.noticeId,item.noticeType)">{{item.noticeTitle}}
            <i v-if="item.status == '1'" class="dots"></i>
          </span>
          <el-button @click="userDelNotice(notice.noticeId,notice.noticeType)" type="danger" size="mini" icon="el-icon-delete"  circle></el-button>
        </li>
      </ul>
    </div>

    <div class="navbar">

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

      <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
      <!--    position: absolute; top: 20px; left: 300px; width: 700px;-->
<!--      <div id="notice">-->
<!--        <span id="notice_text" @click="noticeClick(fiche.noticeId)">{{ fiche.noticeTitle }}</span>-->
<!--      </div>-->
      <breadcrumb
        id="breadcrumb-container"
        class="breadcrumb-container"
        v-if="!topNav"
      />

      <!--    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />-->


      <div class="right-menu">

        <div id="bell">
          <div class="el-icon-bell bell" @mouseenter="handleClickBellBlock">
            <i v-if="noticeState" class="dots"></i>
          </div>
        </div>

        <template v-if="device!=='mobile'">
          <search id="header-search" class="right-menu-item"/>

          <screenfull id="screenfull" class="right-menu-item hover-effect"/>

          <el-tooltip content="布局大小" effect="dark" placement="bottom">
            <size-select id="size-select" class="right-menu-item hover-effect"/>
          </el-tooltip>

        </template>

        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img :src="avatar" class="user-avatar">
            <i class="el-icon-caret-bottom"/>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <el-dropdown-item @click.native="setting = true">
              <span>布局设置</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import { getFiche, getInform, getNotice, read, userDel } from '@/api/system/notice'

export default {
  components: {
    Breadcrumb,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device'
    ]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav
      }
    }
  },
  data() {
    return {
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      noticeState: false,
      fiche: {},
      notice: {},
      informList: []
    }
  },
  mounted() {
    this.initInform()
    let notice_text = document.getElementById('notice_text')
    notice_text.addEventListener('webkitAnimationEnd', function() {
      this.style.marginLeft = 0
    }, false)
    // this.initFiche()
  },
  methods: {
    userDelNotice(id,type) {
      userDel(id)
      setTimeout(()=>{
        if (type != '1'){
          this.initFiche()
        }else {
          this.initInform()
        }
      },300)
      this.open = false
    },
    initInform(){
      this.noticeState = false
      this.informList = []
      getInform().then(res=>{
        let data = res.data
        for (let datum of data) {
         if (datum.status == "1"){
           this.noticeState = true;
         }
        }
        this.informList = data
      })
    },
    initFiche() {
      getFiche().then(res => {
        let data = res.data
        if (data){
          this.fiche = data
        }else {
          this.fiche.noticeTitle = ""
        }
      })
    },
    noticeClick(noticeId,type) {
      getNotice(noticeId).then(res => {
        this.notice = res.data
      })
      this.open = true
      read(noticeId)
      setTimeout(()=>{
        if (type != '1'){
          this.initFiche()
        }else {
          this.initInform()
        }
      },300)
    },
    handleClickBellBlock() {
      let bell_block = document.getElementById('bell_block')
      bell_block.style.display = 'block'
    },
    closeBellBlock() {
      let bell_block = document.getElementById('bell_block')
      bell_block.style.display = 'none'
      // bell_block.onblur = function(){
      //   bell_block.style.display='none';
      // }
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$store.dispatch('LogOut').then(() => {
        //   location.href = '/index';
        // }
        this.$store.dispatch('LogOut').then(() => {
          if (!settings.casEnable) {
            location.href = this.$router.options.base + '/index'
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@keyframes slidein {

  0% {
    margin-left: 100%;
    width: 100%;
  }

  100% {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 1660px) {
  #notice {
    width: 58% !important;
  }
}

@media (max-width: 1500px) {
  #notice {
    width: 53% !important;
  }
}

@media (max-width: 1350px) {
  #notice {
    width: 48% !important;
  }
}

@media (max-width: 1100px) {
  #notice {
    width: 43% !important;
  }
}

@media (max-width: 990px) {
  #notice {
    width: 38% !important;
  }
}

/deep/ .el-dialog__body {
  height: 600px !important;
}

/deep/ .el-dialog__header {
  padding: 20px 30px 10px 20px;
}

/deep/ .el-dialog__headerbtn {
  display: none;
}

/deep/ .el-button--mini.is-circle {
  padding: 6px;
}

#bell_block::-webkit-scrollbar {
  width: 6px;
  background-color: #f8f8f8;
}

#bell_block::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: #adacac;
  border-radius: 4px;
}

#bell_block {
  //display: inline-block;
  width: 250px;
  height: 400px;
  position: absolute;
  right: 80px;
  top: 51px;
  background-color: #FFFFFF;
  box-shadow: 4px 4px 15px #d7d3d3;
  word-wrap: break-word;
  overflow: hidden;
  padding: 0 10px 0 10px;
  z-index: 99999;
  display: none;
  overflow-y: auto;

  ul {
    padding: 0 !important;

    li {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;

      span {
        list-style-type: none;
        color: #000;
        font-size: 16px;
        letter-spacing: 0.2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 26px;
        position: relative;
        cursor: pointer;

        .dots {
          display: block;
          background: #f00;
          border-radius: 50%;
          width: 0.3em;
          height: 0.3em;
          top: 3px;
          right: 9px;
          position: absolute;
        }
      }

      button {
        width: 26px;
        height: 26px;
        font-size: 12px;
        margin-top: -3px;
        //line-height: 26px;
        //margin-left: 3px;
      }
    }
  }
}

.navbar {
  height: 50px;
  overflow: hidden;
  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)
    }
  }

  #notice {
    position: absolute;
    top: 20px;
    left: 300px;
    //width: 950px;
    width: 63%;
    overflow: hidden;

    #notice_text {
      margin-left: 100%;
      animation: 3s linear 0.1s slidein;
    }
  }

  .breadcrumb-container {
    float: left;
  }

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


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

    #bell {
      position: absolute;
      right: 192px;
      padding-top: 3px;
      //margin-top: 4px;
      .bell {
        padding: 3px 7px 0 7px;
        display: inline-block;
        font-size: 21px;
        color: #000000;
        font-weight: bold;
        position: relative;
      }

      .dots {
        display: block;
        background: #f00;
        border-radius: 50%;
        width: 0.3em;
        height: 0.3em;
        top: 0;
        right: 6px;
        position: absolute;
      }
    }

    &: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;
        }
      }
    }
  }
}
</style>
