<template>
  <div class="banner clearfix">
    <a href="#/shop/shopHome" class="logo fl">
      <img :src="WebConfig.imgMajor">
    </a>
    <ul class="uc-nav fl">
      <li>
        <router-link to="/shop/shopHome">
          我的首页
        </router-link>
      </li>
      <li>
        <router-link to="/personalCenter/accountInfo">
          我的账户
        </router-link>
      </li>
    </ul>
    <div v-if="roleCode === '19'" class="myshoppingCart fr">
      <p title="打开购物车">
        <el-badge :value="totalShopLen">
          <router-link to="/shop/myshoppingCart">
            <i class="iconfont icon-xingzhuang8" />
          </router-link>
          <router-link to="/shop/myshoppingCart">
            购物车
          </router-link>
        </el-badge>
      </p>
    </div>
  </div>
</template>

<script>
// Vuex
import { mapGetters } from 'vuex'
import { getToken } from '@/assets/js/utils/auth'
export default {
  name: 'Banner',
  data() {
    return {
      roleCode: '', // 当前登录人的code
      totalShopLen: 0 // 购物车总数
    }
  },
  computed: {
    /* WebConfig 项目配置数据*/
    ...mapGetters(['getNewShoppingCart', 'WebConfig'])
  },
  watch: {
    getNewShoppingCart: {
      handler(val) {
        this.totalShopLen = val.total
      },
      immediate: true
    }
    // getNewShoppingCart(val) {
    //   console.log(val, 'val')
    //   this.shopcarList = val.records
    //   this.totalShopLen = val.total
    //   this.resultList = val.records.slice(0, 3)
    // }
  },
  mounted() {
    if (getToken()) {
      this.roleCode = this.$store.getters.info.currentRol.roleCode
    }
  }
}
</script>

<style scoped lang="less">
.banner {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  color: #fff;
  .uc-nav {
    display: flex;
    margin-left: 104px;
    li {
      width: 120px;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      border: 1px solid transparent;
      border-bottom: 0;
    }
  }
  .myshoppingCart {
    width: 700px;
    display: flex;
    margin-left: 300px;
    justify-content: flex-end;
    font-size: 18px;
    margin-right: 10px;
    font-size: 15px;
    p {
      border: 1px solid #ccc;
      width: 111px;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    i.iconfont {
      margin-right: 10px;
    }
    /deep/.el-badge__content.is-fixed {
      left: -10px;
      right: auto;
    }
  }
}
.logo {
  height: 50px;
  img {
    width: 100%;
  }
}
</style>
