<template>
  <div class="headerbigbox">
    <div class="topNavBox">
      <div class="topNav containerWidth">
        <div class="right-text">您好！欢迎使用E淘供货商平台</div>
        <div class="left-menu">
          <!-- <span>
            <a class="aheft" style="color:#f60;padding-right:20px;" :href="this.sjEdsmallUrl" target="_black">旧版供货商2.0</a>
          </span> -->
          <span v-if="newOrderTip.lookFlag"
          class="helplink bell"
          @click="goPage(1,'/order/orderlist/' + (newOrderTip.status))">
              <i class="el-icon-bell"></i><i class="xiaoxi"></i>
              <span>消息</span>
          </span>
          <span v-else
          class="helplink bell"
          @click="goPage(1,'/order/orderlist')">
              <i class="el-icon-bell"></i>
              <span>消息</span>
          </span>
          <span style="padding-left:0;padding-right:30px;" v-if="false">
            <img class="icon" src="../assets/img/icon_baike.png" alt />
            <a class="aheft" href="https://edspicserver.oss-cn-hangzhou.aliyuncs.com/ROOT/ETao/resource/supplierHandbook.pdf" target="_black">供应链管理手册</a>
          </span>
          <router-link class="helplink" :to="supplierhelpPath">
            <img class="icon" src="../assets/img/icon_ask.png" alt />
            <span>帮助中心</span>
          </router-link>
          <!-- <span><i class="el-icon-connection"></i> 公众号</span> -->
          <!--<el-dropdown class="user-name" trigger="click">
                    <span class="el-dropdown-link">

                         <i><img class="icon" src="../assets/img/er.png" alt=""></i>
                        公众号
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <img class="imgsize" src="../assets/img/demo_codeimg.jpg" alt="">
                        </el-dropdown-item>
                    </el-dropdown-menu>
          </el-dropdown>-->

          <span v-if="false">
            <img class="icon" src="../assets/img/icon_baike.png" alt />
            <a class="aheft" href="http://wiki.edsmall.cn/" target="_black">EDS百科</a>
          </span>
          <!-- <span>
            <img class="icon" src="../assets/img/icon_jx.png" alt />
            <a class="aheft" href="http://sj.edsmall.com/EDS2/Index.aspx" target="_black">EDS精选</a>
          </span> -->

          <el-dropdown class="user-name" trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
                <img class="icon" src="../assets/img/photo.png" alt />
              {{username}}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-cascader-panel v-model="usernameArr" :options="options" @change="handleSelect"></el-cascader-panel>
              <el-dropdown-item command="setpwd">
                <i class="el-icon-unlock"></i>
 密码管理
              </el-dropdown-item>

              <!-- 分割线 divided -->
              <el-dropdown-item command="loginout">
                <i class="el-icon-switch-button"></i> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="topNavMenusBox">
      <div class="topNavMenus containerWidth">
        <div class="logo">
          <a href="/">
            <img src="../assets/img/logo.png" alt />
          </a>
        </div>
        <div class="mainMenus">
          <ul class="navBox">
            <!-- <template v-if="navLine">
                    <span
                        class="bottomBorder"
                        :style="{ transform:'translateX('+translateX+'px)',width:navItemWidth+'px'}"></span>
            </template>-->
            <li
              class="itembox"
              v-for="(item,index) in navItem"
              ref="navItem"
              @click="handleNavItem({index,...item})"
              :key="index"
            >
              <span
                :class="actNavItem==index?'navItem actNavItem':'navItem'"
                ref="navItemSpan"
              >{{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { _getStorage, _removeStorage, _saveStorage } from "@/utils/utils";
export default {
  name: "Header",
  inject: ["reload"],
  data() {
    return {
      supplierhelpPath:'/supplierhelp',
      usernameArr: "",
      hdglUrl:'',
      options: [
        {
          value: "selectbrand",
          label: "选择品牌",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则"
            }
          ]
        }
      ],
      brandName: "",
      // brands:[],//品牌切换
      activeIndex: "2",
      navLine: true,
      //   navItemWidth: 0,
      collapse: false,
      // actNavItem:0,
      navItem: [
        {
          name: "首页",
          route: "/home"
        },
        {
          name: "订单管理",
          route: "/order/orderlist"
        },
        {
          name: "商品管理",
          route: "/goods/list"
        },
        // {
        //   name: "活动管理",
        //   route:"hdgl",
        // //   url: "https://registration.edsmall.com/login"
        // },
        {
          name: "营销推广",
          route: "/marketing/shoprenovation"
        },
        {
          name: "财务对账",
          route: "/checking/order"
        }
      ]
    };
  },
  mounted() {
    // 时间钩子
    //  if (document.body.clientWidth < 1366) {
    //   this.collapseChage();
    // }
    // let { etaoOpenBankStatus } = _getStorage('info')
    //   if(etaoOpenBankStatus==1){
    //     this.$set(this.navItem,2,{
    //       name: "商品管理",
    //       route: "/goods/list"
    //     })
    //  }
    this.brands();
    this.getActUrl();
    this.getNewOrder();
    this.getSupplierhelp();
  },
  computed: {
    ...mapState("navBar", ["actNavItem","newOrderTip"]),
    username() {
      let { brandName } = _getStorage("info");
      //   console.log('info--',_getStorage('info'))
      return brandName ? brandName : this.brandName;
    },
    brandId() {
      let { brandId} = _getStorage("info");
      return brandId ? brandId : '';
    }
  },
  watch: {
    // actNavItem(){
    //   let index = this.actNavItem
    //   if(index + 1 > this.navItem.length){
    //     this.navLine = false
    //   }else{
    //     this.navLine = true
    //     this.changeActItem(index)
    //   }
    // }
  },
  //   filters: {
  //     toText: function(date, format) {
  //       return _ToText(date, format)
  //     }
  //   },
  methods: {
    // 执行方法
        goPage(act,page){
          this.$router.push(page);
          this.clickNavItem(act);
       },
    brands() {
      let arr = [];
      let { brandList } = _getStorage("info");
      if (brandList.length > 0) {
        brandList.map((item, index) => {
          item.value = item.brandId;
          item.label = item.brandName;
        });
      }
      this.options[0]["children"] = brandList;
    },
    ...mapMutations("navBar", ["collapseChage", "clickNavItem","getNewOrder"]),
    changeActItem(index) {
      //   var index = index || 0;
      //   let offsetLeft = this.$refs["navItem"][index].offsetLeft;
      //   let pWidth = this.$refs["navItem"][index].clientWidth;
      //   let width = this.$refs["navItemSpan"][index].clientWidth;
      //   this.navItemWidth = width;
      //   this.translateX = offsetLeft + (pWidth - width) / 2;
    },
    handleNavItem(payload) {
        if(payload.route=='hdgl'){
            let url = this.hdglUrl;
            window.open(url+"&brandId="+this.brandId,'_blank');
        }else{
            // console.log('导航参数--',payload)

            this.clickNavItem(payload);
        }
    },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      //判断是否移动端
      var pathLogin = "/login";
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      if (flag) {
        pathLogin = "/m_login";
      }
      if (command == "loginout") {
        _removeStorage("info");
        this.$router.push(pathLogin);
      }
      if (command == "setpwd") {
        this.$router.push("/set/setpwd");
      }
    },
    handleSelect(key) {
      this.$axios.post("/account/switchbrand?brandId=" + key[1]).then(res => {
        let { code, data, message } = res.data;
        if (code == 200) {
          _removeStorage("firstTan"); //首页第一次弹窗
          _removeStorage("info");
          this.$axios.defaults.headers.common["Authorization"] = data.token;
          _saveStorage("info", data);
          localStorage.setItem('priceformulaId',data.priceformulaId||null)
          this.reload();
        } else {
          this.$message.error(message);
        }
      });
    },
    //获取活动管理地址
    getActUrl() {
      this.$axios.get("/public/acturl").then(res => {
        let { code, data } = res.data;
        if (code == 200) {
        //   this.navItem[3]["url"] = data;
        this.hdglUrl=data;
        }
      });
    },
    //获取供应商帮助的第一条菜单
    getSupplierhelp(){
      this.$axios.get('/supplierhelp/list',{
        params:{
          pageNum:1,
          pageSize:1,
          type:0
        }
      })
      .then((res) => {
        if(res.data.code == 200){
          if(res.data.data.list.length>0){
            this.supplierhelpPath='/supplierhelp/'+res.data.data.list[0].id;
          }
        }
      })
      .catch((err) => {console.log(err)})
    },
  },
  components: {
    // 传入组件
  }
};
</script>

<style lang="scss" scoped>
.xiaoxi{
  display: inline-block;
  vertical-align: text-top;
  background: #F56C6C;
  width:8px;height: 8px;
  border-radius:100%;
 -webkit-animation: Tada 1s 2s both infinite;
  -moz-animation: Tada 1s 2s both infinite;
  -ms-animation: Tada 1s 2s both infinite;
  animation: Tada 1s 2s both infinite;
}
@keyframes Tada {
        0% {
            transform: scale(1);
            transform: scale(1)
        }
        10%,
        20% {
            transform: scale(0.8) rotate(-3deg);
            transform: scale(0.8) rotate(-3deg)
        }
        30%,
        50%,
        70%,
        90% {
            transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg)
        }
        40%,
        60%,
        80% {
            transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg)
        }
        100% {
            transform: scale(1) rotate(0);
            transform: scale(1) rotate(0)
        }
    }

.topNavBox .topNav .left-menu .user-name {
  padding-left: 30px;
  span {
    padding-left: 0;
  }
}
.headerbigbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 112px;
  z-index: 10;
  overflow: auto;
  background: #fff;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 44px;
  line-height: 44px;
}
/deep/.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 0;
  color: #303133;
  height: 44px;
  line-height: 44px;
}
.el-cascader-panel.is-bordered {
  border: 0;
}
.el-cascader-menu {
  height: auto;
}
>>> .el-cascader-menu .el-cascader-menu__wrap {
  height: auto;
}
.helplink {
  color: #333;
}
.bell{
  margin-right: 30px;
  cursor: pointer;
}
.imgsize {
  width: 260px;
}
.topNavBox {
  height: 40px;
  line-height: 40px;
  background-color: #fafafa;
  text-align: center;
  box-sizing: border-box;
  .topNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-menu {
      .el-dropdown {
        color: #000;
      }
      .aheft {
        text-emphasis: none;
        text-decoration: none;
        color: #000;
      }
      span {
        padding-left: 30px;
        &:last-child {
          padding-left: 0;
        }
      }
      .icon {
        width: 17px;
        height: 17px;
        line-height: 1;
        vertical-align: text-top;
        display: inline-block;
        margin-right: 4px;
      }
    }
  }
}
.topNavMenusBox {
  line-height: 70px;
  height: 70px;
  background-color: #fff;
  border-bottom: 2px solid #ff6800;

  .logo {
    img {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .topNavMenus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .navBox {
      white-space: nowrap;
      flex: 1;
      display: flex;
      position: relative;
      color: #000;
      .itembox {
        padding: 0 25px;
        cursor: pointer;
        &:hover {
          color: #f60;
        }
        .navItem {
          padding: 0 5px;
          font-size: 16px;
          line-height: 45px;
          display: inline-block;
        }

        .actNavItem {
          color: #f60;
          // border-bottom: 2px solid #f60;
        }
      }
      .bottomBorder {
        position: absolute;
        height: 3px;
        width: 90px;
        background: #2491a2;
        bottom: 0px;
        transform: translateX(0px);
        transition: transform 0.15s ease-in-out;
      }
    }
  }
}
</style>
