<template>
  <el-menu class="navbar" mode="horizontal">
    <hamburger :is-active="sidebar.opened" :toggle-click="toggleSideBar" class="hamburger-container"/>
    <div class="avatar-wrapper" style="position: absolute;right: 0;font-family: 'MiSans Medium',serif">
      <span style="margin-right: 90px">
        <el-badge :hidden="isHiddenBadge" :value="unReadAlarmCount" style="margin: 0 10px;">
          <el-button circle icon="el-icon-message" @click="toErrorPage"/>
        </el-badge>
        <el-button circle icon="el-icon-edit-outline" @click="clickUpdatePassword"/>
      </span>
      <!--<span style="color: white">[ &nbsp</span> <a style="color: white" @click="logout">登出</a> <span style="color: white">&nbsp ] &nbsp</span>-->
      <!--      <el-button type="success" size="mini" class="loginoff" @click="logout">Log Off</el-button>-->
      <!--<el-tag style="width: 60px; text-align: center">-->
      <!--<a style="color: white" @click="logout">登出</a>-->
      <!--</el-tag>-->
      <!--<img :src="require('@/assets/img/user.jpg')" class="user-avatar">-->
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <img :src="require('@/assets/img/user.jpg')" class="user-avatar">
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>{{ name }}</el-dropdown-item>
          <!--          <router-link to="/">-->
          <!--            <el-dropdown-item>Dashboard</el-dropdown-item>-->
          <!--          </router-link>-->
          <!--          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">-->
          <!--            <el-dropdown-item>Github</el-dropdown-item>-->
          <!--          </a>-->
          <!--          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
          <!--            <el-dropdown-item>Docs</el-dropdown-item>-->
          <!--          </a>-->
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">Log Out</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <breadcrumb/>
    <el-dialog
      :before-close="handleClose"
      :visible.sync="isShowDialog"
      title="修改密码"
      width="30%">
      <el-form label-width="80px">
        <el-form-item label="旧密码">
          <el-input v-model="updatePasswordForm.oldPassword"/>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="updatePasswordForm.newPassword1" type="password"/>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="updatePasswordForm.newPassword2" type="password"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button style="height: 40px;width: 100px" @click="hideUpdatePasswordBox()">取 消</el-button>
        <el-button style="height: 40px;width: 100px" type="primary" @click="submitUpdatePassword">提 交</el-button>
      </span>
    </el-dialog>

  </el-menu>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'

export default {
  components: {
    Breadcrumb,
    Hamburger
  },
  data: function() {
    return {
      isShowDialog: false,
      updatePasswordForm: {
        oldPassword: '',
        newPassword1: '',
        newPassword2: ''
      },
      passWordIsOk: true,
      timer1: null,
      unReadAlarmCount: '',
      isHiddenBadge: false
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id'
    ])
  },
  mounted() {
    this.checkPasswordIsOk()
  },
  // 页面关闭 关闭定时器
  beforeDestroy() {
    clearInterval(this.timer1)
  },
  methods: {
    toErrorPage() {
      this.$router.push('/RemoteControl/AlarmSearch/index')
    },
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    // 收次登陆判断是否需要修改密码 若需要自动弹窗修改密码框
    checkPasswordIsOk() {
      var param = []
      param.push(['Personnel_Number', this.$store.state.user.id])
      var Data = this.CreateData('11', '登录基础数据_人员信息_登陆检查密码', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          // 强制修改密码
          if (response.data[0].result === 2) {
            // this.$message.warning(response.data[0].msg)
            this.passWordIsOk = false
            this.clickUpdatePassword()
            this.$message.warning('初始密码 进入系统需先修改密码!')
          }
        }
      })
    },
    handleClose(done) {
      if (!this.passWordIsOk) {
        this.$message.warning('用户为初始密码 进入系统需先修改密码!')
        return
      } else {
        done()
      }
    },
    clickUpdatePassword() {
      this.updatePasswordForm.oldPassword = ''
      this.updatePasswordForm.newPassword1 = ''
      this.updatePasswordForm.newPassword2 = ''
      this.isShowDialog = true
    },
    submitUpdatePassword() {
      if (this.updatePasswordForm.newPassword1 !== this.updatePasswordForm.newPassword2) {
        this.$message.warning('两次密码不一致')
        return
      }
      // 对新密码做复杂度校验 必须要 包含大小写字母以及长度不少于 6位
      // const regex = /^(?=.*[a-z])(?=.*[A-Z]).{6,}$/
      const regex = /^(?=.*[a-z])(?=.*\d).{6,}$/i
      if (!regex.test(this.updatePasswordForm.newPassword1)) {
        this.$message.warning('新密码需包含字母及长度不少于6位')
        return
      }
      var param = []
      param.push(['userId', this.$store.state.user.id])
      param.push(['旧密码', this.updatePasswordForm.oldPassword])
      param.push(['新密码1', this.updatePasswordForm.newPassword1])
      param.push(['新密码2', this.updatePasswordForm.newPassword2])
      var Data = this.CreateData('11', '登录基础数据_人员信息_修改密码', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          if (response.data[0].result === 1) {
            this.$message.success(response.data[0].msg)
            this.passWordIsOk = true
            this.isShowDialog = false
          } else {
            this.$message.warning(response.data[0].msg)
          }
        }
      })
    },
    hideUpdatePasswordBox() {
      if (this.passWordIsOk) {
        this.isShowDialog = false
      } else {
        this.$message.warning('用户为初始密码 进入系统需先修改密码!')
      }
    },
    // 获取最新一条报警信息，弹出提示
    sendAlarmMessage() {
      var param = []
      param.push(['personnel_Number', this.id])
      var Data = this.CreateData('11', 'WEB_报警查询_未读报警记录_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          if (response.data.length > 0) {
            this.$notify.warning({
              title: '报警通知',
              message: `设备 <span style="color: #097e00">${response.data[0].设备名称}</span> 报警,报警信息如下<br><span style="color:#ff9a02;">${response.data[0].报警内容}</span>`,
              position: 'bottom-right',
              dangerouslyUseHTMLString: true
            })
          }
        }
      })
    },
    // 获取未读总报警数量
    getUnReadAlarmCount() {
      var param = []
      param.push(['personnel_Number', this.id])
      var Data = this.CreateData('11', 'WEB_报警查询_未读报警记录_未读条数查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          if (response.data.length > 0) {
            this.unReadAlarmCount = response.data[0].未读条数
            if (this.unReadAlarmCount == 0) this.isHiddenBadge = true
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.navbar {
  height: 50px;
  line-height: 50px;
  border-radius: 0px !important;
  background-color: #354387 !important;

  .hamburger-container {
    line-height: 58px;
    height: 50px;
    float: left;
    padding: 0 16px;
  }

  .avatar-container {
    height: 50px;
    display: inline-block;
    position: absolute;
    right: 20px;

    .avatar-wrapper {
      cursor: pointer;
      padding-top: 7px;
      position: relative;
      font-size: 16px;

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

      .el-icon-caret-bottom {
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }

  .el-tag {
    float: right;
    margin-top: 8px;
    margin-right: 5px;
  }

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

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 13px;
      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;
        }
      }
    }
  }
}

.loginin {
  font-family: 'MiSans Demibold', serif;
  margin-left: 19px;
  border: 1px solid #fafcff;
  border-radius: 10px;
  width: 88px;
  height: 28px;
  background-color: #fafcff;
  color: #354387;
  font-size: 16px;
  padding: 3px 15px;
  margin-top: 30px
}

.loginoff {
  font-family: 'MiSans Demibold', serif;
  margin-left: 15px;
  border-radius: 10px;
  border: 1px solid #fafcff;
  width: 88px;
  height: 28px;
  background-color: #354387;
  color: #fafcff;
  font-size: 16px;
  padding: 3px 15px;
}

.TVshow {
  color: #1aba9d;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  line-height: 40px;
  margin-top: 15px;
  cursor: pointer;
}

.TVshow1 {
  color: #1aba9d;
  width: 50px;
  height: 50px;
  margin-right: 50px;
  line-height: 40px;
  margin-top: 15px;
  cursor: pointer;
}

::v-deep .el-badge__content.is-fixed {
  top: 17px !important;
}

::v-deep .el-button {
  width: 35px;

  i {
    margin-top: -3px !important;
    margin-left: -2px;
  }
}
</style>

