<template>
  <div class="page-toolbar">

    <!--Logo&系统名称-->
    <div class="t-left">
      <h1>客服系统</h1>
    </div>

    <!--操作菜单-->
    <ul class="t-right">
      <li>
        <span v-text="`当前用户：`+userName"></span>
      </li>
      <li>
        <el-dropdown class="t-r-dropdown">
          <span class="el-dropdown-link">
            <span>个人中心</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="changePwd">修改密码</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="loginOut">系统注销</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>

    <!--修改密码弹框-->
    <template>
      <ChangePwdDialog
          v-if="ui.changePwdDialog.visible"
          :loginName="ui.changePwdDialog.loginName"
          :dialogVisible.sync="ui.changePwdDialog.visible">
      </changePwdDialog>
    </template>

  </div>


</template>

<script type="text/ecmascript-6">
/**
 * @author
 * @date 17-7-19 上午10:23
 * 主页面->顶栏
 **/

import Cookies from 'js-cookie'
import ChangePwdDialog from "../common/ChangePwdDialog";

window.CallServer = null
export default {
  name: 'SisToolbar',
  data() {
    return {
      dialogVisible: false,
      callStateText: '未签入',
      userName: '',
      loginName: '',
      ui: {
        leftMenuShow: true,
        changePwdDialog: {
          visible: false,
          loginName: ''
        }
      }
    }
  },
  components: {
    ChangePwdDialog
  },
  mounted() {
    /* 从session里面取值 */
    this.userName = localStorage.getItem('userName')
    this.loginName = localStorage.getItem('loginName')
  },
  methods: {
    changePwd() {
      this.ui.changePwdDialog = {
        visible: true,
        loginName: this.loginName
      }
    },
    loginOut() {
      this.$confirm('确认退出？')
          .then(_ => {
            this.$cacheUtils.cleanCache()
            Cookies.remove('x-auth-token')
            localStorage.clear()
            window.location.reload()
          })
          .catch(_ => {
          })
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.page-toolbar {
  position: relative;
  width: 100%;
  height: toolbar-height = 60px;
  margin: 0 -20px;
  padding: 0 20px;
  background-color: #324157;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;

  .t-left {
    display -webkit-flex

    h1 {
      height 40px
      line-height 40px
      font-size: 1.3em;
      font-weight: normal;
      /*background url('./imgs/img-logo.png') 0 center no-repeat;*/
      background-size 40px 40px;
      padding 0 0 0 50px;
      margin 0 20px 0 0
    }

  }

  .t-right {
    list-style: none;

    li {
      display: inline-block;
      padding: 0 10px;

      a {
        color: #3a8ee6;
        cursor: pointer;
      }
    }

    .el-dropdown-link {
      color: #3a8ee6;
      cursor: pointer;
    }
  }
}
</style>
