<template>
  <div class="ls-top-nav"
    v-loading.fullscreen.lock="loading">

    <div class="ls-logo-wrap">
      <div class="ls-logo" v-show="!isCollapse"></div>
      <div class="ls-more" @click="clickAside"></div>
    </div>

    <div class="ls-menu">
      <el-menu
        v-if="menus.length > 0"
        :default-active="activeTopMenu"
        mode="horizontal"
        @select="onSelect"
        :background-color="variables.navTopBg"
        :text-color="variables.navTopColor"
        :active-text-color="variables.navTopColor">

        <el-menu-item
          v-for="item in menus"
          :index="item.id"
          :key="item.id">
          {{ item.name }}
        </el-menu-item>

      </el-menu>
    </div>
    <div class="btn-wrap">
      <el-button @click="handleGuide" type="text" icon="el-icon-guide" size="small">操作指引</el-button>
    </div>
    <div class="ls-user">
      <div class="ls-user-info">
        <img v-if="userImg" class="ls-user-photo" :src="userImg">
        <img v-else class="ls-user-photo" :src="userPhoto">
        <span v-show="user">{{ user.userName }}</span>
      </div>
    </div>

    <div class="ls-sign" @click="signOut"></div>
  </div>
</template>

<script>
//导入scss 变量
import _variables from '@/assets/css/_variables.scss'

export default {
    name: 'top',
    components: {},
    mounted: function (){
      this.loadTopMenus();
      this.getUserImg();
    },
    methods: {
      loadTopMenus: function () {
        //this.loading = true;
        let th=this;
        this.$ajax.post({
            domain: 'awsUrl',
            url   : 'awsJd',
            data  : {
                sid: this.sid,
                sys: this.$config.getUrl('awsSys'),
                cmd: this.$config.getUrl('cmd.getCrmNavs')
            },
            requestType: 'form',
            success: function(res){
              debugger;
                let data1 = res.data;
                if(res.result=="error"){
                  th.$ajax.sessionTime('会话超时，请重新登录');
                }else{
                  th.$store.commit('put_user', data1.user);
                  localStorage.setItem('user',JSON.stringify(data1.user))
                  if (data1.navs.length > 0) {
                    th.$store.commit('put_active_top_menu', data1.navs[0].id);
                    th.$store.commit('put_menus', data1.navs);
                  }
                }
                //this.loading = false;
            }.bind(this),
            error: function(res) {
              debugger;
              this.$ajax.sessionTime(res.errorCode);
            }.bind(this)
        });
      },
      onSelect: function (key, keyPath) {
        // 设置顶层菜单对应左侧栏
        this.$store.commit('put_active_top_menu', key);
      },
      clickAside: function () {
        this.isCollapse = !this.isCollapse;
        if (this.isCollapse) {
          //收起
          $('.ls-more').css('left', 0);
          $('.ls-menu').css('left', 64);
        } else {
          //展开
          $('.ls-more').css('left', 134);
          $('.ls-menu').css('left', 200);
        }
        this.$emit('aside', this.isCollapse);
      },
      signOut: function () { // 退出登录
        let th=this;
        this.$confirm('是否要退出?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          th.$ajax.logout(this.sid);
          }).catch(() => {});
      },
      //获取 用户头像
      getUserImg() {
        let uid = this.$common.getUrlParams('uid');
        if(uid){
          this.$ajax.get({
            domain: 'ddingtUrl',
            url: "dding.getUserImg",
            data: {uid},
            success: function(res) {
              if (res.errorCode === 200) {
                this.userImg = res.data || '';
              }
            }.bind(this)
          })
        }
      },
      handleGuide(){
        let i = location.href.lastIndexOf('/');
        let url = location.href.substring(0, i+1);
        window.open(url+'operatGuide');
      },
    },
    computed: {
      sid: function () {
        return this.$store.state.sid;
      },
      user: function () {
        return this.$store.state.user;
      },
      userPhoto: function () {
        if (this.user && this.user.photo) {
          return '/portal/r/' + this.user.photo;
        }
        return '/portal/commons/img/photo.png';
      },
      menus: function () {
        return this.$store.state.menus;
      },
      activeTopMenu: function () {
        return this.$store.state.activeTopMenu;
      },
      //scss 变量
      variables: function(){
        return _variables;
      }
    },
    data: function () {
      return {
        isCollapse: false,
        loading: false,
        userImg: '',
      }
    }
}
</script>
