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

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

    <!--操作菜单-->
    <ul class="t-right">
      <li>
        <div>当前用户：{{userName}}</div>
      </li>
      <!-- <li>
        <div>
          <span>话机状态：</span>
          <span>{{callStateText}}</span>
        </div>
      </li> -->
      <!--<li>-->
      <!--<div>-->
      <!--<el-link type="danger" @click="signOut" :underline="false">签出</el-link>-->
      <!--</div>-->
      <!--</li>-->
      <!-- <li>
        <div>
          <el-link type="danger" @click="hangUp" :underline="false">挂断</el-link>
        </div>
      </li> -->
      <!--<li>-->
      <!--<div>-->
      <!--<el-link type="primary" @click="dialogVisible=true" :underline="false">拨号设置</el-link>-->
      <!--</div>-->
      <!--</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="systemSet">修改密码</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>

    <!--拨号设置弹框-->
    <!--
        <el-dialog
          title="拨号设置"
          center
          :visible.sync="dialogVisible"
          width="500px">

          <el-form ref="form" label-suffix="：" :model="config" label-width="90px">
            <el-form-item label="服务地址">
              <el-input v-model="config.address"></el-input>
            </el-form-item>
            <el-form-item label="CTI端口">
              <el-input v-model="config.ctiport"></el-input>
            </el-form-item>
            <el-form-item label="SIP端口">
              <el-input v-model="config.sipport"></el-input>
            </el-form-item>
            <el-form-item label="分机号">
              <el-input v-model="config.extension"></el-input>
            </el-form-item>
            <el-form-item label="桌席号">
              <el-input v-model="config.agent"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="config.passwd"></el-input>
            </el-form-item>
            <el-form-item v-if="!logined">
              <el-button type="primary" @click="loginIn">签入</el-button>
            </el-form-item>
            &lt;!&ndash;  <el-form-item v-else>
                <el-button @click="signOut">签出</el-button>
              </el-form-item>&ndash;&gt;
          </el-form>
        </el-dialog>
    -->

  </div>


</template>

<script type="text/ecmascript-6">
  /**
   * @author
   * @date 17-7-19 上午10:23
   * 主页面->顶栏
   **/
  import ChangePwdDialog from '@components/common/ChangePwdDialog'
  import Cookies from 'js-cookie'

  window.CallServer = null
  export default {
    name: 'SisToolbar',
    data () {
      return {
        config: {
          address: 'server.hongkekonggu.com', // 服务器地址
          extension: '', // 分机号
          passwd: '', // 密码默认是服务器这边设置的1
          agent: '', // 桌席号（一般和分机号相同）
          ctiport: '6443', // CTI端口
          sipport: '7443', // SIP端口
          usesipphone: true,// 使用JS 集成话机
          autoanswer: true, // 是否自动应答
          traceSip: true, // 在控制台输出SIP跟踪信息
        },
        dialogVisible: false,
        logined: 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')
      const AgentNo = localStorage.getItem('agentNo')

      /*初始化签入*/
      // if (AgentNo !== 'null' && AgentNo !== null) {
      //   this.config.extension = AgentNo
      //   this.config.passwd = AgentNo
      //   this.config.agent = AgentNo
      //   this.initCallServer(this.config)
      // }
    },
    methods: {
      hiddenHandler () {
        this.ui.leftMenuShow = !this.ui.leftMenuShow
        this.$emit('listenLeftMenuShow', this.ui.leftMenuShow)
      },
      systemSet () {
        this.ui.changePwdDialog = {
          visible: true,
          loginName: this.loginName
        }
      },
      loginOut () {
        this.$confirm('确认退出？')
          .then(_ => {
            this.$cacheUtils.cleanCache()
            Cookies.remove('x-auth-token')
            localStorage.clear()
            //Cookies.remove('token_xxx')
            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>