<template>
  <div class="wrapper-aa">
    <div class="left-aa" @click="payMoney()">
      <img class="showimg" :src="childname?imgshow:imgsq">
    </div>
    <div class="right-aa">
      <el-dropdown>
        <div class="avatar-wrapper">
          <span>王小虎</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <nuxt-link class="wenzi" to="/frontsystem/system/uppwd">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </nuxt-link>
          <el-dropdown-item @click.native="exit()">
            <span>布局设置</span>
          </el-dropdown-item>
          <el-dropdown-item @click.native="exit()">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="center-aa">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          首页
        </el-breadcrumb-item>
        <div v-for="menu in listData" :key="menu.menuId">
          <el-breadcrumb-item v-if="$nuxt.$route.path == menu.path">
            {{ menu.name }}
          </el-breadcrumb-item>
        </div>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
import { getCookie } from '@/utils/util'
import { listMenuAll } from '@/api/userMG'
export default {
  data () {
    return {
      activeIndex: '1',
      childname: false,
      imgshow: require('../assets/img/show.png'),
      imgsq: require('../assets/img/sq.png'),
      username: getCookie('user'),
      sidebar: '',
      avatar: '',
      listData: [], // 菜单列表
      path: this.$route.path
    }
  },
  /**
   * 创建完毕
   */
  created () {
    this.getdata()
  },
  methods: {
    // 获取菜单列表
    getdata (parameter) {
      this.loading = true
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      listMenuAll(parameter)
        .then((res) => {
          this.loading = false
          if (res.code !== 0) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch((err) => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
        })
    },
    toggleSideBar () {
      this.$store.dispatch('app/toggleSideBar')
    },
    handleSelect (key, keyPath) {
      // eslint-disable-next-line no-console
      console.log(key, keyPath)
    },
    payMoney () {
      this.childname = !this.childname
      this.$emit('mytaoge', this.childname)
    },
    // 退出登录
    exit () {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          setTimeout(() => {
            // this.$store.commit('logout', 'false')
            this.$router.push({ path: '/login' })
            this.$message({
              type: 'success',
              message: '已退出登录!'
            })
          }, 1000)
          // loginout()
          //   .then(res => {
          //     if (res.success) {
          //       //如果请求成功就让他2秒跳转路由
          //       setTimeout(() => {
          //         this.$store.commit('logout', 'false')
          //         this.$router.push({ path: '/login' })
          //         this.$message({
          //           type: 'success',
          //           message: '已退出登录!'
          //         })
          //       }, 1000)
          //     } else {
          //       this.$message.error(res.msg)
          //       this.logining = false
          //       return false
          //     }
          //   })
          //   .catch(err => {
          //     // 获取图形验证码
          //     this.getcode()
          //     this.logining = false
          //     this.$message.error('退出失败，请稍后再试！')
          //   })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss">
  .showimg {
    width: 26px;
    height: 26px;
    position: relative;
    top: 7px;
    left: 17px;
  }
  .el-dropdown {
    width: 100%;
  }
  :focus {
    outline: 0;
  }
  .wrapper-aa {
    height: 50px;
    width: 100%;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
  }
  .left-aa {
    float: left;
    width: 70px;
  }
  .center-aa {
    margin-left: 70px;
    margin-right: 100px;
  }
  .right-aa {
    float: right;
    width: 100px;
  }
  .el-breadcrumb {
    line-height: revert !important;
  }

</style>