<template>
  <div class="head_wrap">
    <div class="w98">
      <router-link to="/"><img src="../../assets/images/luckytrip1.png" alt="" class="luckytrip float-l"></router-link>
      <router-link to="/"><img src="../../assets/images/pc/luckytrip.png" alt="" class="luckytrip1 float-l"></router-link>
      <ul>
        <li><router-link to="/orderList/all">订单查询</router-link></li>
      </ul>
      <router-link to="/login" class="float-r userInfo user-icon" title="登录" v-show="!userInfo"><i class="iconfont icon-denglu-"></i></router-link>
      <p class="float-r userInfo" v-show="userInfo">
        <a href="/mine"><img :src="userInfo.headImageUrl || headImg" alt="">
        {{userInfo.phone || userInfo.nickName}} </a>&nbsp;&nbsp;
        <span class="logOut" @click="loginout">退出</span>
      </p>
      <div class="float-r user-icon"><i class="iconfont icon-gongzuoshijian"></i>
        <div class="head-contact-box">
          <div class="contact-t">联系我们</div>
          <div class="contact-c">
            <p class="tel">服务热线：{{telPhone}} </p>
            <p class="p2">工作时间</p>
            <p>周一至周日：09:00-21:00</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import headImg from '../../assets/images/user_logo.png'
    export default {
        name: '',
        data () {
            return {
              telPhone:telPhone,
              userInfo:Cookie.get("data") ? JSON.parse(Cookie.get("data")) : '',
              headImg : headImg
            }
        },
        methods: {
          /**退出登录*/
          loginout(){
            loginout().then(data=>{
              Cookie.remove("data");
              Cookie.remove('security_token');
              this.$router.push("/login");
            })
          },
        },
        mounted(){
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig.styl"
#productMap{
  .w98{
    width 100%
    margin auto
    transition all .6s
  }
}
.head_wrap{
  width 100%
  height 80px
  padding 18px 45px
  box-sizing border-box
  font-size 14px
  &.head-w12{
    .w98{
      width 1170px
    }
  }
  &.mine{
    &.orderDetail{
      background bg
    }
    ul{
      li{
        color #ffffff
        &:hover {
          color: hsla(0,0%,100%,.7);
        }
      }
    }
    .userInfo{
      color #ffffff
      a:hover {
        color: hsla(0,0%,100%,.7);
      }
    }
    .user-icon{
      border 1px solid #ffffff
      color #ffffff
    }
    .luckytrip{
      display none
    }
    .luckytrip1{
      display block
    }
  }
  ul{
    display inline-block
    line-height 54px
    li{
      float left
      margin-right 50px
      color #5e5e5e
      &:hover {
        color rgba(94, 94, 94, 0.73)
      }
    }
  }
  .luckytrip,.luckytrip1{
    display inline-block
    width 140px
    margin-right 45px
  }
  .luckytrip1{
    display none
  }
  .user-icon{
    position relative
    display inline-block
    width 40px
    height 40px
    line-height 40px
    margin-left 10px
    text-align center
    border 1px solid #eee
    border-radius 100%
    color #c0c0bf
    &:hover{
      border 1px solid #c0c0bf
      .head-contact-box{
        display block
      }
    }
  }
  .login{
    display inline-block
    width 90px
    height 44px
    line-height 44px
    text-align center
    border 1px solid rgba(94, 94, 94, 0.43)
    border-radius 21px
    transition all 0.5s
    color #666
    &:hover{
      background #feeae8
      border 1px solid #feeae8
      color #fd8a81
    }
  }
  .userInfo{
    position relative
    margin-left 10px
    img {
      position relative
      display inline-block
      width 42px
      height 42px
      border-radius 100%
      margin-right 10px
      margin-top -15px
      top 15px
    }
    a:hover {
      color rgba(94, 94, 94, 0.73)
    }
    .logOut:hover{
      cursor pointer
      color #fd8a81
    }
  }
  .head-contact-box{
    position absolute
    width 280px
    min-height 110px
    line-height 20px
    right -10px
    margin-top 11px
    padding 15px
    box-sizing border-box
    background #fff
    border-radius 8px
    box-shadow 0 0 3px rgba(0, 0, 0, 0.29)
    text-align left
    color #484848
    z-index 1000
    cursor default
    display none
    &:before{
      content ''
      position absolute
      top  -10px
      right 20px
      margin-left -13px
      border-width 0px 13px 10px 13px
      border-style solid
      border-color  transparent transparent #fff transparent
      z-index 1
    }
    &:after{
      content ''
      position absolute
      top  -11px
      right 18px
      margin-left -13px
      border-width 0px 15px 11px 14px
      border-style solid
      border-color transparent transparent rgba(160, 156, 156, 0.39) transparent
    }
    .contact-t{
      margin-bottom 15px
      font-size 16px
    }
    .tel{
      color #c30d23
      b{
        display block
        font-weight normal
        color #484848
      }
    }
    .p2{
      margin-top 15px
    }
  }
}

</style>
