<template>
  <div class="header">
    <div class="logo-text">cloud-authority-ui</div>
    <ul class="nav-list" style="visibility: hidden">
      <li class="menu-li" @click.stop v-for="item in menuData" :key="item.id">
        <router-link :to="'/' + item.to" exact-active-class="linkActive" tag="a" class="router-link"
          v-if="item.type === 'internal-link'">
          <div class="icon-div" :class="item.icon"></div>
          <div class="title-div"><el-badge>{{ item.title }}</el-badge></div>
        </router-link>
        <router-link :to="{path: '/external-link', query: {url: item.to}}" exact-active-class="linkActive" tag="a" class="router-link"
          v-if="item.type === 'external-link'">
          <div class="icon-div" :class="item.icon"></div>
          <div class="title-div"><el-badge>{{ item.title }}</el-badge></div>
        </router-link>
      </li>
    </ul>

    <el-popover popper-class="avatar-popper"  placement="bottom" trigger="click" width="150px">
      <div class="popup-panel">
        <!--<div class="name">{{ agentName }}，您好！</div>
        <div class="split-line"></div>-->
        <div class="btn" @click="toUpdatePasswd">修改密码</div>
        <div class="split-line"></div>
        <div class="btn" @click="exitLogin">退出系统</div>
      </div>
      <div class="portrait" slot="reference">
        <i class="el-icon-caret-bottom"></i>
      </div>
    </el-popover>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="isShowUpdatePasswdDialog" append-to-body :close-on-click-modal="false" width="30%">
      <div class="update-passwd-dialog">
        <el-form ref="updatePasswdForm" label-width="100px" :model="updatePasswdForm" :rules="updatePasswdFormRules">
          <el-form-item label="旧密码：" prop="oldPassword">
            <el-input v-model="updatePasswdForm.oldPassword" clearable placeholder="请输入旧密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="password">
            <el-input v-model="updatePasswdForm.password" clearable placeholder="请输入新密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="repassword">
            <el-input v-model="updatePasswdForm.repassword" clearable placeholder="请再次输入密码" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePasswd">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { router } from '@/router'
import expiringStorage from '@/utils/expiringStorage'

export default {
  props: {
    menuData: Array,
    userInfo: Object
  },
  data () {
    const validatePass = (rule, value, callback) => {
      if (value !== this.updatePasswdForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isShowPopover: false,
      isShowUpdatePasswdDialog: false,
      updatePasswdForm: {
        oldPassword: '',
        password: '',
        repassword: ''
      },
      updatePasswdFormRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      agentName: expiringStorage.get('authentication_user_name')
    }
  },
  methods: {
    toUpdatePasswd () {
      this.updatePasswdForm.oldPassword = ''
      this.updatePasswdForm.password = ''
      this.updatePasswdForm.repassword = ''
      this.isShowUpdatePasswdDialog = true
    },
    updatePasswd () {
      this.$refs.updatePasswdForm.validate((valid) => {
        if (valid) {
          this.$http.put(this.$apiUrl('systemUser009'), this.updatePasswdForm).then((response) => {
            this.$message.success('密码修改成功！')
            this.clearSessionMessage()
            router.push('/logout')
          }).catch((response) => {
            this.$message.error(response.message)
          })
        }
      })
    },
    exitLogin () {
      this.$confirm('您确定要退出系统吗？', '提示', { type: 'warning' }).then(() => {
        router.push('/logout')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
  @import '../style/mixin';
  .header {
    min-width: $screen-min-width;
    /*z-index: 9;*/
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: $header-height;
    line-height: $header-height;
    background: $main-color;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: $white-color;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    .logo-text {
      position: absolute;
      top: 0;
      left: 20px;
      width: auto;
      height: $header-height;
      line-height: $header-height;
      font-size: 18px;
    }
    .nav-list {
      width: auto;
      height: $header-height;
      right: 90px;
      position: absolute;
      top: 0;
      display: inline-flex;
      justify-content: flex-end;
      text-align: right;
      overflow: hidden;
      .menu-li {
        cursor: pointer;
        .router-link{
          font-size: $title-font-size;
          padding: 0 20px;
          display: flex;
          align-items: center;
          color: $white-color;
          .icon-div {
            font-size: $title-font-size;
            width: 16px;
            margin-top: -1px;
            margin-right: 8px;
          }
          .title-div {
            height: 16px;
            margin: ($header-height - 20)/2  0 ($header-height - 12)/2 0;
            line-height: 16px;
          }
        }
        .linkActive, .router-link:hover {
          background: rgba(0,0,0,0.1);
        }
      }
      .system-center {
        width: 100%;
        height: 350px;
        table {
          border-collapse:collapse;
        }
        tr {
          height: 49px;
          border-bottom:1px solid #EEEEEE;
        }
        .title {
          width: 91px;
          min-width: 91px;
          color: #333333;
          line-height: 17px;
          font-size: 13px;
        }
        .content {
          width: 920px;
          color: #000000;
          font-size: 13px;
        }
      }
    }
  }
  .popup-panel {
    width: 100%;
    height: auto;
    .split-line {
      height: 1px;
      border-bottom: 1px solid $table-split-line-color;
      margin: 8px 0;
    }
    .name {
      width: 100%;
      font-size: $text-font-size;
      color: $color-text-regular;
      font-weight: 700;
    }
    .btn {
      width: calc(100% - 12px);
      font-size: $title-font-size;
      color: $color-text-primary;
      text-align: left;
      cursor: pointer;
      padding: 5px 0px 0px 12px;
      border-radius: 2px;
      letter-spacing: 2px;
      line-height: 25px;
      height: 30px;
    }
    .btn:hover {
      color: $white-color;
      background-color: $main-color;
    }
  }
  .portrait {
    position: absolute;
    right: 20px;
    top: 0;
    width: 57px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    color: $white-color;
    display: flex;
    align-items: center;
    font-size: $title-font-size;
    .avatar {
      width: 40px;
      height: 40px;
      margin-right: 5px;
      border-radius: 50%;
    }
  }
  .menu {
    top: 38px !important;
  }
  .update-passwd-dialog {
    width: calc(100% - 100px);
    height: 200px;
    position: relative;
    padding-right: 100px;
  }
</style>
