<template>
  <!--<div class="navbar navbar-default" mode="horizontal" style="height:10px; background-image: linear-gradient(to right, #4776E7 0%, #5A8BFF 100%)">-->
  <div style="height:100%; background-image: linear-gradient(to right, #4776E7 0%, #5A8BFF 100%)">
    <div class="navbar navbar-left" style="padding-left: 1%;color: white;">
      <span style="font-size: 20px;">{{headTitle}}</span>
    </div>
    <div class="right-menu">
      <div class="container-fluid">
        <div class="navbar navbar-right">
          <span class="glyphicon glyphicon-user" style="color: white;padding-right: 3px"></span><span style="color: white;padding-right: 10px">{{user_name}}</span>
          <span class="glyphicon glyphicon-calendar" style="color: white"></span><span style="color: white; padding-right: 10px"> {{dateTime}}</span>
          <el-tooltip v-if='!show' class="item" effect="dark" :content="$t('TheLayoutHeader.lock')" placement="bottom-end">
            <i class="el-icon-lock" aria-hidden="true" @click="pageLock" style="color: white;font-size: 15px;padding-right: 8px"></i>
            <!--<i class="el-icon-lock" aria-hidden="true" @click="pageLock" style="color: white;font-size: 15px;padding-right: 8px"></i>-->
            <!--<button class="btn btn-default navbar-btn" @click="pageLock"><i class="el-icon-lock" aria-hidden="true"></i></button>-->
          </el-tooltip>
          <el-tooltip v-if='show' class="item" effect="dark" :content="$t('TheLayoutHeader.unlock')" placement="bottom-end">
            <!--<button class="btn btn-default navbar-btn" @click="pageUnlock"><i class="el-icon-unlock" aria-hidden="true"></i></button>-->
            <!--<i class="el-icon-unlock" aria-hidden="true" @click="pageUnlock" style="color: white; font-size: 15px;padding-right: 8px"></i>-->
            <i class="el-icon-unlock" aria-hidden="true" @click="pageUnlock" style="color: white; font-size: 15px;padding-right: 8px"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('TheLayoutHeader.logout')" placement="bottom-end">
            <!--<button class="btn btn-default navbar-btn" @click="userLogout" style="width: 35px; margin-right: 8px;"><i class="fa fa-sign-out" aria-hidden="true"></i></button>-->
            <!--<i class="fa fa-sign-out" aria-hidden="true" @click="userLogout" style="color: white; font-size: 15px;padding-right: 10px"></i>-->
            <i class="fa fa-sign-out" aria-hidden="true" @click="userLogout" style="color: white; font-size: 15px;padding-right: 10px"></i>
          </el-tooltip>
        </div>
      </div>
      <div v-if="false" class="mask">
        <div class="container-fluid">
          <div class="navbar-right">
            <el-tooltip class="item" effect="dark" :content="$t('TheLayoutHeader.unlock')" placement="bottom-end">
              <!--<button class="btn btn-default navbar-btn" @click="pageUnlock"><i class="el-icon-unlock" aria-hidden="true"></i></button>-->
              <!--<i class="el-icon-unlock" aria-hidden="true" @click="pageUnlock" style="color: white; font-size: 15px;padding-right: 8px"></i>-->
              <i class="el-icon-unlock" aria-hidden="true" @click="pageUnlock" style="color: white; font-size: 15px;padding-right: 8px"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('TheLayoutHeader.logout')" placement="bottom-end">
              <!--<button class="btn btn-default navbar-btn" @click="userLogout" style="width: 35px; margin-right: 8px;"><i class="fa fa-sign-out" aria-hidden="true"></i></button>-->
              <!--<i class="fa fa-sign-out" aria-hidden="true" @click="userLogout" style="color: white; font-size: 15px;padding-right: 10px"></i>-->
              <i class="fa fa-sign-out" aria-hidden="true" @click="userLogout" style="color: white; font-size: 15px;padding-right: 10px"></i>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
import {LANGUAGE_LOCALSTORAGE, USER_NAME, LOCKED} from '../../utils/constantCollection'
import UserService from '../../domain/services/UserService'
import HelperUtil from '../../utils/HelperUtil'
import UserCommands from '../../commands/UserCommands'
import CommandExecuteContext from '../../commands/CommandExecuteContext'
import { EventBus } from '../../domain/EventBus'

export default {
  name: 'TheLayoutHeader',
  data: function () {
    return {
      flag: true
    }
  },
  // 创建期间
  beforeCreate () {
  },

  created () {
    if (window.sessionStorage.getItem(LOCKED) !== '0') {
      this.show = true
    } else {
      this.show = false
    }
    this.startTimer()
  },

  components: {
    CommandExecuteContext
  },

  data () {
    let dateTime
    const user_name = window.sessionStorage.getItem(USER_NAME)
    let timer
    let timeOut = '' // 界面锁定定时器
    let min_screen = window.innerWidth < 768
    const lang = localStorage.getItem(LANGUAGE_LOCALSTORAGE) || 'zh-cn'
    return {
      // 命令
      // headTitle: HelperUtil.getSystemParams('headTitle'),
      headTitle: configSelf.headTitle,
      commandContext: {},
      confirmFlag: {
        confirm: false
      },

      fromUrl: '/TheLayout',

      user_name: user_name,
      dateTime: dateTime,
      langDrop: false,
      lang: lang,
      show: false,
      dialogFormVisible: false,
      form: {
        name: '',
        password: ''
      },
      formLabelWidth: '80px',
      loginFlag: false
    }
  },

  methods: {
    /***
       * @Description  : 注销
       * @author       : zf
       * @date         : 2019/03/13 14:56
       */
    userLogout: function () {
      let _this = this
      UserService.logout().then((result) => {
        HelperUtil.toLoginPage()
        _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.OTHERS_CODE))
      }).catch((err) => {
        _this.InfoTip.errorTip(_this, err)
      })
    },

    // 改变语言
    changeLanguage (language) {
      localStorage.setItem('user-language', language)
      this.$i18n.locale = language
      this.lang = language
      this.timeFormate(new Date())
      EventBus.$emit('ws', language)
      window.localStorage.setItem('user-language',this.lang)
    },
    clickLangue () {
      let langDropIcon = document.getElementById('langDropIcon')
      if (this.langDrop) {
        langDropIcon.style.transform = 'rotate(0deg)'
      } else {
        langDropIcon.style.transform = 'rotate(-180deg)'
      }
      this.langDrop = !this.langDrop
    },

    // 获取当前时间函数
    timeFormate (timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      let hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
      let mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes()
      // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
      // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
      this.dateTime = year + this.$t('TheLayoutHeader.year') + month + this.$t('TheLayoutHeader.month') + date + this.$t('TheLayoutHeader.day') + ' ' + hh + ':' + mm
    },
    // 定时器函数
    nowTimes () {
      this.timeFormate(new Date())
      clearInterval(this.timer)
      this.timer = setInterval(this.nowTimes, 30 * 1000)
    },

    /***
       * @Description  : 界面锁定/解锁
       * @author       : zf
       * @date         : 2019/05/27 14:41
       */
    pageLock () {
      window.sessionStorage.setItem(LOCKED, '1')
      this.show = true
      this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.LOCKED_CODE))
    },
    pageUnlock () {
      this.confirmCommand.execute()
    },

    /***
       * @Description  : 定时锁定界面
       * @author       : zf
       * @date         : 2019/05/27 15:20
       */
    startTimer () {
      let _this = this
      clearInterval(_this.timeOut)
      _this.timeOut = setInterval(function () {
        if (_this.show === false) {
          _this.pageLock()
        }
      }, 1000 * 60 * 60) // 15分钟定时锁定
    }
  },

  computed: {
    // 解锁认证命令
    confirmCommand () {
      this.confirmFlag.confirm = false
      this.flag = false
      return UserCommands.confirmUserCommand(this.commandContext, this.confirmFlag)
    }
  },

  watch: {
    // 监听解锁认证
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        if (this.confirmFlag.confirm === true) {
          window.sessionStorage.setItem(LOCKED, '0')
          if (window.sessionStorage.getItem(LOCKED) !== '0') {
            this.show = true
          } else {
            this.show = false
            this.InfoTip.successTip(this, HelperUtil.getStatusCodeObjectByCode(this.successCode.UNLOCKED_CODE))
          }
        }
      }
      deep: true
    }
  },

  // 挂载完成时
  mounted () {
    this.nowTimes()
    window.addEventListener('keydown', this.startTimer)
    window.addEventListener('click', this.startTimer)
    window.addEventListener('mousedown ', this.startTimer)
    window.addEventListener('mousemove', this.startTimer)
    window.addEventListener('scroll', this.startTimer)
  },

  // 清除定时器，不然会导致页面崩溃
  beforeDestroy () {
    window.removeEventListener('keydown', this.startTimer)
    window.removeEventListener('click', this.startTimer)
    window.removeEventListener('mousedown ', this.startTimer)
    window.removeEventListener('mousemove', this.startTimer)
    window.removeEventListener('scroll', this.startTimer)
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.timeOut) {
      clearInterval(this.timeOut)
    }
  }
}
</script>
<style scoped lang="scss">
  .navbar {
    height: 50px;
    line-height: 50px;
    border-radius: 0px !important;
    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 0 10px;
    }
    .breadcrumb-container {
      float: left;
    }
    .right-menu {
      float: right;
      height: 100%;
      &:focus {
        outline: none;
      }
      .right-menu-item {
        display: inline-block;
        margin: 0 8px;
      }
      .international {
        vertical-align: top;
      }
      .avatar-container {
        height: 50px;
        margin-right: 30px;
        .avatar-wrapper {
          cursor: pointer;
          margin-top: 5px;
          position: relative;
          .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }
          .el-icon-caret-bottom {
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
  }
  .header {
    color: #ffffff;
    line-height: 60px;
    user-select: none;
    div {
      display: inline-block;
    }
    .logo {
      width: 240px;
      border-right: 1px solid #C0C4CC;
      margin-left: -20px;
      text-align: center;
      font-size: 25px;
      cursor: pointer;
      .image {
        width: 40px;
        height: 40px;
        vertical-align: middle;
      }
    }
    .logo-hide {
      width: 65px;
      .text {
        display: none;
      }
    }
    .content {
      padding: 0 20px;
      .toggle {
        font-size: 14px;
        cursor: pointer;
      }
    }
    .right {
      float: right;
      .right-item {
        display: inline-block;
        padding: 0 10px;
        min-width: 60px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        .drop-icon {
          transition: transform 0.2s;
        }
      }
      .right-item:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }
      .user-info {
        color: #ffffff;
      }
    }
  }

  @media (max-width: 768px) {
    .header {
      .logo {
        border: none;
      }
      .content {
        float: left;
        margin-left: -20px;
      }
    }
  }
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 998;
    color: white;
  }
</style>