<template>
  <div :class="{ 'has-logo': showLogo, telescopMenu: !isMenu }">
    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->

    <div class="hamburger-box" ref="hamhurger" @click="openUserInfo">
      <!-- <hamburger :is-active="sidebar.opened" @toggleClick="toggleSideBar" /> -->
      <div>
        <p class="name">
          <i class="iconfont icon-ziyuan"></i
          ><span>{{ userInfo.nickName }}</span>
        </p>
      </div>
    </div>
    <div class="business-name" ref="business">
      <el-tooltip
        :enterable="false"
        effect="dark"
        :content="companyInfo.companyName"
        :placement="direction"
      >
        <p v-show="getMenuFlag()">{{ companyInfo.companyName }}</p>
      </el-tooltip>
    </div>
    <div
      class="fase-box"
      ref="fase"
      @mouseleave="$emit('selfClose')"
      @mouseenter="$emit('selfEnter')"
    >
      <langTool v-if="getMenuFlag()"></langTool>
      <div class="item" @click="openCompanyDialog" v-if="getMenuFlag()">
        <el-tooltip
          :enterable="false"
          effect="dark"
          :content="$t1('切换组织')"
          :placement="direction"
        >
          <i class="el-icon-set-up" />
        </el-tooltip>
      </div>
      <div class="item" v-if="getMenuFlag()">
        <el-tooltip
          :enterable="false"
          effect="dark"
          :content="$t1('流程待办')"
          :placement="direction"
        >
          <i
            class="iconfont icon-liuchengdaiban"
            @click="$router.push('/basic/wf/wf_manage/list')"
          />
        </el-tooltip>
      </div>
      <div class="item" v-if="isDev && isBdAdmin">
        <el-tooltip
          :enterable="false"
          effect="dark"
          :content="$t1('获取提取码')"
          :placement="direction"
        >
          <i
            class="el-icon-setting"
            @click="showExtractedCodeCreateDialog = true"
          />
        </el-tooltip>
      </div>
      <div class="item" v-if="isBdAdmin">
        <el-tooltip
          :enterable="false"
          effect="dark"
          :content="$t1('查看提取码')"
          :placement="direction"
        >
          <i
            class="el-icon-tickets"
            @click="showExtractedCodeQueryDialog = true"
          />
        </el-tooltip>
      </div>

      <div class="item" @click="logout()">
        <el-tooltip
          :enterable="false"
          effect="dark"
          :content="$t1('退出')"
          :placement="direction"
        >
          <i class="el-icon-switch-button" />
        </el-tooltip>
      </div>
    </div>
    <template v-for="router1 in viewRouter">
      <template v-for="router2 in router1.children">
        <div
          class="second-list"
          :key="router1.id + 't' + router2.id"
          :class="{ on: router2.id == nowNavID }"
          @mouseenter="stopFlag = 1"
          @mouseleave="showNav()"
          v-show="router2.id == nowNavID"
          :ref="'seconMenus' + router2.id"
        >
          <i class="ico-arrow"></i>
          <div>
            <div class="tit">
              <i :class="getMenuClass(router2, 2)"></i
              ><span>{{ getMenuName(router2) }}</span>
            </div>
            <dl
              v-for="(router3, index3) in router2.children"
              :key="'router3' + index3"
            >
              <div
                class="item"
                v-if="!router3.hidden"
                @click="rourteTo(router3, router1)"
              >
                <!--<i class="el-icon-caret-right"></i>-->
                <i :class="getMenuClass(router3, 3)"></i>
                <a>{{ getMenuName(router3) }}</a>
              </div>
            </dl>
          </div>
        </div>
      </template>
    </template>
    <el-menu
      class="menu-box"
      :class="{ 'lang-zh': $i18n.locale == 'zh' }"
      text-color="#fff"
      active-text-color="#fff"
      :unique-opened="true"
      @mouseleave="showNav()"
      ref="seconMenus"
      :collapse="!isMenu"
    >
      <el-scrollbar wrap-class="scrollbar-wrapper" id="menuUl">
        <component
          v-for="menuModule in menuModules"
          :is="getMenuType(menuModule)"
          :index="'' + menuModule.id"
          :key="'menuModule' + menuModule.id"
          @click.native="rourteTo(menuModule)"
        >
          <i :class="getMenuClass(menuModule, 1)" v-if="menuModule.children.length <= 0"></i>
          <template slot="title">
            <i :class="getMenuClass(menuModule, 1)" v-if="menuModule.children.length > 0"></i>
            <span>{{ getMenuName(menuModule) }}</span>
          </template>
          <component
            v-for="(router2, index1) in menuModule.children"
            :is="getMenuType(router2)"
            :key="index1"
            :index="'' + router2.id"
            @mouseenter.native="showNav(router2, $event)"
            @mouseleave.native="showNav()"
            @click="rourteTo(router2)"
          >
            <template slot="title">
              <i :class="getMenuClass(router2, 2)"></i>
              <span>{{ getMenuName(router2) }}</span>
            </template>
            <el-menu-item
              v-for="(router3, index3) in router2.children"
              :key="index3"
              :index="'' + router3.id"
              @click="rourteTo(router3)"
            >
              <template slot="title">
                <i :class="getMenuClass(router3, 3)"></i>
                <span>{{ getMenuName(router3) }}</span>
              </template>
            </el-menu-item>
          </component>
        </component>
        <el-menu-item
          @click.native="openCreateCompanyDialog"
          index="xx"
          v-if="isFormDev"
        >
          <template slot="title">
            <i :class="getMenuClass({}, 1)"></i>
            <span>新建企业</span>
          </template>
        </el-menu-item>
      </el-scrollbar>
    </el-menu>
    <div class="menu-btn">
      <i class="el-icon-arrow-up" @click="toUpMove()"></i>
      <i class="el-icon-arrow-down" @click="toDownMove()"></i>
    </div>
    <div
      id="tta"
      style="
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 9999;
        width: 800px;
        left: 100%;
      "
      v-if="showMenuModal"
    ></div>
    <el-dialog
      :title="$t1('切换组织')"
      width="355px"
      custom-class="dialog-style list-dialog"
      v-if="showCompanyDialog"
      :visible.sync="showCompanyDialog"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      v-el-drag-dialog
      v-el-dialog-center
      @close="changeCompanyClose"
    >
      <div class="cont">
        <el-input
          :placeholder="$t1('搜索')"
          class="search-btn"
          v-model="filterText"
        ></el-input>
        <el-tree
          :props="defaultProps"
          :load="loadNode"
          node-key="id"
          ref="tree"
          highlight-current
          lazy
          :expand-on-click-node="true"
          @node-click="handleNodeClick"
          class="organization-tree"
          icon-class="el-icon-arrow-right"
          :filter-node-method="filterNode"
        ></el-tree>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
				<el-button type="primary" plain class="button-sty" @click="changeCompanyClose">
					<i class="el-icon-close el-icon"></i>
					取 消
				</el-button>
				<el-button type="primary" @click="changeCompany" class="button-sty">
					<i class="el-icon-check el-icon"></i>
					确 定
				</el-button>
			</span> -->
    </el-dialog>

    <!--    <infoIframeDialog v-if="showInfoIframeDialog" :visiable.sync="showInfoIframeDialog"
                          :dataId="userInfo.id"></infoIframeDialog>-->
    <userInfo
      v-if="!isFormDev && showUserInfoDialog"
      :visiable.sync="showUserInfoDialog"
      :_dataId="userInfo.id"
      topValue="128px"
      @reload="userInfoReload"
    ></userInfo>
    <userFormInfo
      v-if="isFormDev && showUserInfoDialog"
      :visiable.sync="showUserInfoDialog"
      :_dataId="userInfo.id"
      topValue="128px"
      @reload="userInfoReload"
    ></userFormInfo>
    <onlineTalk></onlineTalk>
    <extractedCodeCreateDialog
      v-if="showExtractedCodeCreateDialog"
      :visiable.sync="showExtractedCodeCreateDialog"
    ></extractedCodeCreateDialog>
    <extractedCodeQueryDialog
      v-if="showExtractedCodeQueryDialog"
      :visiable.sync="showExtractedCodeQueryDialog"
    ></extractedCodeQueryDialog>
    <createCompanyDialog
      v-if="showCreateCompanyDialog"
      :visiable.sync="showCreateCompanyDialog"
    ></createCompanyDialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import variables from "@/styles/variables.scss";
import userInfo from "@base/views/user/user/info.vue";
import userFormInfo from "@base/views/user/user/form_info.vue";
import onlineTalk from "@base/components/onlineTalk";
import { getToken } from "@base/utils/auth";
import indexUtil from "@base/utils/index.js";
import langTool from "../langTool.vue";
import { initPddLog } from "@base/utils/pddLog";

import extractedCodeCreateDialog from "../extractedCode/createDialog.vue";
import extractedCodeQueryDialog from "../extractedCode/queryDialog.vue";
import { getBdFlag } from "@base/api/user";
import createCompanyDialog from "@base/layout/components/createCompany/createCompanyDialog.vue";

export default {
  props: {
    option: Object,
    isMenu: {
      type: Boolean,
    },
  },
  components: {
    userInfo,
    userFormInfo,
    onlineTalk,
    langTool,
    extractedCodeCreateDialog,
    extractedCodeQueryDialog,
    createCompanyDialog,
  },
  data() {
    return {
      direction: "bottom",
      defaultOpenedsArray: [],
      viewRouter: [],
      showMenuModal: false,
      menuheight: {
        height: "",
      },
      defaultProps: {
        label: "label", //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
        children: [],
        isLeaf: "leaf",
      },
      filterText: null,
      showCompanyDialog: false,
      choose_company_info: "",
      userInfo: {},
      companyInfo: {},
      showUserInfoDialog: false,
      hoverStatus: false,
      nowNavID: "null",
      stopFlag: 0,
      showInfoIframeDialog: false,
      currentMenu: null,
      menuModules: [],
      firstMenuHeight: 0, // 第一个菜单的高度
      eveyMenuHeight: 48, // 每一个菜单的高度
      isFormDev: false,

      showExtractedCodeCreateDialog: false,
      showExtractedCodeQueryDialog: false,
      isDev: false,
      showCreateCompanyDialog: false,
    };
  },
  computed: {
    ...mapGetters([
      "permission_routes",
      "sidebar",
      "sidebarRouters",
      "isBdAdmin",
      "userFlag",
    ]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    /*isCollapse() {
      if (this.sidebar.opened) {
        this.direction = 'bottom';
      } else {
        this.direction = 'right-start';
      }
      return !this.sidebar.opened;
    }*/
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    indexUtil.initI18nMessage("menus");
  },
  mounted() {
    this.getUserInfo();
    setTimeout(() => {
      this.filterRoute();
    }, 100);
    this.countHeight();
    let query = this.$route.query;
    if (query && query.flag == 1) {
      this.showCompanyDialog = true;
    }
    initPddLog(); //初始化拼多多日志
    this.initIsFormDev();
    this.getBdEnv();
  },
  methods: {
    getMenuType(item) {
      if (item.children && item.children.length > 0) {
        return "el-submenu";
      } else {
        return "el-menu-item";
      }
    },
    getBdEnv() {
      getBdFlag({
        success: (res) => {
          this.isDev = res.objx == 1;
        },
      });
    },
    initIsFormDev() {
      let userFlag = this.userFlag;
      this.isFormDev = userFlag == 6 || userFlag == 7 || userFlag == 8;
    },
    getMenuFlag() {
      return !this.isBdAdmin;
    },
    getMenuName(item) {
      let locale = this.$i18n?.locale;
      let zhTitle = item.meta ? item.meta.title : "";
      let enTitle = item.meta ? item.meta.enTitle : "";
      let title;
      if (locale == "en") {
        title = enTitle || zhTitle;
      } else {
        title = zhTitle;
      }
      if (!enTitle || locale !== "en") {
        title = zhTitle;
      }
      if (this.$t1) {
        title = this.$t1(title);
      }

      return title;
    },
    jumpOutLink(route) {
      let path = route.url || route.path;
      if (route.type == 4 && path) {
        let params = this.getCustomReqUrlAndCleanUrl(path);
        let reqUrl = params.custom_req_url;
        if (reqUrl) {
          this.$http({
            url: reqUrl,
            method: `post`,
            data: { thirdUrl: params.newUrl },
            isLoading: true,
            success: (res) => {
              path = res.objx;
              window.open(path);
            },
          });
        } else {
          if (path.indexOf("token={token}") >= 0) {
            path = path.replace("token={token}", "token=" + getToken());
          }
          window.open(path);
        }
      }
    },
    getCustomReqUrlAndCleanUrl(url) {
      // 直接使用正则表达式匹配
      const match = url.match(/[?&]custom_req_url=([^&?#]+)/);
      if (match) {
        const customReqUrl = decodeURIComponent(match[1]);
        // 移除匹配到的参数部分
        const newUrl = url.replace(
          match[0],
          match[0].startsWith("?") ? "?" : ""
        );

        return {
          custom_req_url: customReqUrl,
          newUrl: newUrl.replace(/\?$/, "").replace(/\?&/, "?"),
        };
      }

      return {
        custom_req_url: "",
        newUrl: url,
      };
    },
    changeModules(row, cRow) {
      if (!row.route) return;
      localStorage.setItem("currentMenuId", row.id);
      let route = row.route ? "/" + row.route : "";
      sessionStorage.setItem("reUrl", cRow.path);
      sessionStorage.setItem("reCid", row.id);
      location.href = route + "/index.html/#/home";

      // location.reload();
    },
    filterRoute() {
      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
      var nRoute1s = [];
      oldRoutes.forEach((route1, index1) => {
        let nRoute2s = [];
        if (!route1.hidden) {
          route1.children.forEach((route2, index2) => {
            let nRoute3s = [];
            if (!route2.hidden) {
              route2.children.forEach((route3, index3) => {
                if (!route3.hidden) {
                  nRoute3s.push(route3);
                }
              });
            }
            if (route2.type == 4 || route2.url || nRoute3s.length > 0) {
              route2.children = nRoute3s;
              nRoute2s.push(route2);
            }
          });
        }
        if (route1.type == 4 || route1.url || nRoute2s.length > 0) {
          route1.children = nRoute2s;
          nRoute1s.push(route1);
        }
      });
      this.viewRouter = nRoute1s || [];
      this.menuModules = nRoute1s || [];

      let reUrl = sessionStorage.getItem("reUrl");
      let reCid = sessionStorage.getItem("reCid");
      if (reUrl) {
        this.$nextTick(() => {
          this.$refs.seconMenus.open(reCid);
        });
        this.$router.push(reUrl);
        sessionStorage.removeItem("reUrl");
        sessionStorage.removeItem("reCid");
      }
    },
    filterRoute1() {
      var oldRoutes = JSON.parse(JSON.stringify(this.sidebarRouters));
      var nRoute1s = [];
      oldRoutes.forEach((route1, index1) => {
        let nRoute2s = [];
        if (!route1.hidden && route1.route) {
          route1.children.forEach((route2, index2) => {
            let nRoute3s = [];
            if (!route2.hidden) {
              route2.children.forEach((route3, index3) => {
                if (!route3.hidden) {
                  nRoute3s.push(route3);
                }
              });
            }
            if (nRoute3s.length > 0) {
              route2.children = nRoute3s;
              nRoute2s.push(route2);
            }
          });
        }
        if (nRoute2s.length > 0) {
          route1.children = nRoute2s;
          nRoute1s.push(route1);
        }
      });
      let rows = nRoute1s;
      if (rows.length) {
        let currentMenu;
        if (nRoute1s.length) {
          var currentMenuId = localStorage.getItem("currentMenuId");
          if (currentMenuId) {
            currentMenu = nRoute1s.find((row) => row.id == currentMenuId);
          }
          if (!currentMenu) {
            currentMenu = nRoute1s[0];
          }
          this.viewRouter = currentMenu.children;
        }
        this.currentMenu = currentMenu;
        this.menuModules = rows || [];

        /*if (currentMenu) {
          if (currentMenu.route != WEB_PREFIX.substring(1, WEB_PREFIX.length)) {
            this.changeModules(currentMenu, 1);
          } else {
            localStorage.setItem('currentMenuId', currentMenu.id);
          }
        } else {
          localStorage.removeItem('currentMenuId');
        }*/
      }
    },
    rourteTo(route) {
      let path = route.url || route.path;
      if (!path) {
        return;
      }
      this.showMenuModal = true;
      setTimeout(() => {
        this.showMenuModal = false;
      }, 200);
      try {
        if (route.linkType == 4) {
          this.jumpOutLink(route);
        } else if (route.linkType == 3) {
          this.$router.push({
            path: path,
            query: { url: route.outLink, route: route.route },
          });
        } else {
          this.$router.push(path);
        }
      } catch (e) {
        console.error(e);
      }
    },
    logout() {
      this.$store.dispatch("user/logout2").then((res) => {
        this.$router.push(`/login?redirect=${this.$route.fullPath}`);
      });
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    countHeight() {
      var h =
        this.$refs.hamhurger.offsetHeight +
        this.$refs.fase.offsetHeight +
        this.$refs.business.offsetHeight;
      this.menuheight.height = window.innerHeight - h + "px";
    },
    handleNodeClick(data, node, v) {
      if (!data.hasChild) {
        this.choose_company_info = data;
        this.changeCompany();
      } else {
        this.choose_company_info = {};
      }
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      let companyCode =
        node && node.data && node.data.companyCode
          ? node.data.companyCode || ""
          : "";
      let url = !companyCode
        ? USER_PREFIX + "/user_company_info/getAllList"
        : USER_PREFIX + "/user_company_info/getChildren";

      this.$http({
        url: url,
        method: "post",
        data: {
          parentCompanyCode: companyCode,
        },
        success: (res) => {
          let datas = res.objx || [];
          let parentLabel = companyCode ? node.label : null;
          datas.forEach((item) => {
            item.leaf = !item.hasChild;
            let label = this.$t1(item.companyName);
            /*if(companyCode){
              label = label + '('+companyTypeMap[item.companyType]+')'
            }*/
            item.label = label;
            item.parentLabel = parentLabel;
          });

          if (node.level === 0) {
            if (datas.length > 0 && datas[0].hasChild) {
              this.$nextTick(() => {
                let nodedata = node.childNodes[0];
                nodedata.expanded = true;
                nodedata.loadData();
              });
            }
          }
          resolve(datas);
        },
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      let flag1 = data.label.indexOf(value) !== -1;
      let flag2 = data.parentLabel && data.parentLabel.indexOf(value) !== -1;
      return flag1 || flag2;
    },
    openCompanyDialog() {
      this.filterText = null;
      this.showCompanyDialog = true;
    },
    getWebPrefix(callback) {
      this.$http({
        url: USER_PREFIX + "/auth/getWebPrefix",
        method: `post`,
        data: {},
        isLoading: true,
        success: (res) => {
          let webPrefix = res.objx;
          callback && callback(webPrefix);
        },
      });
    },
    changeCompany() {
      let row = this.choose_company_info;
      let query = this.$route.query;
      let flag = query && query.flag == 1 ? 1 : null;
      this.showCompanyDialog = false;
      if (row && row.companyCode) {
        this.$baseLoading({ target: document.body, fullscreen: true });
        this.$http({
          url: USER_PREFIX + "/auth/switchCompany",
          method: "post",
          data: { stringOne: row.companyCode },
          isLoading: true,
          success: (res) => {
            this.getWebPrefix((prefix) => {
              let webPrefix = prefix ? "/" + prefix : window.MAIN_WEB_PREFIX;
              sessionStorage.removeItem("out-token");
              this.$store.dispatch("user/changeCompanyInfo", row);
              this.$store.dispatch("tagsView/delAllViews");
              window.location.href = webPrefix + "/index.html";
            });
          },
        });
      } else {
        if (flag == 1) {
          this.$router.push({
            path: "/",
          });
        }
      }
    },
    changeCompanyClose() {
      let query = this.$route.query;
      let flag = query && query.flag == 1 ? 1 : null;
      if (flag == 1) {
        this.$router.push({
          path: "/",
        });
      }
      this.showCompanyDialog = false;
    },
    getUserInfo() {
      this.$http({
        url: USER_PREFIX + "/user/currentUser",
        method: "post",
        success: (res) => {
          let userInfo = res.objx;
          this.headPhotoUrl = userInfo.headPhotoUrl
            ? userInfo.headPhotoUrl
            : require("@/resources/images" + "/default-header.png");
          this.userInfo = userInfo;
        },
      });

      this.$http({
        url: USER_PREFIX + "/company_info/getCurrent",
        method: `post`,
        success: (res) => {
          this.companyInfo = res.objx || {};
        },
      });
    },
    openUserInfo() {
      this.showUserInfoDialog = true;
      // this.showInfoIframeDialog = true;
    },
    userInfoReload() {
      this.showUserInfoDialog = true;
    },
    showNav(route, event) {
      if (!this.isMenu) return;
      let id = route && route.id ? route.id : null;
      if (id != null) {
        if (!route.children || !route.children.length) {
          return;
        }
        this.stopFlag = 1;
        this.nowNavID = id;
        this.$nextTick(() => {
          var wh = window.innerHeight;
          let dom = event.target;
          let domAttr = dom.getBoundingClientRect();
          // var sh1 = dom.offsetTop;
          var sh1 = domAttr.top + 5;
          let $snav = this.$refs["seconMenus" + id][0];
          let snavAttr = $snav.getBoundingClientRect();

          // var sh2 = $snav.outerHeight;
          var sh2 = snavAttr.height;
          var sh = wh - (sh1 + sh2);

          var hd = 20;
          var xhd = sh - hd; //移动距离+固定值
          if (sh >= 0) {
            $snav.style["margin-top"] = sh1 + "px";
          } else if (sh < 0) {
            let bd = sh1 + sh ;

            $snav.style["margin-top"] = bd + "px";
            $snav.querySelector(".ico-arrow").style["margin-top"] =
              sh1 - bd + "px";
          }
        });
      } else {
        this.stopFlag = 0;
        setTimeout(() => {
          if (this.stopFlag == 0) {
            this.nowNavID = id;
          }
        }, 200);
      }
    },
    jumpTo(row, firstRow) {
      let route = firstRow.route ? "/" + firstRow.route : "";
      if (route == WEB_PREFIX) {
        this.$router.push({
          path: row.path,
        });
      } else {
        this.changeModules(firstRow, row);
      }
    },
    toDownMove() {
      let containter = document
        .getElementById("menuUl")
        .querySelector(".scrollbar-wrapper");
      let menuscrollTop = containter.scrollTop;
      let scrollHeight = containter.scrollHeight;
      let val = menuscrollTop + this.eveyMenuHeight;
      if (val < scrollHeight) {
        containter.scrollTop = val;
      } else {
        containter.scrollTop = scrollHeight;
      }
    },
    toUpMove() {
      let containter = document
        .getElementById("menuUl")
        .querySelector(".scrollbar-wrapper");
      let menuscrollTop = containter.scrollTop;
      let val = menuscrollTop - this.eveyMenuHeight;
      if (val > 0) {
        containter.scrollTop = val;
      } else {
        containter.scrollTop = 0;
      }
    },
    getMenuClass(menu, flag) {
      let res = "";
      if (menu.menuImg) {
        res = "iconfont " + menu.menuImg;
      } else if (flag == 1) {
        res = "iconfont icon-jinggao"; //一级默认图标
      } else if (flag == 2) {
        res = "iconfont icon-circle"; //二级默认图标
      } else if (flag == 3) {
        res = "iconfont icon-thirdMemu"; //三级级默认图标
      }

      if (flag == 2) {
        if (menu.id == this.nowNavID) {
          res += " on";
        }
      }
      return res;
    },
    openCreateCompanyDialog() {
      this.showCreateCompanyDialog = true;
    },
    confirmCreateCompanyDialog() {
      this.showCreateCompanyDialog = false;
    },
  },
};
</script>
<style lang="scss">
@import "~@/styles/variables.scss";

.hamburger-box {
  background-color: #0000004d;
  height: 42px;
  /* line-height: 30px; */
  text-align: center;
  /* box-shadow: 0 2px 6px rgb(0 0 0 / 10%); */
  position: relative;
  z-index: 2;
  overflow: hidden;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);

  > div {
    color: #fff;
    font-size: 13px;
    margin-bottom: 4px;
    cursor: pointer;
    height: 36px;
    border-radius: 7px;
    margin: 6px 10px 6px 8px;
    overflow: hidden;
    background: #2a6494;
  }

  p {
    color: #fff;
    font-size: 13px;
    margin-bottom: 4px;
    cursor: pointer;
    /* border: solid 1px #ffffff61; */
    display: block;
    line-height: 27px;
    /* width: 88%; */
    margin-top: 6px;
    border-radius: 7px;
    margin: 6px 10px 6px 8px;
    background: #2a6494;

    i {
      font-size: 14px;
      vertical-align: middle;
      margin: 0 4px 0 6px;
      height: 36px;
      line-height: 36px;
      width: 21px;
    }

    span {
      width: 94px;
      display: table-cell;
      height: 32px;
      word-break: break-word;
      line-height: 16px;
      overflow: hidden;
      vertical-align: middle;
      white-space: nowrap;
    }

    &.name {
      display: table-row;
      margin: 0;
    }
  }
}

.business-name {
  height: 47px;
  color: #ffffffb8;
  background: #0000004d;
  /* padding-top: 12px; */
  font-size: 12px;
  /* padding-left: 5px; */
  display: table-cell;
  vertical-align: middle;
  width: 140px;
  padding: 6px 10px;
  text-align: center;

  p {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.fase-box {
  color: #fff;
  /* border-bottom: solid 1px rgba(255, 255, 255, 0.12); */
  border-top: solid 1px rgba(255, 255, 255, 0.12);
  background: #225076;
  padding: 4px 0 8px;
  width: 100%;
  z-index: 999;
  position: relative;
  /* display: flex;*/
  //text-align: left !important;
  // &:hover {
  // 	color: $baseColor;
  // 	background-color: #fbfdfe;
  // 	.fase-list {
  // 		display: block;
  // 	}
  // }
  .item {
    flex: 1;
    text-align: center;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    display: inline-block;
    min-width: 30px;
  }

  .fase-list {
    position: absolute;
    left: 100%;
    color: $baseColor;
    background-color: #fbfdfe;
    border: solid 1px $baseColor;
    border-left: none;
    top: -0.5px;
    padding: 10px 0 10px 24px;
    height: 43px;
    width: 413px;
    display: none;

    .l-item {
      display: inline-block;
      font-size: 12px;
      margin-right: 36px;
      line-height: 20px;
      cursor: pointer;

      i {
        vertical-align: middle;
        margin-right: 4px;
        font-size: 15px;
        margin-bottom: 2px;
      }

      &:hover {
        border-bottom: solid 1px $baseColor;
      }
    }
  }
}

.openSidebar .fase-box {
  text-align: center;
  //padding: 0;
}

#app .sidebar-container {
  overflow: visible;
  z-index: 1003;

  &.hover {
    z-index: 1003;
  }

  &.hover1 .fase-box {
    width: 138px;
    color: $baseColor;
    background-color: #fbfdfe;
    border-color: $baseColor;
  }

  .el-menu.menu-box {
    height: calc(100vh - 173px);
    font-size: 13px;
    z-index: -1;
    position: relative;
    background-color: rgba(0, 0, 0, 0.2);
    word-break: break-word;
    .el-scrollbar__view >{
      .el-menu-item{padding:0 11px !important;
        span{font-size:14px;}
      }
      .el-submenu > .el-submenu__title{padding:0 11px !important;
        span{font-size:14px;}
        ~ .el-menu{
          padding:5px 0;display: grid;
          > .el-menu-item{
             span{line-height:1.4;height: 26px;}
          }
          .el-submenu.is-opened .el-submenu__title{background-color:#FFF;opacity:1;
            span{color:$baseColor;}
            i.iconfont{color:$baseColor}
          }
        }

      }
    }
    .el-submenu__title,.el-menu-item {
      padding: 0 11px;
      height: 48px;
      line-height: 48px;
      &:hover,&.is-active{background-color:rgba(0, 0, 0, 0.29)}
      i {
        color: #fff;
        font-size: 13px;
        margin-right: 0;
        width: 18px;

        &.iconfont {
          margin-right: 5px;
          font-size: 19px;
          float: left;
        }

        &.el-submenu__icon-arrow {
          right: 3px;
          text-align: center;
          font-size: 12px;
          margin-top: -5px;
          display: none;
        }
      }

      > span {
        height: 48px;
        display: table-cell;
        width: 114px;
        vertical-align: middle;
        font-size: 13px;
        white-space: normal;
        line-height: 16px;
      }
    }

    .el-submenu {
      overflow: hidden; //有点电脑分辨率问题

      &.is-opened .el-submenu__title {
        //background-color: rgba(27, 66, 97) !important;
      }
      .el-submenu .el-menu{display:none}
    }

    .el-submenu {
      &.is-opened{
        > .el-submenu__title{background-color:rgba(0, 0, 0, 0.29)}
      }
      .el-menu {
        background: rgba(0, 0, 0, 0.35);
        box-shadow: 0px -5px 8px #00000014 inset;
        //padding:4px 0;
        .el-submenu__title{
          height: auto;
          line-height: 1.4;
          font-size: 12px;
          opacity: 0.8;
          margin: 5px 0 5px 14px;
          padding: 7px 2px 7px 33px !important;
          border-radius: 8px;
          text-align: left;
          min-width: 81px;
          white-space: normal;
          margin-right: 10px;
          word-break: break-word;
          i.iconfont {
            position: absolute;
            top: 50%;
            height: 20px;
            margin-top: -10px;
            line-height: 20px;
            left: 7px;
            font-size: 18px;
          }

          [class^="el-icon-"] {
            font-size: 12px;
            color: #fff;
            position: absolute;
            right: 2px;
            top: 50%;
            margin-top: -5px;
            width: 14px;
            zoom: 0.8;
            display: none;
          }
          span{height:auto;text-align: left !important;}
          &:hover,
          &.on {
            opacity: 1;
            background-color: #fbfdfe !important;
            color: $baseColor !important;
            i.iconfont{color:$baseColor}
            .el-icon-arrow-right {
              color: $baseColor;
            }
          }
        }
      }

      .el-menu-item{
        height: auto;
        line-height: 1.4;
        padding-left: 33px !important;
        font-size: 12px;
        opacity: 0.8;
        margin: 5px 0 5px 14px;
        padding: 2px 2px 2px 0px;
        border-radius: 8px;
        text-align: left;
        min-width: 81px !important;
        white-space: normal;
        margin-right: 10px;
        word-break: break-word;

        i.iconfont {
          position: absolute;
          top: 50%;
          height: 20px;
          margin-top: -10px;
          line-height: 20px;
          left: 7px;
          font-size: 18px;
          color:#D0D6DB;
        }

        [class^="el-icon-"] {
          font-size: 12px;
          color: #fff;
          position: absolute;
          right: 2px;
          top: 50%;
          margin-top: -5px;
          width: 14px;
          zoom: 0.8;
          display: none;

        }

        &:hover,
        &.on {
          opacity: 1;
          background-color: #fbfdfe !important;
          color: $baseColor !important;

          .el-icon-arrow-right,i.iconfont {
            color: $baseColor;
          }
        }
      }
    }

    &.lang-zh {
      font-size: 14px;

      .el-submenu {
        .el-submenu__title {
          > span {
            text-align: center;
          }

          i.iconfont {
            margin-right: 2px;
          }
        }

        .el-menu-item {
          font-size: 13px;
        }
      }
    }
  }
}

.main-container {
  z-index: 1002;
}

.menu-btn {
  background-color: #0000001c;
  height: 30px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 -10px 6px rgb(0 0 0 / 10%);
  display: flex;
  color: #fff;
  font-size: 16px;

  i {
    display: inline-block;
    flex: 1;
    line-height: 30px;
    cursor: pointer;
    border-right: solid 1px rgba(0, 0, 0, 0.2);

    &:last-child {
      border-right: none;
    }

    &:hover {
      background-color: rgba(255, 255, 255, 0.12);
    }
  }
}

/*.menu-box {
  background-color: #0000002e !important;
  font-size: 14px;
  z-index: -1;
  position: relative;
  &.hover .el-scrollbar {
    width: 1000px;
  }
  .el-scrollbar {
    .el-scrollbar__view {
      padding-top: 1px;
    }
    .el-scrollbar__bar.is-vertical {
      left: 104px;
    }
  }
  .first-item {
    position: relative;
    width: 104px;
    &:nth-child(-n + 6) .second-list {
      bottom: inherit !important;
      top: -40.5px !important;
    }
    &:nth-child(1) .second-list {
      top: 0 !important;
    }
    &:nth-last-child(-n + 6) .second-list {
      bottom: -1%;
      top: inherit;
    }
    .f-name {
      height: 55px;
      line-height: 55px;
      padding-left: 9px;
      color: #fff;
      cursor: pointer;
      position: relative;
      padding-right: 6px;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      width: 104px;
      i.el-icon-arrow-right {
        position: absolute;
        right: 3px;
        top: 21.5px;
        width: 14px;
        height: 14px;
      }
      .el-icon-s-opportunity {
        opacity: 0.92;
        font-size: 13px;
		vertical-align: middle;
		margin-right: 2px;
      }
      span{display: inline-block;width: calc(100% - 20px);vertical-align: middle;line-height: 1.2;}
    }

    &:hover,
    &.current {
      .f-name {
        background-color: #fbfdfe;
        color: $baseColor;
      }
      .second-list {
        display: block;
      }
    }
  }
}


*/
.second-list {
  display: none;
  position: absolute;
  left: $sideBarWidth;
  padding-left: 2px;
  top: 0.5px;
  // &:before {
  //   content: "";
  //   top: 22px;
  //   bottom: 22px;
  //   background-color: $baseColor;
  //   width: 2px;
  //   position: absolute;
  //   left: 24px;
  // }
  > div {
    background: #fbfdfe;
    border: solid 1px $baseColor;
    top: -0.5px;
    padding: 24px 0;
    border-radius: 8px;
    margin-left: 9px;
    max-height: calc(84vh);
    overflow-y: auto;
    overflow-x: hidden;
    width: 458px;
  }

  .ico-arrow {
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent;
    border-right: solid 7px $baseColor;
    position: absolute;
    left: 2px;
    top: 8px;
  }

  &.on {
    display: block;
  }

  .tit {
    width: auto;
    /* text-align: center; */
    /* background: #22507614; */
    color: $baseColor;
    /* border: dashed 1px #1d4667; */
    padding: 0 0 10px;
    /* border-radius: 6px; */
    /* margin: 5px auto; */
    margin: 0 22px;
    display: block;
    border-bottom: solid 1px #eee;

    i,
    span {
      opacity: 1;
      vertical-align: middle;
      margin-right: 7px;
      font-size: 18px;
    }

    span {
      font-size: 14px;
    }
  }

  dl {
    padding: 8px 16px 3px 24px;
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;
    width: 50%;
    position: relative;
    word-break: break-all;

    &:after {
      content: "";
      width: 1px;
      height: 14px;
      background: #e4e4e4;
      display: inline-block;
      position: absolute;
      right: -5px;
      top: 50%;
      margin-top: -3px;
    }

    .s-name {
      color: $baseColor;
      display: inline-block;
      width: 190px;
      font-size: 14px;
      vertical-align: top;
      margin-top: 11px;
      text-align: right;

      i {
        margin-left: 5px;

        &.icon {
          font-size: 13px;
          opacity: 0.92;
          margin-left: 2px;
          margin-right: 4px;
        }
      }
    }

    .item {
      position: relative;
      border: dashed 1px #fff;
      border-radius: 6px;
      display: block;
      padding: 6px 8px 6px 27px;
      cursor: pointer;

      &:hover {
        border-color: $baseColor;
        color: $baseColor;

        i,
        a {
          color: $baseColor;
        }
      }

      // &:after {
      //   content: "";
      //   width: 1px;
      //   height: 12px;
      //   background: #dcdcdc;
      //   position: absolute;
      //   right: -25px;
      //   top: 2px
      // }

      i {
        opacity: 0.8;
        margin-right: 8px;
        vertical-align: middle;
        position: absolute;
        left: 4px;
        top: 50%;
        margin-top: -11px;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
      }

      a {
        color: rgba(0, 0, 0, 0.82);
        display: inline-block;
        font-size: 13px;
        position: relative;
        overflow: initial !important;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        width: auto !important;
        vertical-align: middle;
        word-break: break-word;

        &:hover {
          color: $baseColor;

          // &:after {
          //   content: '';
          //   position: absolute;
          //   bottom: -4px;
          //   left: 0;
          //   right: 0;
          //   border-bottom: solid 1px $baseColor;
          // }
        }
      }
    }

    &:last-child {
      .list-box {
        border-bottom: none;
      }
    }
  }
}
// .el-submenu .el-menu {
//   height: auto !important;
// }
.el-menu--vertical{
   > .el-menu--popup{overflow: auto;//不用atuo 超出不出滚动条
      .el-submenu__title, .el-menu-item{
        height: auto !important;
        line-height: 1.4 !important;
        padding: 8px 0;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        background:none;
        i.iconfont{color:#FFF;margin-right:8px;}
      }
   }
  .el-submenu{
    .el-submenu__title{
      .el-submenu__icon-arrow{display:none}
    }
    &:hover{
      .el-submenu__title{
        background-color: rgba(0, 0, 0, 0.29) !important;
        i.iconfont{color:$baseColor}
      }
    }

    &.is-opened{
      .el-submenu__title{
        background-color: rgba(0, 0, 0, 0.29) !important;
        i.iconfont{color:$baseColor}
      }
    }
  }
  .el-menu-item{
    &:hover{
        background-color: rgba(0, 0, 0, 0.29) !important;
        i.iconfont{color:$baseColor}
    }

    &.is-opened{
        background-color: rgba(0, 0, 0, 0.29) !important;
        i.iconfont{color:$baseColor}
    }
  }
  // .el-menu-item{
  //   &:hover{
  //     background:#FFF !important;opacity:1;
  //     span{color:$baseColor}
  //     i.iconfont{color:$baseColor}
  //   }
  //   &.is-opened{
  //     background:#FFF;opacity:1;
  //     span{color:$baseColor}
  //     i.iconfont{color:$baseColor}
  //   }
  // }
}
</style>
