<template>
    <div class="header-wrapper ">
      <div class="container">
        <div class="logo">
          <router-link to="/">
            <img src="../../assets/images/logo.png">
          </router-link>
        </div>
        <div class="login-info">
          <div v-if="user" class="has-login">
            <ul>
              <li>
                <span class="username">{{ user.userName }}</span>
              </li>
            </ul>
          </div>
          <div v-else="" class="not-login">
            <ul>
              <router-link to="/login" tag="li">
                <a>登录</a>
              </router-link>
              <router-link to="/register" tag="li">
                <a>注册</a>
              </router-link>
            </ul>
          </div>
        </div>
        <div class="nav">
          <ul>
            <li>
               <router-link to="/">首页</router-link>
            </li>
            <li>
              <router-link to="/index">产品服务</router-link>
            </li>
            <li>
              <router-link to="/index">任务中心</router-link>
            </li>
            <li>
              <router-link to="/index">个人中心</router-link>
            </li>
            <li>
              <router-link to="/index">帮助与支持</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: 'header',
      computed: {
        user () {
          return {
            userName: 'huhanling'
          }
        }
      },
      methods: {
        logout () {
          localStorage.removeItem('user')
          this.$store.dispatch('setUser', null)
          this.$router.push({path: '/'})
        }
      }
    }
</script>

<style lang="scss" scoped="">
    .header-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      line-height: 70px;
      font-size: 14px;
      border-bottom: 1px solid #cfcfcf;
      box-shadow: 0 1px 1px #efefef;
      background:#fff;
      a{
        text-decoration: none;
      }
      ul{
        margin: 0;
        padding: 0;
        >li{
          display: inline-block;
        }
      }
      .container {
        .logo{
          float: left;
        }
        .login-info, .nav{
          float: right;
          margin-left: 50px;
        }
        .login-info{
           padding: 0 0 0 25px;
           background: url("../../assets/images/user.png") 0 center no-repeat;
           width:55px;
          .has-login{
            .username{
              display: inline-block;
              max-width: 50px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              vertical-align: top;
            }
          }
        }
        .nav ul li{
          width: 100px;
          a{
            color: #333333;
            display: block;
            text-align: center;
          }
          a:hover{
            color: #fff;
            background-color: #0daae5;
          }
        }
      }
    }
</style>

