<!--
  @description: 电商公共头部
  @Modifier：haoFx
  @routerPath:
  @date：  2019/9/27-14:10
-->
<template>
  <div class="top">
    <!--    <span v-if="isShow" class="shopmall-title">你好，欢迎来到网上商城</span>-->
    <div v-if="!isShow" class="back cursor" @click="backShopmallHome">
      <p>
        <i class="iconfont icon-shouye" />返回商城首页
      </p>
    </div>
    <div class="top_nav">
      <p v-if="!isLogin" @click="loginIn">
        您好，请 <span class="colorFont">登录</span>
      </p>
      <p v-if="isLogin">
        您好，{{ info.realName }}
      </p>
      <p v-if="isLogin" class="arrow_down">
        <el-dropdown @command="handleCommand">
          <span class="info pointer fontsize12">
            {{ info.currentRol&&info.currentRol.roleName }}<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="01">
              切换角色
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </p>
      <p v-if="isLogin" class="login_out" @click="loginOut">
        退出
      </p>
      <p class="nav_icon" @click="goToPerson">
        <i class="iconfont icon-xingzhuang10" />个人中心
      </p>
      <p class="nav_icon">
        <i class="iconfont icon-xingzhuang9" />
        <span class="fontsize12" @click="navbarAdd">
          客服电话
        </span>
      </p>
      <!-- <p class="nav_icon">
        <i class="iconfont icon-tishi-xuanzhong" />
        <span class="fontsize12" @click="goToHelpCenter">
          帮助中心
        </span>
      </p> -->
    </div>
    <el-dialog
      :visible.sync="logOut"
      :close-on-click-modal="false"
      title="退出登录"
      width="376px"
      custom-class="shop_mall_dialog"
      center
    >
      <!-- <div id="logOut" class="clearfix">
        <div class="fl logout_img">
          <img src="@/assets/img/shopmall/logOut.png" class="tel_icon">
        </div>
        <div class="fl logout_text">
          确认退出吗？
        </div>
      </div> -->
      <div class="log_out">
        确认要退出登录吗？
      </div>
      <div slot="footer" class="log_footer">
        <el-button type="primary" @click="loginOutOk">
          确定
        </el-button>
        <el-button type="default" @click="logOut = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
    <!--切换角色部门弹框组件-->
    <switchRoleDepartDialog ref="switchRoleDepart" />
  </div>
</template>

<script>
/* api */
import { getUserInfo, getUserMenu } from '@/api/common/loginCenter'
import { getToken } from '@/assets/js/utils/auth'
import { mapGetters } from 'vuex'
import switchRoleDepartDialog from '@views/common/user/switchRoleDepart-dialog'
export default {
  name: 'Navbar',
  components: {
    switchRoleDepartDialog
  },
  props: {
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isLogin: false,
      logOut: false,
      isAdmin: false,
      userLogin: {
        userId: '', // 用户id    非必须
        userName: '', // 用户名 非必须
        realName: ''// 真实名称  非必须
      }
    }
  },
  computed: {
    /* info 用户信息 */
    ...mapGetters(['info'])
  },
  created() {
    if (getToken()) {
      this.isLogin = true
      this.getUserInfoFunc()
    }
  },
  methods: {
    // 当前账户-设置
    handleCommand(command) {
      // command 01为切换角色
      if (command === '01') {
        // 打开弹框操作切换用户角色
        this.$refs.switchRoleDepart.openSwitchRoleDepartDialog()
      }
    },
    navbarAdd() {
      this.$router.push({
        path: '/navbarAdd'
      })
    },
    // 去登录
    loginIn() {
      this.$router.push({ path: '/shopLogin' })
    },
    // 退出调用弹框
    loginOut() {
      this.logOut = true
    },
    // 二次确认退出
    loginOutOk() {
      this.$store.dispatch('shopmallRest')
    },
    // 跳转我的收藏
    goToMyCollection() {
      if (this.isLogin) {
        this.$router.push('/personalCenter/myCollection')
      } else {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
      }
    },
    // 去个人中心
    goToPerson() {
      if (!this.isLogin) {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
        return
      }
      this.$router.push('/personalCenter/accountInfo')
    },
    // 跳转帮助中心
    goToHelpCenter() {
      this.$router.push('/helpCenter')
    },
    // 返回首页
    backShopmallHome() {
      this.$router.push('/shop/shopHome')
    },
    // 获取userInfo，解决刷新商品信息页面时，userInfo丢失的问题
    getUserInfoFunc() {
      getUserInfo().then(response => {
        this.$store.commit('SET_INFO', response.data)
      }).then(() => {
        getUserMenu().then(response => {
          this.$store.commit('SET_MENU', response.data)
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/style/common/public.less";
.colorFont{
  color: @orange;
}
.fontsize12{
  font-size: 12px;
}
.top {
  height: 40px;
  color: #666666;
  font-size: 12px;
  .shopmall-title {
    float: left;
    line-height: 40px;
  }

  .back {
    float: left;
    font-weight: normal;
    padding-left: 25px;
    height: 20px;
    >p {
      margin-top: 10px;
    }
    i {
      position: relative;
      font-weight: bold;
      &:before {
        top: -2px;
        left: -18px;
        position: absolute;
      }
    }
  }
  .top_nav {
    float: right;
    p {
      display: inline-block;
      padding: 0 13px;
      height: 20px;
      margin-top: 10px;
      cursor: pointer;
    }
    .nav_icon {
      .iconfont {
        color: @orange;
        margin-right: 5px;
      }
    }
    .login_out {
      color: @orange;
      font-weight: 400;
    }
  }
  #logOut {
    text-align: center;
    padding: 25px;
    .logout_text{
      margin-left: 31px;
      font-weight: 600;
      line-height: 55px;
    }
    .logout_img{
      margin-left: 56px;
    }
    img {
      width: 56px;
      height: 56px;
    }
  }
}
.log_out {
  text-align: center;
  color: #333;
  font-size: 13px;
}
/deep/ .shop_mall_dialog .el-dialog__header {
  background-color: #fff;
  line-height: 58px;
  height: 58px;
  padding: 0 20px 0 30px;
  .el-dialog__title {
    color: #333;
  }
  .el-dialog__headerbtn {
    line-height: 58px;
    font-size: 18px;
    .el-dialog__close {
      color: #909399;
      &:hover {
        color: #007CCC;
      }
    }
  }
}
/deep/ .shop_mall_dialog .el-dialog__footer {
  background-color: #fff;
  border-top: none;
  padding: 15px 10px 5px 10px;
}
/deep/.shop_mall_dialog .el-dialog__body {
  padding: 0;
}
.log_footer {
  height: 55px;
  line-height: 55px;
  /deep/.el-button--small {
    border-radius: 0px;
  }
  .el-button+.el-button {
    margin-left: 20px;
  }
}
</style>
