<template>
  <div class="nav-box">
    <div class="nav-top">
      <div class="con-box clr">
        <div class="logo fl">云芯系统</div>
        <div class="tab-box fl" ref="scrollbox">
          <!--tab 栏目-->
          <div class="item-boxs row verCenter" ref="scrollboxinner">
            <a class="item first row rowCenter verCenter" href="/#/" :class="{'act':$route.path=='/'}">
              <font class="fl">概况</font>
            </a>
            <a class="item row rowCenter verCenter" :class="{'act':(JSON.stringify(item)==JSON.stringify({path: $route.path,title: $route.meta.title,query:$route.query}))}" @click="tabUrl(item)" v-for="item in tabs">
              <font class="fl">{{ item.title }}</font>
              <span class="icon iconfont fl" @click.stop="closetab(item.path)"></span>
            </a>
          </div>
        </div>
        <div class="user-box fr row verCenter">
          <a class="msgh row verCenter" href="javascript:history.go(0)">
            <span class="el-icon-refresh icon"></span>
          </a>
          <div class="line"></div>
          <a href="/云芯操作手册.pdf" class="fl" target="_blank" title="操作手册"><span class="icon iconfont iconwendangguanli fl"></span></a>
          <div class="line"></div>
          <div class="login-v row verCenter">
            <img :src="userinfo.avatar||'https://www.ichunt.com/v3/dist/res/home/images/headimg/boy1.png'" alt="">
            <div class="namex">{{ userinfo.contacts_name || '猎芯网用户' }}</div>
            <div class="lo-box-drop row verCenter">
              <span class="icon iconfont"></span>
              <div class="drop-box">
                <a href="javascript:;" @click="changePwd()">修改密码</a>
                <a href="javascript:;" @click="logout">退出登录</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav-left" v-show="!collapse">
      <div class="meau-con">
        <div class="zankai">
          <span class="icon iconfont fr" @click="zk"></span>
        </div>
        <el-menu class="el-menu-vertical-demo" @open="handleOpen" active-text-color="#1969F9" router :default-active="$route.path" :router="true" :unique-opened="true" @close="handleClose" @select="handleSelect">
          <el-menu-item :index="'/'" :class="{'indextab':isIndexTab}">
            <template slot="title">
              <span class="icon iconfont iconsy"></span>
              <span>概况</span>
            </template>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <span class="icon iconfont iconbj"></span>
              <span slot="title">询报价管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'/inquire'">询价管理</el-menu-item>
              <el-menu-item :index="'/quote'">报价管理</el-menu-item>
              <el-menu-item :index="'/inquire/detail'" style="display:none">报价详情</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span class="icon iconfont iconzhibiaozhuizong"></span>
              <span slot="title">订单追踪</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'/orderTrackGoods'">已采购订单</el-menu-item>
              <el-menu-item :index="'/orderTrackInvoice'">发货单</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <span class="icon iconfont iconstore"></span>
              <span slot="title">库存管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'/list'">库存列表</el-menu-item>
              <el-menu-item :index="'/enter'">库存导入</el-menu-item>
              <el-menu-item :index="'/goodslist'">优势货源</el-menu-item>
              <el-menu-item :index="'/listDetail'" style="display:none">导入详情</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <span class="icon iconfont icongoods"></span>
              <span slot="title">商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'/goods'">商品列表</el-menu-item>
              <el-menu-item :index="'/brand'">品牌列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <span class="icon iconfont iconuser"></span>
              <span slot="title">用户中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'/message'">基本信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <!--收缩图标-->
    <div class="nav-icon" v-show="collapse">
      <div class="zankai">
        <span class="icon iconfont fr" @click="zk"></span>
      </div>
      <div class="item" :class="{'act':tabSure==1}">
        <span class="icon iconfont"></span>
      </div>
      <div class="item" :class="{'act':tabSure==2}">
        <span class="icon iconfont"></span>
      </div>
      <div class="item" :class="{'act':tabSure==3}">
        <span class="icon iconfont"></span>
      </div>
      <div class="item" :class="{'act':tabSure==4}">
        <span class="icon iconfont"></span>
      </div>
      <div class="item" :class="{'act':tabSure==5}">
        <span class="icon iconfont"></span>
      </div>
      <div class="item" :class="{'act':tabSure==6}">
        <span class="icon iconfont"></span>
      </div>
    </div>
    <div class="kf-box">
      <el-tooltip placement="left" effect="light">
        <div slot="content">
          <div class="kf-boxs">
            <div class="itemg">
              <span>客服姓名：</span>
              <font>邓小姐</font>
            </div>
            <div class="itemg">
              <span>邮箱：</span>
              <font>vendor@ichunt.com</font>
            </div>
            <div class="itemg">
              <span>QQ：</span>
              <font>
                2885072763
              </font>
            </div>
            <img src="https://static.ichunt.com/dist/res/home/images/fuwuhao.jpg" alt="">
          </div>
        </div>
        <div class="btnkf">
          <img src="../assets/images/kf.png" alt="">
        </div>
      </el-tooltip>
    </div>
    <!--修改库存弹窗-->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="500px" class="demo-ruleForm">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="原始密码" prop="old_password">
          <el-input v-model="ruleForm.old_password" type='password' placeholder='请输入原始密码'></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="ruleForm.password" type='password' placeholder='请输入新密码'></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="repassword">
          <el-input v-model="ruleForm.repassword" type='password' placeholder='请输入新密码'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import Util from "../tool";
import {Button, Dialog, Form, FormItem, Input, Menu, MenuItem, MenuItemGroup, Message, Submenu, Tooltip,MessageBox} from 'element-ui'

Vue.prototype.$message = Message;
Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu).use(Form).use(FormItem).use(Dialog).use(Button).use(Tooltip).use(Input);

export default {
  name: 'menus',
  props: {},
  created() {
    var self = this
    this.getData();
    this.tabUi()
    window.onresize = function () {
      self.tabUi()
    };
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      userinfo: {},
      collapse: false,
      isIndexTab: true,
      tabSure: "",
      tabs: "",
      width: "",
      dialogVisible: false,
      ruleForm: {
        old_password: '',
        password: '',
        repassword: ''
      },
      rules: {
        old_password: [{
          required: true,
          message: '请输入原始密码',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        }],
        repassword: [{
          required: true,
          trigger: 'blur',
          validator: validatePass2
        }]
      }
    }
  },
  watch: {
    $route(to, from) {
      let tab_arr = sessionStorage.getItem('tabs')
      if (tab_arr) {
        this.tabs = JSON.parse(tab_arr);
      }
      let app_ = document.getElementById('app');
      this.collapse = false;
      if (to.path == '/login') {
        app_.setAttribute('style', 'padding:0');
      } else {
        if (this.collapse) {
          app_.setAttribute('style', 'padding-left:62px');
        } else {
          app_.setAttribute('style', 'padding-left:226px');
        }
      }
    }
  },
  mounted() {
    this.tabss(this.$route.path)
  },
  methods: {
    getData() {
      if (window.userInfo) {
        this.userinfo = window.userInfo;
      } else {
        this.$http('get', "/api/user/getuserinfo").then(res => {
          this.userinfo = res.data;
          window.userInfo = res.data
        })
      }
    },
    tabUi() {
      let tab_arr = sessionStorage.getItem('tabs')
      if (tab_arr) {
        if (tab_arr.length >= 9) {
          this.$nextTick(() => {
            if (this.$refs.scrollboxinner.clientWidth > this.$refs.scrollbox.clientWidth) {
              document.querySelector('.tab-box').scrollLeft = 12000000;
            }
          })
        }
      }
    },
    tabUrl(item) {
      this.$router.push({
        path: item.path,
        query: item.query
      })
    },
    changePwd() {
      this.dialogVisible = true;
    },
    tabss(lk) {
      if (lk == "/") {
        this.tabSure = 1;
      }
      if (lk == "/inquire" || lk == "/quote" || lk == '/inquire/detail') {
        this.tabSure = 2;
      }
      if (lk == "/list" || lk == "/enter" || lk == '/listDetail') {
        this.tabSure = 3;
      }


      if (lk == "/goods" || lk == "/brand") {
        this.tabSure = 4;
      }
      if (lk == "/message") {
        this.tabSure = 5;
      }
      let tab_arr = sessionStorage.getItem('tabs')
      if (tab_arr) {
        this.tabs = JSON.parse(tab_arr);
      }
    },
    closetab(path) {
      let tab_arr = JSON.parse(sessionStorage.getItem('tabs'))
      for (var i = 0; i < tab_arr.length; i++) {
        if (tab_arr[i].path == path) {
          tab_arr.splice(i, 1);
          sessionStorage.setItem('tabs', JSON.stringify(tab_arr));
          this.tabs = tab_arr;
          if (path == this.$route.path) {
            if (i == 0) {
              this.$router.push({
                path: "/"
              })
            } else {
              if (tab_arr[i - 1].query) {
                this.$router.push({
                  path: tab_arr[i - 1].path,
                  query: tab_arr[i - 1].query
                })
              } else {
                this.$router.push({
                  path: tab_arr[i - 1].path,
                })
              }
            }
          }
          break;
        }
      }
    },
    zk() {
      this.collapse = !this.collapse;
      let app_ = document.getElementById('app');
      if (this.collapse) {
        app_.setAttribute('style', 'padding-left:62px');
      } else {
        app_.setAttribute('style', 'padding-left:226px');
      }
    },
    handleOpen(key, keyPath) {
      if (this.$route.path == "/") {
        this.isIndexTab = false
      }
    },
    handleClose(key, keyPath) {
      if (this.$route.path == "/") {
        this.isIndexTab = true
      }
    },
    handleSelect(key, keyPath) {
      this.tabss(key)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http('post', "/api/user/setpasswd", this.ruleForm).then(res => {
            if (res.code === 0) {
              this.$message('修改成功');
              setTimeout(() => {
                Util.delCookie('token');
                window.location.href = '/#/login';
                window.userInfo = ""
                history.go(0);
              }, 2000)
            } else {
              this.$message(res.msg);
            }
          }).catch(err => {
            console.log(err.message);
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    logout() {
      MessageBox.confirm('确定退出系统吗？', {
        type: 'error'
      }).then(() => {
        this.$http('post', "/auth/logout").then(res => {
          Util.delCookie('token');
          window.location.href = '/#/login';
          window.userInfo = ""
          history.go(0);
        }).catch(err => {
          console.log(err.message);
        })
      }).catch(() => {

      })

    }
  }
}
</script>

<style lang="less">
.kf-boxs {
  width: 200px;
  padding: 0 10px;
  padding-bottom: 20px;

  .itemg {
    color: #646B78;
    font-size: 14px;
    height: 30px;
    line-height: 30px;

    font {
      color: #333;
    }
  }

  img {
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: 20px;

  }
}

#app {
  padding-left: 226px;
  padding-top: 56px;
}

.kf-box {
  position: fixed;
  right: 0px;
  width: 61px;
  height: 61px;
  top: 250px;
  z-index: 11;
  text-align: center;

  .btnkf {
    height: 61px;
    width: 61px;
    cursor: pointer;
  }
}

.nav-top {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 56px;
  z-index: 99;

  .con-box {
    height: 56px;
    background: #fff;
    box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);

    .logo {
      height: 56px;
      width: 226px;
      line-height: 56px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      background: #1969F9;
      box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
      font-size: 20px;
    }

    .tab-box {
      padding: 8px 0px;
      overflow-x: auto;
      height: 40px;
      overflow-y: hidden;
      position: relative;
      width: calc(100vw - 517px);

      .item-boxs {
        position: absolute;
        left: 0px;
      }

      .item {
        color: #646B78;
        font-size: 13px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        transition: all 0.4s ease;
        padding: 0 17px;
        white-space: nowrap;

        &.act {
          background-color: #F1F4FA;
          position: relative;

          font {
            color: #1969f9;
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            width: 100%;
            height: 2px;
            background: #1969F9;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
          }

          &.first {
            background-color: transparent;

            &::after {
              display: none;
            }
          }

          &:hover {
            .iconfont {
              color: #1969f9;
            }
          }
        }

        &:hover {
          font {
            color: #1969F9;
          }
        }

        .icon {
          font-size: 13px;
          margin-left: 5px;
        }
      }
    }

    .user-box {
      height: 40px;
      padding: 8px 0;
      line-height: 40px;
      color: #A1ACC1;
      width: 241px;

      a {
        color: #A1ACC1;

        &:hover {
          .icon {
            color: #1969F9;
          }
        }
      }

      .icon {
        font-size: 24px;
        transition: all 0.5s;

        &.el-icon-refresh {
          animation-name: layui-rotate;
          animation-duration: 1s;
          animation-timing-function: linear;
        }
      }

      .line {
        width: 1px;
        height: 30px;
        background: #E5EBF6;
        margin-left: 15px;
        margin-right: 15px;
      }

      .msgh {
        position: relative;

        font {
          position: absolute;
          width: 19px;
          height: 14px;
          background: #1969F9;
          border-radius: 7px;
          text-align: center;
          line-height: 14px;
          font-size: 10px;
          color: #fff;
          left: 15px;
        }
      }

      .login-v {
        img {
          width: 35px;
          height: 35px;
          object-fit: cover;
          border-radius: 35px;
        }

        .namex {
          margin-left: 10px;
          margin-right: 10px;
          font-size: 12px;
          max-width: 100px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .lo-box-drop {
          position: relative;
          cursor: pointer;

          .drop-box {
            display: none;
            position: absolute;
            width: 94px;
            height: 55px;
            padding: 12px 0;
            left: -66px;
            top: 100%;
            background: #FFFFFF;
            box-shadow: 1px 2px 10px 0px rgba(119, 135, 145, 0.5);

            &::after {
              content: "";
              border-style: solid;
              border-color: transparent transparent #fff transparent;
              border-width: 7px;
              position: absolute;
              top: -13px;
              left: 72px;
            }

            a {
              display: block;
              width: 94px;
              height: 28px;
              line-height: 28px;
              text-align: center;
              font-size: 14px;
              color: #646B78;

              &:hover {
                background: #E7F3FF;
              }

            }
          }

          &:hover {
            .icon {
              color: #1969F9;
            }

            .drop-box {
              display: block;
            }
          }
        }
      }
    }
  }

}

.nav-icon {
  width: 62px;
  background: #fff;
  position: fixed;
  left: 0px;
  top: 56px;
  bottom: 0px;

  .zankai {
    height: 26px;
    font-size: 18px;
    color: #646B78;
    line-height: 26px;
    padding-right: 5px;

    span {
      cursor: pointer;

      &:hover {
        color: #1969F9;
      }
    }

  }

  .item {
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;

    &.act {
      background: #F1F4FA;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 0px;
        top: 7px;
        width: 5px;
        height: 30px;
        background: #1969F9;
      }

      span {
        color: #1969F9;
      }
    }

    &:hover {
      background: #F1F4FA;
    }

    .icon {
      font-size: 20px;
      color: #646B78;
    }
  }
}

.nav-left {
  width: 226px;
  background: #fff;
  position: fixed;
  left: 0px;
  top: 56px;
  bottom: 0px;


  .meau-con {
    width: 100%;
    overflow: auto;
    height: 100%;
    background: #fff;

    .el-icon-arrow-down:before {
      content: "\e790";
    }

    .zankai {
      height: 26px;
      font-size: 18px;
      color: #646B78;
      line-height: 26px;
      padding-right: 17px;

      span {
        cursor: pointer;
        transition: all 0.5s;

        &:hover {
          color: #1969F9;
        }
      }
    }

    .el-submenu {
      transition: all 0.4s ease;
      position: relative;

      &:hover {
        &::after {
          content: "";
          position: absolute;
          left: 0px;
          top: 7px;
          width: 5px;
          height: 30px;
          background: #1969F9;
        }
      }
    }


    .el-menu-item:focus,
    .el-menu-item:hover,
    .el-submenu__title:hover {
      background: #F1F4FA;
    }


    .el-submenu__title:hover span {
      color: #1969F9;
    }

    .el-submenu.is-opened,
    .indextab.is-active {
      position: relative;
      background: #F1F4FA;

      span,
      .iconfont {
        color: #1969F9;
      }

      &::after {
        content: "";
        position: absolute;
        left: 0px;
        top: 7px;
        width: 5px;
        height: 30px;
        background: #1969F9;
      }
    }

    .el-menu-item {
      height: 46px;
      line-height: 42px;

      .iconfont {
        font-size: 20px;
        color: #646B78;
        margin-right: 14px;
      }

      a {
        color: #646B78;
      }

    }

    .el-submenu__title {
      height: 46px;
      line-height: 42px;
      padding-left: 37px;
      transition: all 0.4s ease;

      .iconfont {
        font-size: 20px;
        color: #646B78;
        margin-right: 14px;
      }

      a {
        color: #646B78;
      }
    }

    .el-menu-item-group {
      .el-menu-item-group__title {
        display: none;
      }

      .el-menu-item {
        font-size: 14px !important;
        padding-left: 80px !important;
        line-height: 46px !important;
        height: 46px !important;
      }
    }

    .el-menu {
      border: 0px;

      .el-menu-item,
      .el-submenu__title {
        font-size: 14px;
        color: #646B78;
      }


    }

    &::-webkit-scrollbar {
      width: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background: #fff;
      width: 10px;
      -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
    }

    &::-webkit-scrollbar-track {
      border-radius: 0;
      background: #D2D9E7;
    }
  }
}

@keyframes layui-rotate {
  from {
    -webkit-transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}
</style>