<template>
  <div>
    <div class="app-header" >
      <div class="bread" v-if="['搜索', '首页'].includes($route.matched[1].meta.title)">
        {{ ['项目列表', '搜索', '首页'].includes($route.matched[1].meta.title) ? $route.matched[1].meta.title :
        `${$route.matched[0].meta.title} > ${$route.matched[1].meta.title}` }}
      </div>
      <div class="breads" v-if="['项目'].includes($route.matched[0].meta.title)">
        {{ `${$route.matched[0].meta.title} > ` }}
        <span class="children" id="projectNames">{{  $route.matched[1].meta.title }}</span>
      </div>
      <div class="breads" v-if="['开发配置', '系统配置'].includes($route.matched[0].meta.title)">
        {{$route.matched[0].meta.title}} > <span class="children">{{$route.matched[1].meta.title}}</span>
      </div>
      <div class="right-conent">
        <div class="user-bar clear-fix">
          <p class="logout" @click="logout"><i class="el-icon-switch-button" />注销</p>
          <p v-if='this.$store.state.app.userInfo.displayname' @click="resetDialogFormVisible = true">修改密码</p>
          <p class="user-info">
            <i class="img">
              <img :src="userPic" alt />
            </i>
            欢迎，{{this.$store.state.app.userInfo.displayname || 'xuc'}}
          </p>
        </div>
      </div>
    </div>
    <reset-password v-model="resetDialogFormVisible" />
  </div>
</template>

<script>
import logo from '@/assets/img/common/logo-sx.png'
import userPic from '@/assets/img/headImg.png'
import { logout } from '@/api/app'
import resetPassword from '@/components/resetPassword'

import { createNamespacedHelpers } from 'vuex'

const { mapGetters, mapMutations } = createNamespacedHelpers('app')

export default {
  name: 'LeftMenu',
  data() {
    return {
      logo: logo,
      userPic: userPic,
      options: [],
      resetDialogFormVisible: false
    }
  },
  components: {
    resetPassword
  },
  computed: {
    ...mapGetters(['menuList']),
    userInfo() {
      return this.$store.state.app.userInfo
    },
    isActive() {
      return this.$store.state.app.activeAppHeader
    }
    // breadList() {
    //   console.log('123', this.$route.meta.breadList)
    //   return this.$route.meta.breadList || [];
    // }
  },
  watch: {
    $route: {
      handler: function (to, from, next) {
        console.log(to, from, next, '!login')
      },
      immediate: true
    }
  },
  methods: {
    ...mapMutations(['setActiveIndex', 'setUserInfo']),
    logout() {
      this.$confirm('确认要注销吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const token = sessionStorage.getItem('sxToken')
        logout(token)
          .then(rt => {
            this.setUserInfo({})
            // clearCookies()
            this.$router.push({ path: '/login' })
          })
          .catch(er => {
            this.setUserInfo({})
            // clearCookies()
            this.$router.push({ path: '/login' })
            // this.load = false
          })
      }).catch(() => {
      })
    },
    clickHandle(item) {
      this.$router.push({ path: item.url })
    }
  },
  mounted() {
    // this.getNavigationMenu()
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .bread{
    font-weight: 800;
  }
  .children{
    font-weight: 700;
  }
.app-header {
  height: 40px;
  padding: 0 20px;
  display: flex;

  align-items: center;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 5px 10px -5px #dfdfdf;
  position: relative;
  z-index: 10;
  .left-logo {
    // width: 18vw;
    width: 200px;
    margin-right: 40px;

    img {
      width: 100%;
    }
  }

  .center-nav {
    flex: 1;

    ul.nav-bar {
      text-align: center;
      overflow: hidden;

      //  display: none;
      .tab {
        float: left;
        height: 29px;
        line-height: 31px;
        color: $tc2;
        margin: 0 23px;
        font-size: 15px;
        font-weight: bold;
        border-bottom: 2px solid transparent;
        cursor: pointer;
      }

      li.active {
        color: $active-color;
        border-color: $active-color;
      }
    }
  }

  .right-conent {
    width: 300px;
    margin-left: auto;

    .user-bar {
      p {
        float: right;
        height: 28px;
        line-height: 28px;
        margin-right: 32px;
        cursor: pointer;

        &:first-child {
          margin-right: 0;
        }

        i {
          margin-right: 10px;
          vertical-align: middle;
          position: relative;
          top: -1px;
        }
      }

      .user-info {
        display: inline-block;
        cursor: default;

        i.img {
          display: inline-block;
          width: 28px;
          height: 28px;
          margin-right: 10px;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
          }
        }

        span {
          vertical-align: middle;
        }
      }

      .logout {
        i {
          font-size: 18px;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
