<template>
  <div id="containercon">
    <el-aside :width="isCollapse ? '70px' : '200px'" v-if="isHaveAside">
      <div id="main_left">
        <div class="logo_cont">
          <!-- 正常logo尺寸 -->
          <img
            class="logo"
            v-if="!isCollapse"
            src="~@/assets/img/home/logo.png"
          />
          <!-- 折叠侧边栏logo尺寸 -->
          <img
            class="logo_coll"
            v-else
            src="~@/assets/img/home/eta_mini.png"
          />
        </div>
        <div
          style="overflow-y: auto; height: 90%; overflow-x: hidden"
          class="asider-cont"
        >
          <aside class="menu-expanded">
            <!--导航菜单-->
            <el-menu
              :background-color="$setting.menu_bg"
              text-color="#333"
              :collapse-transition="false"
              :active-text-color="$setting.theme_color"
              :default-active="$route.path.replace('/', '')"
              :collapse="isCollapse"
              unique-opened
              router
              class="el-menu-vertical-demo"
              @select="handleselect"
              ref="expandmenu"
            >
              <template v-for="(item, index) in navlists">
                <el-menu-item
                  :path="item.level_path"
                  :index="item.level_path"
                  :key="item.level_path"
                  :style="!isCollapse ? 'text-align:left' : ''"
                  v-if="item.IsLevel === 1&&!item.hidden"
                >
                  <a
                    :href="`/${item.level_path}`"
                    class="el-level-path"
                    :style="`display: block;color:${
                      item.level_path === activePath ? $setting.theme_color : '#666'
                    }`"
                    @click="(e) => e.preventDefault()"
                  >
                    <img
                      :src="item.icon_path"
                      alt=""
                      style="width: 24px; height: 24px"
                    />
                    <span class="titleLetter" v-show="isCollapse">{{
                      isCollapse ? MenuLetterMap[item.name] || "" : ""
                    }}</span>
                    <span
                      style="
                        display: inline-block;
                        width: 96px;
                        text-align: left;
                        font-size: 15px;
                        margin-left: 20px;
                      "
                      >{{ item.name }}</span
                    >
                  </a>
                </el-menu-item>

                <el-submenu v-else-if="item.IsLevel!==1&&!item.hidden" :index="index" :key="index">
                  <template slot="title">
                    <img
                      :src="item.icon_path"
                      alt=""
                      style="width: 24px; height: 24px"
                    />
                    <span class="titleLetter" v-show="isCollapse">{{
                      isCollapse ? MenuLetterMap[item.name] || "" : ""
                    }}</span>
                    <span
                      style="
                        display: inline-block;
                        width: 96px;
                        text-align: left;
                        font-size: 15px;
                        margin-left: 20px;
                      "
                      >{{ item.name }}</span
                    >
                  </template>
                  <el-menu-item
                    v-for="child in item.children"
                    :index="child.path"
                    :path="child.path"
                    :key="child.path"
                    v-show="!child.hidden"
                  >
                    <a
                      :href="`/${child.path}`"
                      :style="`display: flex;align-items:center;color:${
                        child.path === activePath ? $setting.theme_color : '#666'
                      }`"
                      @click="(e) => e.preventDefault()"
                    >
                      <svg t="1689672247666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7676" width="30" height="30"><path d="M640 499.2v25.6a21.333333 21.333333 0 0 1-21.333333 21.333333h-213.333334a21.333333 21.333333 0 0 1-21.333333-21.333333v-25.6a21.333333 21.333333 0 0 1 21.333333-21.333333h213.333334a21.333333 21.333333 0 0 1 21.333333 21.333333z"  p-id="7677" :fill="child.path === activePath ? $setting.theme_color : '#666'"></path></svg>
                      <span style="margin-left:15px;">{{ child.name }}</span>
                    </a>
                  </el-menu-item>
                </el-submenu>
              </template>
            </el-menu>
          </aside>
        </div>
      </div>
    </el-aside>
    <el-container>
      <div id="main_right">
        <div class="main_right_top">
          <div class="main_left_container">
            <div class="main_left_section" v-if="isHaveAside">
              <!-- 折叠按钮 -->
              <div class="coll_btn" @click="collapseHandle">
                <i class="el-icon-s-unfold coll_ico" v-if="isCollapse"></i>
                <i class="el-icon-s-fold coll_ico" v-else></i>
              </div>
              
              <!-- 面包屑 -->
              <el-breadcrumb separator="/" class="breadcrumb-inner">
                <el-breadcrumb-item
                  v-for="item in $route.matched"
                  :key="item.path"
                >
                  <span
                    v-if="item.meta.pathFrom"
                    @click.stop="handleClickBread(item)"
                    :style="`cursor: pointer; color: ${$setting.theme_color}`"
                  >
                    <template v-if="item.meta.pathFrom == 'pickList'">
                      {{ RoleType == "ficc" ? "权益客户" : "ficc客户" }}
                    </template>
                    <template
                      v-if="item.meta.pathFrom == '/regionCustomerDetail'"
                    >
                      {{
                        $route.query.title
                          ? $route.query.title.split("/")[1] || ""
                          : ""
                      }}客户列表
                    </template>
                    <template v-else>
                      {{ item.meta.pathName }}
                    </template>
                  </span>
                  <span
                    v-if="item.meta.pathFrom"
                    style="
                      margin: 0 9px;
                      font-weight: 700;
                      color: #c0c4cc;
                      fontsize: 16px;
                    "
                    >/</span
                  >
                  <span
                    v-if="item.parent"
                    :style="`cursor: pointer; color: ${$setting.theme_color}`"
                    @click.stop="routeClick(item)"
                  >
                    <template v-if="item.path == '/pickList'">
                      {{ RoleType == "ficc" ? "权益客户" : "ficc客户" }}
                    </template>
                    <template v-if="item.path == '/regionCustomerDetail'">
                      {{
                        $route.query.title
                          ? $route.query.title.split("/")[1] || ""
                          : ""
                      }}客户列表
                    </template>
                    <template v-else>
                      {{ item.name }}
                    </template>
                  </span>
                  <span v-else>{{ item.name }}</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>

            <img
              src="~@/assets/img/home/logo_white.png"
              alt=""
              class="left_section_logo"
              v-else
            />
          </div>

          <div class="right_section">
            <div class="userinfo">
              <div class="userinfo-fingerpost">
                <el-button
                  @click="linkToOtherMS(item)"
                  v-for="item in linkSystems"
                  :key="item.path"
                  type="text"
                  style="margin-right: 18px;color:#333;padding:12px;"
                >
                  <img :src="item.icon" v-if="item.icon" width="20" height="20" style="vertical-align: middle;">
                  {{item.name}}
                </el-button>

                <!-- <el-tooltip effect="dark" content="帮助文档" placement="bottom">
                  <div class="icon-box-item" v-if="isShowRole" @click="toOperation('fingerpost')">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="color:#333">
                      <path d="M9.24255 14.5C9.24255 14.0858 9.57834 13.75 9.99255 13.75C10.4068 13.75 10.7426 14.0858 10.7426 14.5C10.7426 14.9142 10.4068 15.25 9.99255 15.25C9.57834 15.25 9.24255 14.9142 9.24255 14.5Z" fill="currentColor"/>
                      <path d="M9.99261 5.00763C8.32056 5.00763 6.96136 6.36682 6.96136 8.03888H8.21136C8.21136 7.05718 9.01092 6.25763 9.99261 6.25763C10.9743 6.25763 11.7739 7.05718 11.7739 8.03888C11.7739 8.71106 11.2183 9.3851 10.4931 9.67971L10.4899 9.68101C9.82793 9.95419 9.36767 10.6052 9.36767 11.3656V12.5H10.6177V11.3656C10.6177 11.1228 10.7618 10.9216 10.9655 10.837C11.9996 10.4161 13.0239 9.37337 13.0239 8.03888C13.0239 6.36682 11.6647 5.00763 9.99261 5.00763Z" fill="currentColor"/>
                      <path d="M18.7427 10C18.7427 5.16751 14.8252 1.25 9.99268 1.25C5.16019 1.25 1.24268 5.16751 1.24268 10C1.24267 14.8325 5.16018 18.75 9.99267 18.75C14.8252 18.75 18.7427 14.8325 18.7427 10ZM17.4927 10C17.4927 14.1421 14.1348 17.5 9.99267 17.5C5.85054 17.5 2.49267 14.1421 2.49268 10C2.49268 5.85786 5.85054 2.5 9.99268 2.5C14.1348 2.5 17.4927 5.85787 17.4927 10Z" fill="currentColor"/>
                    </svg>
                  </div>
                </el-tooltip> -->
              </div>

              <el-dropdown trigger="click" style="width:130px;">
                <span class="el-dropdown-link userinfo-inner">
                  <img src="~@/assets/img/home/avatar.png"/>
                  {{ sysUserName }}
                  <i class="el-icon-arrow-down el-icon--right"/>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item divided @click.native="resetpwd"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item divided @click.native="logout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <section
          class="content-container"
          id="displayMain"
          ref="displayMain"
          :style="dynamicContStyle"
        >
          <el-row
            class="grid-content bg-purple-light contentc"
            style="min-width: 900px"
          >
            <el-col
              :span="24"
              class="content-wrapper"
              :style="!isHaveAside ? 'padding: 0 30px 0 0;' : ''"
            >
              <transition name="fade" mode="out-in">
                <router-view></router-view>
              </transition>
            </el-col>
          </el-row>
        </section>
      </div>
    </el-container>

    <!-- //重置初始密码 -->
    <pwd-dlg :dialogVisiblePwd="dialogVisiblePwd" />
    
  </div>
</template>

<script>
import {
  checkPwd,
  departInterence,
  customInterence,
  roadshowInterence,
} from "api/api.js";
import PwdDlg from "@/components/pwdDlg.vue";
import questionMsgDia from "@/components/questionMsgDia.vue";
import EventBus from "@/api/bus.js";
export default {
  components: {
    PwdDlg,
    questionMsgDia,
  },
  inject: ["reload"],
  filters: {
    formatDate(e) {
      return e.replace(/-/g, ".");
    },
  },
  watch: {
    "$route.path"(newval) {
      console.log(newval);
      if (this.$route.meta.pathFrom) {
        this.activePath = this.$route.meta.pathFrom;
      } else {
        this.activePath = newval.replace("/", "");
      }
      this.sysUserName = localStorage.getItem("userName") || "";
      this.Role = localStorage.getItem("Role") || "";
      this.RoleType = localStorage.getItem("RoleType") || "";
    },
  },
  computed: {
    done() {
      //今日待办是否处理完
      if (!this.todayList) {
        return false;
      }
      // 之前是通过判断列表中是否都有说明,现需要判断列表中都要添加或编辑
      return this.todayList.every((item) => item.isEdited);
    },
    // Role() {
    //   let role = localStorage.getItem("Role") || "";
    //   return role;
    // },
    isShowRole() {
      let role = localStorage.getItem("RoleIdentity") || "";
      return (
        role == "rai_group" ||
        role == "ficc_group" ||
        role == "rai_admin" ||
        role == "ficc_admin" ||
        role == "rai_seller" ||
        role == "ficc_seller" ||
        role == "admin"
      );
    },
    /* layout2 不展示侧边 */
    isHaveAside() {
      return this.$route.path !== "/mychartdetail";
    },
    /* wrapper style */
    dynamicContStyle() {
      if (this.isHaveAside) {
        return this.isCollapse ? "left:70px" : "left:200px";
      } else {
        return "left:0;padding-top:0;height:calc(100vh - 68px)";
      }
    },
  },
  data() {
    return {
      showTodayRemark: {
        CompanyId: 0,
        ProductId: 0,
        remark: "",
        toDoRemark: "",
        show: false,
        index: 0,
        new: false, //是否为新增
        isGiveUp: false, //是否不继续跟进
      }, //显示填写待办备注弹窗

      isCollapse: false, //侧边栏折叠
      breadcrumbFixed: false, //吸顶盒固定

      Role: "", //角色名称
      RoleType: "", //角色类型
      sysUserName: "", //登录系统用户名
      sysUserAvatar: "", //登录系统用户头像
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      navlists: [],
      activePath: "",

      noticeList: [], //消息提醒列表
      isShowNotice: false, //显示提示红点
      currentNoticeList: [], //当前显示的消息提醒列表
      noticeType: "客户", //消息类型 客户/合同/用印
      noticeCount: 0, //总共多少消息
      flag1: false, //显示客户提示红点
      flag2: false, //显示合同提示红点
      flag3: false, //显示用印提示红点
      dialogVisiblePwd: false, //初始密码的弹框

      flag4: false,
      flag5: false, //显示ETA试用相关的红点
      flag6: false, //显示出差相关的红点
      /* 路演反馈*/
      isFeedbackDialog: false,
      roadshowFeedbackList: [],
      isShowApprovalNotice: false, // 是否显示用印审批的公告
      //新的icon
      MenuLetterMap: {
        销售管理: "Sale",
        客户管理: "Clnt",
        路演管理: "RShow",
        出差管理: "Trip",
        研报管理: "Rpt",
        语义分析: "Nlp",
        ETA表格: "Tbl",
        ETA指标库: "Inx",
        相关性: "Co-R",
        ETA预测指标: "FInx",
        ETA图库: "Gra",
        /* 151:'FData', */
        供应分析: "Sup",
        商品价格曲线: "Crv",
      },

      //链接系统
      linkSystems: this.$setting.linkSystems,
    };
  },
  created() {
    this.isInitialPwd(); //判断是否为初始密码
    this.Role = localStorage.getItem("Role") || "";
    this.RoleType = localStorage.getItem("RoleType") || "";
    this.sysUserName = localStorage.getItem("userName") || "";
    this.sysUserAvatar = "../assets/img/userLogo.png";

    if (this.$route.path === "/sealApprovalList") {
      this.isShowApprovalNotice = true;
    }
  },
  mounted() {
    if (sessionStorage.getItem("hasGetMenu")) {
      this.navlists = JSON.parse(sessionStorage.getItem("MenuList"));
      sessionStorage.removeItem("hasGetMenu");
    } else {
      this.getMenuList();
    }
  },
  methods: {
    //判断是否为初始密码
    async isInitialPwd() {
      const res = await checkPwd();
      if (res.Ret === 200) {
        this.dialogVisiblePwd = res.Data;
      }
    },
    // 点击导航 打开今日待办
    // handleShowSallerTodayList() {
    //   this.getSellerTodayList("click");
    // },

    // 点击完成 批量提交备注
    handleTodayFinished() {
      let arr = this.todayList.map((item) => {
        return customInterence.sellerTodayListRemark({
          CompanyId: item.CompanyId,
          ProductId: item.ProductId,
          Remark: item.RenewalReason,
          Renew: item.isGiveUp ? 1 : 0,
          RenewalTodo: item.RenewalTodo,
        });
      });
      Promise.all(arr)
        .then((res) => {
          this.show = false;
          this.getSellerFeedBackList();
        })
        .catch((error) => {
          this.$message.waring("部分提交失败请重试");
          this.getSellerTodayList();
        });
    },

    //提交备注
    async handleSubmitTodayRemark() {
      if (!this.showTodayRemark.remark && !this.showTodayRemark.isGiveUp) {
        this.$message.warning("请填写最新情况");
        return;
      }
      if (!this.showTodayRemark.toDoRemark && !this.showTodayRemark.isGiveUp) {
        this.$message.warning("请填写To Do事项");
        return;
      }
      // 如果选中不再跟进,需要在备注中添加额外内容
      const addRemark = this.showTodayRemark.isGiveUp
        ? this.showTodayRemark.remark
          ? "。客户无续约意向，不再跟进（转为冻结客户）"
          : "客户无续约意向，不再跟进（转为冻结客户）"
        : "";
      // 自动开大的点击完成时批量更新
      if (this.todayListOpen === "auto") {
        this.todayList[this.showTodayRemark.index].RenewalReason =
          this.showTodayRemark.remark + addRemark;
        this.todayList[this.showTodayRemark.index].RenewalTodo =
          this.showTodayRemark.toDoRemark;
        this.todayList[this.showTodayRemark.index].isGiveUp =
          this.showTodayRemark.isGiveUp;
        this.$set(this.todayList[this.showTodayRemark.index], "isEdited", true);
        this.handleTodayRemarkClose();
      } else {
        const res = await customInterence.sellerTodayListRemark({
          CompanyId: this.showTodayRemark.CompanyId,
          ProductId: this.showTodayRemark.ProductId,
          Remark: this.showTodayRemark.remark + addRemark,
          Renew: this.showTodayRemark.isGiveUp ? 1 : 0,
          RenewalTodo: this.showTodayRemark.toDoRemark,
        });
        if (res.Ret === 200) {
          this.todayList[this.showTodayRemark.index].RenewalReason =
            this.showTodayRemark.remark;
          this.todayList[this.showTodayRemark.index].RenewalTodo =
            this.showTodayRemark.toDoRemark;
          this.handleTodayRemarkClose();
          this.getSellerTodayList();
        }
      }
    },

    handleTodayRemarkClose() {
      this.showTodayRemark = {
        remark: "",
        toDoRemark: "",
        show: false,
        index: 0,
        new: false,
        ProductId: 0,
        CompanyId: 0,
        isGiveUp: false,
      };
    },

    //显示填写今日待办备注
    handleShowEditTodayRemark(e) {
      this.showTodayRemark.remark = e.row.RenewalReason;
      this.showTodayRemark.toDoRemark = e.row.RenewalTodo;
      this.showTodayRemark.CompanyId = e.row.CompanyId;
      this.showTodayRemark.ProductId = e.row.ProductId;
      if (e.row.RenewalReason && this.todayListOpen !== "auto") {
        // 如果有说明且不是自动弹出,则为编辑
        this.showTodayRemark.new = false;
      } else {
        this.showTodayRemark.new = true;
      }
      this.showTodayRemark.show = true;
      this.showTodayRemark.index = e.$index;
    },

    //获取销售今日待办
    async getSellerTodayList(type) {
      this.todayListOpen = type;
      let ReasonStatus = -1;
      if (type === "auto") {
        ReasonStatus = -1;
      } else {
        ReasonStatus = 0;
      }
      const res = await customInterence.sellerTodayList({
        ReasonStatus: ReasonStatus,
        PageSize: 10000,
        CurrentIndex: 1,
      });
      if (res.Ret === 200) {
        if (type === "auto" && res.Data.Paging.Totals > 0) {
          // 自动弹出清除上次说明
          res.Data.List &&
            res.Data.List.forEach((item) => (item.RenewalReason = ""));
        }
        if (
          (type === "auto" && res.Data.Paging.Totals > 0) ||
          type !== "auto"
        ) {
          this.show = true;
        } else {
          this.getSellerFeedBackList();
        }

        this.$nextTick(() => {
          this.todayList = res.Data.List;
        });
      }
    },

    //获取销售代办中的历史记录
    async getSellerTodayHistoryList(item) {
      const res = await customInterence.sellerTodayHistoryList({
        CompanyId: Number(item.CompanyId),
        ProductId: Number(item.ProductId),
      });
      if (res.Ret === 200) {
        this.showTodayHistoryList = true;
        this.$nextTick(() => {
          this.todayHistoryList = res.Data || [];
        });
      }
    },

    /* 获取销售路演待反馈 */
    getSellerFeedBackList() {
      roadshowInterence.toFeedbacklist().then((res) => {
        if (res.Ret !== 200) return;

        const { Data } = res;

        if (!Data || !Data.length) return;

        this.isFeedbackDialog = true;
        this.roadshowFeedbackList = Data;
      });
    },

    // 操作指南的跳转
    toOperation(url) {
      // this.$router.replace({name: '/fingerpost', params: {id: 1}})
      let { href } = this.$router.resolve({
        path: `/${url}`,
        query: { contractid: this.contractId },
      });
      window.open(href, "_blank");
    },
    // 跳转去其他的系统
    async linkToOtherMS({path,key}) {
      /**
       * VUE_APP_HR_MANAGEMENT_SYSTEM -- HR管理系统
       * VUE_APP_FINANCIAL_MANAGEMENT_SYSTEM -- 财务管理系统
       */
      let href = path;
      if(key==='crm'){
        // 获取临时code
        const res=await departInterence.getToCRMSysCode()
        if(res.Ret===200){
          href=`${href}?code=${res.Data}`
        }
      }
      window.open(href, "_blank");
    },
    // 切换通知消息类型
    handleNoticeTypeChange(e) {
      this.noticeType = e;
      if (e === "客户") {
        this.currentNoticeList = this.noticeList.Company.List;
      } else if (e === "合同") {
        this.currentNoticeList = this.noticeList.Contract.List;
      } else if (e === "用印") {
        this.currentNoticeList = this.noticeList.Seal.List;
      } else if (e === "ETA试用") {
        this.currentNoticeList = this.noticeList.ETATrial.List;
      } else if (e === "出差") {
        this.currentNoticeList = this.noticeList.BusinessTrip.List;
      } else {
        this.currentNoticeList = this.noticeList.EdbReplace.List;
      }
    },

    routeClick(item) {
      if (this.$route.path == item.path) {
        window.location.reload();
      } else {
        this.$router.push({ path: item.path });
      }
    },
    /* 侧边栏菜单列表 */
    getMenuList() {
      departInterence.getMenu().then((res) => {
        if (res.Ret === 200) {
          this.navlists = res.Data.List.length ? res.Data.List : [];
          sessionStorage.setItem("MenuList", JSON.stringify(this.navlists));
          /* 是否有数据报表权限 */
          let bool_data = this.navlists.some((item) => {
            return item.name === "数据报表";
          });
          this.$store.commit("SET_DATA_AUTH", bool_data);
        }
      });
    },
    /* 待办事项列表 */
    getNotice() {
      customInterence.noticeList().then((res) => {
        if (res.Ret === 200) {
          res.Data.Company.List &&
            res.Data.Company.List.forEach((item) => {
              item.CreateTime = item.CreateTime.replace(/-/g, ".");
            });
          res.Data.Contract.List &&
            res.Data.Contract.List.forEach((item) => {
              item.CreateTime = item.CreateTime.replace(/-/g, ".");
            });
          res.Data.Seal.List &&
            res.Data.Seal.List.forEach((item) => {
              item.CreateTime = item.CreateTime.replace(/-/g, ".");
            });
          res.Data.EdbReplace.List &&
            res.Data.EdbReplace.List.forEach(
              (item) => (item.CreateTime = item.CreateTime.replace(/-/g, "."))
            );
          res.Data.BusinessTrip.List &&
            res.Data.BusinessTrip.List.forEach(
              (item) => (item.CreateTime = item.CreateTime.replace(/-/g, "."))
            );

          this.noticeList = res.Data;
          this.noticeCount =
            this.Role === "admin"
              ? res.Data.EdbReplace.Total + res.Data.BusinessTrip.Total
              : res.Data.Company.Total +
                res.Data.Contract.Total +
                res.Data.Seal.Total +
                res.Data.EdbReplace.Total +
                res.Data.BusinessTrip.Total;

          this.noticeType = this.Role === "admin" ? "更新" : "客户";
          // 默认显示客户
          this.currentNoticeList =
            this.Role === "admin"
              ? res.Data.EdbReplace.List
              : res.Data.Company.List;

          // 检查是否有未读的
          if (this.Role != "admin") {
            this.flag1 = res.Data.Company.List.some((item) => {
              return item.MessageStatus === 0;
            });
            this.flag2 = res.Data.Contract.List.some((item) => {
              return item.MessageStatus === 0;
            });
            this.flag3 = res.Data.Seal.List.some((item) => {
              return item.MessageStatus === 0;
            });
          }

          this.flag5 = res.Data.ETATrial.List.some((item) => {
            return item.MessageStatus === 0;
          });
          this.flag6 = res.Data.BusinessTrip.List.some((item) => {
            return item.MessageStatus === 0;
          });

        }
      });
    },
    /* 点击消息列表 跳转审批列表 */
    noticeClick(item) {
      customInterence
        .readNotice({
          Id: Number(item.Id),
        })
        .then((res) => {
          if (res.Ret === 200) {
            item.MessageStatus = 1;
            if (this.noticeType === "客户") {
              if (this.$route.path != "/approvalList") {
                this.$router.push({
                  path: "/approvalList",
                });
              } else {
                window.location.reload();
              }
            } else if (this.noticeType === "合同") {
              let Role = localStorage.getItem("Role");
              // 主管跳转合同审批列表
              if (Role === "ficc_admin" || Role === "rai_admin") {
                if (this.$route.path != "/contractapprovallist") {
                  this.$router.push({
                    path: "/contractapprovallist",
                  });
                } else {
                  window.location.reload();
                }
              } else {
                if (this.$route.path != "/contractmanagelist") {
                  this.$router.push({
                    path: "/contractmanagelist",
                  });
                } else {
                  window.location.reload();
                }
              }
            } else if (this.noticeType === "用印") {
              // 用印
              if (this.$route.path != "/sealApprovalList") {
                this.$router.push({
                  path: "/sealApprovalList",
                });
              } else {
                window.location.reload();
              }
            } else if (this.noticeType === "ETA试用") {
              const path = this.$route.path;
              let pushPath = "/etaApprovalList";
              //非管理员:若通过跳转用户列表，若驳回跳转审批列表
              //const etaApprovalListType = item.Content.includes('通过')?'approved':'all'
              const etaApprovalListType =
                item.Redirect === 1 ? "approved" : "all";
              sessionStorage.setItem(
                "etaApprovalListType",
                etaApprovalListType
              );
              if (path == pushPath) {
                window.location.reload();
              } else {
                this.$router.push(pushPath);
              }
            } else if (this.noticeType === "出差") {
              const path = this.$route.path;
              let pushPath;
              if (item.ApprovalStatus != 1) {
                // 跳到申请列表
                pushPath = "/businessTripApplication";
              } else {
                // 跳到审批列表
                pushPath = "/businessTripApproval";
              }
              if (path == pushPath) {
                window.location.reload();
              } else {
                this.$router.push(pushPath);
              }
            }
          }
        });
    },
    resetpwd() {
      //修改密码
      this.$router.push({ path: "/resetpsd" });
    },
    handleselect: function (a, b) {
      // 清除筛选条件
      sessionStorage.removeItem("pickListBack");
      sessionStorage.removeItem("customSearchBack");
      sessionStorage.removeItem("customListBack");
      sessionStorage.removeItem("approvalListBack");
      this.activePath = a;
      // this.defaultPath = a.replace('/','');
      if (a == this.$route.path.replace(/\//g, "")) {
        window.location.reload();
      }
    },
    logout() {
      //退出登录
      var that = this;
      this.$confirm("确认退出吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          localStorage.setItem("auth", "");
          localStorage.setItem("userName", "");
          localStorage.setItem("Role", "");
          localStorage.setItem("RoleType", "");
          localStorage.setItem("AdminId", "");
          localStorage.setItem("AdminName", "");
          localStorage.setItem("ManageType", "");
          localStorage.setItem("RoleIdentity", "");
          that.$router.push("/login");
        })
        .catch(() => {});
    },
    collapseHandle () {
      //折叠导航栏
      this.isCollapse = !this.isCollapse;
      // 派发折叠导航栏事件
      EventBus.$emit("collapseHandle", this.isCollapse);
    },
    handleScroll() {
      //页面滚动监听
      let mainDiv = document.getElementById("displayMain");
      var scrollTop = mainDiv.scrollTop;
      if (scrollTop > 80) {
        this.breadcrumbFixed = true;
      } else {
        this.breadcrumbFixed = false;
      }
    },

    handleClickBread(item) {
      if (item.meta.pathFrom == "dayorweek") {
        this.$router.go(-1);
      } else {
        this.$router.push({ path: "/" + item.meta.pathFrom });
      }
    },
  },
};
</script>

<style lang="scss">
@import "../styles/theme-vars.scss";

#containercon {
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  overflow: hidden;
  display: flex;
  .asider-cont {
    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
  // reset
  .el-breadcrumb {
    font-size: 16px;
  }
  #main_left {
    // width: 200px;
    height: 100%;
    background: $menu_bg !important;
    color: #000;
    border-bottom: 1px solid #eaeaea;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    .logo_cont {
      height: 60px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #DCDFE6;
      .logo {
        width: 148px;
        height: 38px;
        display: block;
        overflow: hidden;
      }
      .logo_coll {
        width: 50px;
        height: 50px;
        display: block;
        overflow: hidden;
      }
    }
    aside {
      text-align: center;
      z-index: 10;
      margin-left: -1px;
      .el-menu {
        width: 200px;
        height: 100%;
        box-sizing: border-box;
        /* background: #323a58 !important; */
      }
      .el-menu--collapse {
        width: 70px;
        height: 100%;
        box-sizing: border-box;
        /* background: #323a58 !important; */
      }
      .menuitem {
        height: 55px;
        padding-left: 28px;
        box-sizing: border-box;
        cursor: pointer;
        color: #1f2e4d;
        font-size: 15px;
        display: flex;
        align-items: center;
        overflow: hidden;
        img {
          width: 20px;
          margin-right: 6px;
        }
      }
      .el-submenu .el-menu-item {
        font-size: 15px;
        padding: 0 0 0 20px !important;
        text-align: left;
      }
      .el-menu-item.is-active {
        background: #ECF2FE !important;
        color: $theme-color !important;
        a {
          color: $theme-color !important;
        }
      }
      .el-submenu__title {
        //padding-left: 0 !important;
        display: flex;
        align-items: center;
      }
      .el-level-path {
        position: relative;
        height: 56px;
        display: flex;
        align-items: center;
        .titleLetter {
          font: 12px "\5FAE\8F6F\96C5\9ED1";
          letter-spacing: 1px;
          left: 0;
        }
      }
      .titleLetter {
        position: absolute;
        bottom: -2px;
        width: auto;
        height: auto;
        visibility: visible;
        font-size: 12px;
      }
      .el-menu--collapse .el-submenu__title {
        padding-left: 20px !important;
      }
    }
    .el-submenu__title:hover,.el-menu-item:hover {
      background: #ECF2FE !important;
    }
    .subItem {
      overflow: hidden;
      .sub-item {
        height: 55px;
        padding-left: 52px;
        box-sizing: border-box;
        cursor: pointer;
        color: #1f2e4d;
        font-size: 15px;
        display: flex;
        align-items: center;
        overflow: hidden;
        &.sub_act {
          background: #dbe4fc;
        }
      }
    }
    .menu-expanded > .el-menu-vertical-demo {
      // width: 200px;
      // min-height: calc(100vh - 80px);
      color: #fff;
      padding-bottom: 20px;
      overflow: hidden;
      overflow-y: auto;
      border-right: none;
      /* .el-submenu > .el-menu > .active {
        background: rgba($color: #fdb863, $alpha: 0.2) !important;
        color: #fdb863 !important;
      } */
    }
    .el-submenu__title > i:nth-of-type(1) {
      color: #C0C4CC !important;
    }
  }
  .left_section_logo {
    width: 148px;
    height: 38px;
  }
  #main_right {
    width: 100%;
    overflow: hidden;
    background: #f5f7f9;
    .main_right_top {
      // width: 100%;
      background: #fff;
      height: 60px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      .main_left_container {
        display: flex;
        align-items: center;
        .main_left_section {
          display: flex;
          align-items: center;
        }
        .approval_notice {
          display: flex;
          align-items: center;
          margin-left: 60px;
          img {
            margin-right: 10px;
          }
          div {
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #ee9a34;
            line-height: 19px;
          }
        }
      }

      .coll_btn {
        margin-right: 20px;
        .coll_ico {
          font-size: 22px;
          display: block;
          cursor: pointer;
          color: #606266;
          &:hover {
            color: #4099ef;
          }
        }
      }
      .breadcrumb-container {
        padding: 12px 20px;
        box-sizing: border-box;
        line-height: 18px;
        margin-bottom: 0px;
        .title {
          width: 150px;
          color: #475669;
          float: left;
        }
        .breadcrumb-inner {
          font: 14px/19px "微软雅黑";
        }
      }
      .breadFixed {
        display: block !important;
        background: rgb(255, 255, 255);
        border-bottom: 1px solid #eaeaea;
        padding: 13px 245px 12px 20px;
        box-sizing: border-box;
        position: fixed;
        top: 60px;
        left: 150px;
        right: 0;
        z-index: 10;
        overflow: hidden;
      }
      .breadCollapsedFixed {
        display: block !important;
        background: rgb(255, 255, 255);
        border-bottom: 1px solid #eaeaea;
        padding: 15px 105px 15px 25px;
        box-sizing: border-box;
        position: fixed;
        top: 60px;
        left: 60px;
        right: 0;
        z-index: 10;
      }
      .userinfo {
        /* min-width: 420px;
        width: 480px; */
        height: 60px;
        text-align: right;
        overflow: hidden;
        position: relative;
        margin-left: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .userinfo-fingerpost {
          display: flex;
          align-items: center;
          margin-right: 50px;
          color: $theme-color;
          .el-button:hover {
            background: #ecf2fe;
          }
        }
        .userinfo-inner {
          cursor: pointer;
          color: #666 !important;
          display: flex;
          align-items: center;
          font-size: 16px;
          img {
            width: 25px;
            height: 25px;
            margin: 10px;
          }
        }
        .userinfo-inner:hover {
          color: #5882ef;
        }

        .icon-box-item {
          padding: 12px;
          border-radius: 4px;
          &:hover {
            background: #ecf2fe;
          }
        }
      }
    }
    .right_section {
      display: flex;
      align-items: center;
    }
    .safariStyle {
      border-right: none;
      margin-left: -1px;
    }
    .content-container {
      height: calc(100vh - 90px);
      background: #F2F6FA;
      // position: relative;
      overflow-y: auto;
      position: absolute;
      padding-top: 22px;
      left: 200px;
      top: 68px;
      right: 0;
      z-index: 100;
      /*修改滚动条样式*/
      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      &::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #888;
      }
      &::-webkit-scrollbar-corner {
        background: #666;
      }
      /**/
      .contentc {
        width: 100%;
        overflow: auto;
        .content-wrapper {
          width: 100%;
          padding: 0 30px 20px;
          box-sizing: border-box;
          overflow: auto;
        }
        .note_entrance {
          display: inline-block;
          position: absolute;
          right: 20px;
          top: 50%;
          height: 100%;
          transform: translateY(-50%);
          > img {
            width: 20px;
            margin-right: 5px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
