<template>
  <q-layout view="hHh Lpr lFf">
    <!-- 头部 -->
    <q-header bordered reveal height-hint="98" class="head-bg text-dark">
      <q-toolbar style="height: 60px; width: 100vw" class="q-pr-lg q-pl-lg">
        <q-toolbar-title style="font-family: perfectFont; margin-right: 50px" v-if="$q.platform.is.desktop">
          {{ getLocalStorage().GroupName }}
        </q-toolbar-title>
        <q-tabs v-model="tab" @input="changeNavs" inline-label style="
            margin: 0 auto;
            height: 60px;
            flex: 1;
            justify-content: left;
            font-weight: bold;
          " shrink stretch v-if="userInfo && $q.platform.is.desktop" active-color="primary">
          <q-tab v-for="(x, i) in userInfo.MenuList" class="q-mr-md" :key="i" @click="setNavs(i)" :name="`navs_${i}`"
            :label="x.MenuName" :icon="x.MenuIcon" />
        </q-tabs>
        <div v-if="userInfo && $q.platform.is.mobile" class="col">
          <q-btn flat dense color="primary" icon="iconfont icon-menu" @click="drawerLeft = !drawerLeft" />
        </div>
        <div class="q-pl-lg flex items-center">
          <div class="wave_wrapper" @click="showNotify">
            <span :class="{
                dona: socektArr.length > 0,
                wave_scale: socektArr.length > 0
              }">
            </span>
            <inline-svg class="svg-icon svg-icon-primary" src="icons/svg/Code/Compiling.svg"></inline-svg>
          </div>
          <q-btn flat color="text-black" style="height: 50px" @click="showInfo">
            <span class="text-grey q-mr-xs">Hi</span>
            <span class="text-dark q-mr-md">{{
                userInfo && userInfo.AccountName ? userInfo.AccountName : ""
              }}
            </span>
            <q-avatar size="35px" rounded style="background: #c9f7f5" text-color="white">
              <img :src="userInfo.UserIcon" v-if="userInfo && userInfo.UserIcon" />
              <span v-else>{{
                userInfo && userInfo.AccountName
                  ? userInfo.AccountName.substring(0, 1)
                  : ""
              }}</span>
            </q-avatar>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>
    <!-- 除去头部以外的页面 -->
    <q-page-container class="window-height">
      <div class="row items-stretch full-height">
        <div style="
            box-shadow: 2px 0 10px 0 rgba(237, 238, 240, 0.5);
            background-color: #f5f6f7;
          " class="text-subtitle2 second-menu-bg" :style="{ width: IsShowLeft ? '0' : '180px' }"
          v-if="secondNavs && secondNavs.length > 0 && $q.platform.is.desktop">
          <div class="full-width left-menu-box q-pt-md">
            <div class="is-show-menu-2" @click="changeLeft">
              <i v-if="!IsShowLeft" class="iconfont icon-shouqi" title="收起"></i>
              <i v-else class="iconfont icon-zhankai is_Show_menu_3" title="展开"></i>
            </div>
            <q-list style="width: 180px; overflow: hidden">
              <template v-for="(x, i) in secondNavs">
                <q-item :to="x.MenuUrl" clickable v-ripple :active="currentPath == x.MenuUrl"
                  v-if="x.SubList && x.SubList.length == 0" :key="i">
                  <q-item-section avatar style="min-width: 30px">
                    <q-icon :name="x.MenuIcon" size="20px" />
                  </q-item-section>
                  <q-item-section>{{ x.MenuName }}</q-item-section>
                </q-item>
                <q-expansion-item v-else :label="x.MenuName">
                  <q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath == y.MenuUrl"
                    v-for="(y, yi) in x.SubList" :key="yi">
                    <q-item-section avatar style="padding-right: 0; min-width: 30px">
                      <q-icon :name="y.MenuIcon" size="20px" />
                    </q-item-section>
                    <q-item-section>{{ y.MenuName }}</q-item-section>
                  </q-item>
                </q-expansion-item>
              </template>
            </q-list>
          </div>
        </div>
        <div v-if="$q.platform.is.mobile"></div>
        <!-- 页面主体区域 -->
        <div class="col" style="background: #f2f4f7">
          <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" visible
            class="fit content-scroll full-width full-height">
            <router-view />
          </q-scroll-area>
        </div>
      </div>
    </q-page-container>
    <!-- 个人中心组件 -->
    <user-info-box v-if="persistent" :show-obj="userInfo" @close="closeSaveForm"></user-info-box>
    <!-- 消息提示组件 -->
    <notify v-if="persistentNotify" :show-obj="userInfo" :socekt-obj="socektArr" :logMsg="logMsg" :logCount="logCount"
      @close="closeSaveForm" @addLogList="getLogList"></notify>
    <!-- 学生信息组件 -->
    <studentRight-form v-if="callInStu" :isJudgeTrans="1" :BelongType="1" :save-obj="callInStu" @close="closeStuForm">
    </studentRight-form>

    <q-drawer v-model="drawerLeft" show-if-above :width="350" overlay side="left" bordered class="bg-primary text-dark"
      v-if="userInfo && $q.platform.is.mobile">
      <q-scroll-area class="fit">
        <div class="q-pa-sm">
          <q-list>
            <template v-for="(x, i) in userInfo.MenuList">
              <q-item :to="x.MenuUrl" clickable v-ripple :active="currentPath == x.MenuUrl"
                v-if="x.SubList && x.SubList.length == 0" :key="i">
                <q-item-section avatar style="min-width: 30px">
                  <q-icon :name="x.MenuIcon" size="20px" />
                </q-item-section>
                <q-item-section>{{ x.MenuName }}</q-item-section>
              </q-item>
              <q-expansion-item v-else :label="x.MenuName" :key="`s_`+i">
                <template v-for="(y, yi) in x.SubList">
                  <q-item :to="y.MenuUrl" clickable v-ripple :active="currentPath == y.MenuUrl" :key="yi"
                    class="q-ml-md" v-if="!y.SubList || y.SubList.length == 0">
                    <q-item-section avatar style="padding-right: 0; min-width: 30px">
                      <q-icon :name="y.MenuIcon" size="20px" />
                    </q-item-section>
                    <q-item-section>{{ y.MenuName }}</q-item-section>
                  </q-item>
                  <q-expansion-item v-else :label="y.MenuName" class="q-ml-md" :key="`s_`+i+`_t_`+yi"> 
                    <q-item :to="z.MenuUrl" clickable v-ripple :active="currentPath == z.MenuUrl" :key="zi"
                      v-for="(z, zi) in y.SubList" class="q-ml-md">
                      <q-item-section avatar style="padding-right: 0; min-width: 30px">
                        <q-icon :name="z.MenuIcon" size="20px" />
                      </q-item-section>
                      <q-item-section>{{ z.MenuName }}</q-item-section>
                    </q-item>
                  </q-expansion-item>
                </template>
              </q-expansion-item>
            </template>
          </q-list>
        </div>
      </q-scroll-area>
    </q-drawer>
  </q-layout>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import userInfoBox from "../components/global/user-right-box";
  import notify from "../components/global/notify";

  import {
    GetMsgLogPage
  } from "../api/course/index";

  import {
    sendSock
  } from "../api/common/socket";
  import {
    queryStudentByTel
  } from "../api/users/user";
  import {
    saveStudentFollow
  } from "../api/customerstudent/customerstudent";
  import {
    getSeatNewToken
  } from "../api/login";
  import studentRightForm from "../components/school/student/studentRight-form";
  export default {
    name: "MainLayout",
    data() {
      return {
        tab: "navs_0",
        currentPath: "",
        secondNavs: [],
        thumbStyle: {
          right: "0px",
          borderRadius: "0px",
          backgroundColor: "#1d1d1d",
          width: "6px",
          opacity: 1
        },
        barStyle: {
          right: "0px",
          borderRadius: "0px",
          backgroundColor: "#999",
          width: "6px",
          opacity: 0.5
        },
        persistent: false,
        persistentNotify: false,
        isExpend: false,
        IsShowLeft: true,
        userCenterMenuList: [], //用户中心菜单
        socektArr: [], //消息数组
        callInStu: null,
        logMsg: {
          PageIndex: 1,
          PageSize: 14,
          LoadPrompt: ""
        },
        logCount: 0,
        logPageCount: 0,
        drawerLeft: false
      };
    },
    components: {
      userInfoBox,
      notify,
      studentRightForm
    },
    watch: {
      $route: {
        handler: function (route) {
          var newPath = route.path.split("?")[0].toLowerCase();
          this.IsShowLeft = false;
          switch (newPath) {
            case "/course/chapter":
              this.IsShowLeft = true;
              break;
            case "/course/teachplan":
              this.IsShowLeft = true;
              break;
            case "/course/courseinfo":
              this.IsShowLeft = true;
              break;
            case "/course/coursejob":
              this.IsShowLeft = true;
              break;
          }
          this.currentPath = route.path;
        },
        immediate: true
      },
      userInfo: {
        handler: function (newVal) {
          let i = this.tab.split("_")[1];
          if (newVal && newVal.MenuList) {
            this.secondNavs =
              newVal.MenuList.length > 0 ?
              newVal.MenuList[i] && newVal.MenuList[i].SubList ?
              newVal.MenuList[i].SubList : [] : [];
          }
          if (newVal && newVal.UserCenterList) {
            this.userCenterMenuList = newVal.UserCenterList;
          }
        },
        immediate: true
      }
    },
    computed: {
      ...mapGetters(["userInfo", "logo", "name"])
    },
    mounted() {
      let i = 0;
      if (sessionStorage.getItem("current_navs")) {
        i = sessionStorage.getItem("current_navs");
      }
      this.tab = `navs_${i}`;
      if (this.userInfo && this.userInfo.MenuList) {
        this.secondNavs =
          this.userInfo.MenuList.length > 0 ?
          this.userInfo.MenuList[i] && this.userInfo.MenuList[i].SubList ?
          this.userInfo.MenuList[i].SubList : [] : [];
      }
      this.$root.$on("goworkobj", data => {
        this.secondNavs = [];
      });
      this.socektArr = [];
      this.logMsg.PageIndex = 1;
      this.getLogList();
      this.getMsg();
      if (this.userInfo && this.userInfo.IsTenCccUser == 1) {
        this.injectTCCC(
          this.userInfo.TenCccToken.Token,
          1400617921,
          this.userInfo.Email,
          this.userInfo.TenCccToken.SdkURL
        );
      }
    },
    methods: {
      closeStuForm() {
        this.callInStu = null;
      },
      injectTCCC(token, sdkAppId, userId, sdkUrl) {
        const scriptDom = document.createElement("script");
        scriptDom.dataset.token = token;
        scriptDom.dataset.sdkAppId = sdkAppId;
        scriptDom.dataset.userid = userId;
        //定制是否需要在登录后展示 坐席工作台。默认为true,这里可以通过设为false关闭
        scriptDom.dataset.showWorkBenchAtFirstLogin = false;
        scriptDom.src = sdkUrl;
        scriptDom.onload = () => {
          tccc.on("ready", () => {
            let that = this;
            let accepted = false;
            tccc.on(tccc.events.calloutAccepted, data => {
              accepted = true;
            });
            tccc.on(tccc.events.callIn, data => {
              queryStudentByTel({
                StuRealMobile: data.phone.replace("0086", ""),
                QQ: "",
                WeChatNo: ""
              }).then(r => {
                if (r.Data) {
                  that.callInStu = r.Data;
                }
              });
            });

            tccc.on(tccc.events.sessionEnded, function (data) {
              //也可以通过tccc.events枚举避免字符串typo
              var msg = "";
              this.callInStu = null;
              queryStudentByTel({
                StuRealMobile: data.phone.replace("0086", ""),
                QQ: "",
                WeChatNo: ""
              }).then(r => {
                if (r.Data) {
                  let stu = r.Data;
                  let msg = "";
                  if (data.direction == 1) {
                    //呼出
                    msg = `课程顾问：${that.userInfo.AccountName}呼出学员电话,`;
                    if (!accepted) {
                      msg += `学员未接听，响铃${data.duration}秒后，${
                      data.closeBy == "client"
                        ? "客户拒绝"
                        : data.closeBy == "seat"
                        ? "顾问放弃"
                        : "系统挂断"
                    }`;
                    } else {
                      msg += `学员已接听，通话时长：${data.duration}秒，${
                      data.closeBy == "client"
                        ? "由客户结束通话"
                        : data.closeBy == "seat"
                        ? "由顾问结束通话"
                        : "由系统结束通话"
                    }`;
                    }
                    accepted = false;
                  } else {
                    //呼入
                    msg = `客户呼入电话，`;
                    if (!data.duration || data.duration == 0) {
                      msg +=
                        "<span class='negative'>未接听，" +
                        (data.closeBy == "client" ?
                          "客户放弃" :
                          data.closeBy == "seat" ?
                          "顾问拒接" :
                          "系统挂断") +
                        "</span>";
                    } else {
                      msg += `<span class='negative'>已接听，通话时长：${
                      data.duration
                    }秒，由${
                      data.closeBy == "client"
                        ? "客户挂断"
                        : data.closeBy == "seat"
                        ? "顾问挂断"
                        : "系统挂断"
                    }<span>`;
                    }
                  }
                  saveStudentFollow({
                    StuId: stu.StuId,
                    Remark: msg
                  }).then(res => {});
                }
              });
            });
            tccc.on(tccc.events.tokenExpired, data => {
              getSeatNewToken().then(r => {
                if (r.Data) {
                  that.injectTCCC(
                    r.Data.Token,
                    1400617921,
                    that.userInfo.Email,
                    r.Data.SdkURL
                  );
                }
              });
            });
            this.$q.notify({
              type: "dark",
              message: `电话服务已连接`,
              position: "top"
            });
          });
        };
        document.body.appendChild(scriptDom);
      },
      changeLeft() {
        this.IsShowLeft = !this.IsShowLeft;
      },
      showInfo() {
        this.persistent = true;
      },
      showNotify() {
        this.persistentNotify = true;
      },
      changeNavs(val) {
        let i = val.split("_")[1];
        this.secondNavs = this.userInfo.MenuList[i].SubList;
      },
      closeSaveForm() {
        this.persistent = false;
        this.persistentNotify = false;
      },
      setNavs(val) {
        //防止页面数据丢失
        sessionStorage.setItem("current_navs", val);
        this.tab = `navs_${val}`;
        this.secondNavs = this.userInfo.MenuList[val].SubList;
        this.$router.push({
          path: this.userInfo.MenuList[val].MenuUrl
        });
      },
      //获取日志列表
      getLogList() {
        GetMsgLogPage(this.logMsg).then(res => {
          if (res.Code == 1) {
            this.logCount = res.Data.Count;
            this.logPageCount = res.Data.PageCount;
            if (this.socektArr.length < 1) {
              this.socektArr = res.Data.PageData;
              return;
            }
            if (this.logMsg.PageIndex < res.Data.PageCount) {
              this.logMsg.PageIndex++;
              this.socektArr = [...this.socektArr, ...res.Data.PageData];
              this.logMsg.LoadPrompt = "";
            } else {
              this.logMsg.LoadPrompt = "没有更多了";
            }
          }
        });
      },
      getMsg() {
        let userinfo = this.getLocalStorage();
        var SendData = {
          AppId: "JiaHeJiaoYu",
          ClientId: userinfo.Id
        };
        //sendSock(SendData, this.getDataFunc);
      },
      getDataFunc(e) {
        if (e.data) {
          var newData = JSON.parse(e.data);
          if (newData.length > 0) {
            for (var i = 0; i < newData.length; i++) {
              this.socektArr.unshift(newData[i]);
            }
          }
          this.showNotification(
            newData[0].Title,
            newData[0].Content,
            newData.CoverImg
          );
        }
      },
      /**
       * 通过Html调用显示系统通知
       * @param title
       * @param msg
       * @param imgUrl
       */
      showNotification(title, msg, imgUrl) {
        var Notification =
          window.Notification ||
          window.mozNotification ||
          window.webkitNotification;
        // 判断浏览器是否支持桌面通知
        if (Notification) {
          Notification.requestPermission(function (result) {
            //result 默认值'default'等同于拒绝 'denied' -用户选择了拒绝 'granted' -用户同意启用通知
            if ("granted" != result) {
              console.log("请授权浏览器能够进行通知!");
              return false;
            } else {
              var tag = "sds" + Math.random();
              var notify = new Notification(title, {
                dir: "auto",
                lang: "zh-CN",
                tag: tag, //实例化的notification的id
                icon: imgUrl, //通知的缩略图,icon 支持ico、png、jpg、jpeg格式
                title: title, //通知的标题
                body: msg //通知的具体内容
              });
              // 定义通知窗口点击函数
              notify.onclick = function () {
                //如果通知消息被点击,通知窗口将被激活
                window.focus();
              };
              // 定义通知错误事件
              notify.onerror = function () {};
              // 定义通知显示事件 可以设置多少秒之后关闭 也可以不设置关闭
              notify.onshow = function () {
                // 窗口显示3S后关闭
                setTimeout(function () {
                  notify.close();
                }, 3000);
              };
              // 定义通知关闭事件
              notify.onclose = function () {};
            }
          });
        } else {
          // 提示不支持系统通知
          console.log("您的浏览器不支持系统通知,建议使用Chrome浏览");
        }
      }
    }
  };

</script>

<style>
  @import url("~assets/css/common.css");

  .content-scroll>.scroll>.full-width {
    height: 100%;
  }

  .is-show-menu-2 {
    position: absolute;
    color: #a1a4a9;
    cursor: pointer;
    right: 75px;
    bottom: 7px;
    z-index: 999;
  }

  .is-show-menu-2 i {
    font-size: 30px;
  }

  .is_Show_menu_3 {
    position: absolute;
    left: 75px;
    bottom: 7px;
    cursor: pointer;
    z-index: 10;
  }

  .head-bg {
    background-color: #fff;
  }

  .head-bg .q-tab__label {
    font-weight: bold !important;
    font-size: 15px;
  }

  .second-menu-bg {
    background-image: url("~assets/images/page/left.png");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100%;
    position: relative;
  }

  .hide-scrollbar {
    scrollbar-width: 5px !important;
    -ms-overflow-style: marquee, panner !important;
  }

  .suojin {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
  }

  .suojin i {
    font-size: 24px;
    color: #636363;
  }

  .left-menu-box {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100% - 50px);
    height: calc(100% - 50px);
    background-color: rgba(255, 255, 255, 0.3);
  }

  .left-menu-box::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .left-menu-box::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #bbb;
  }

  /* .left-menu-box::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;

} */
  @keyframes shouqidonghua {
    from {
      width: 180px;
    }

    to {
      width: 60px;
    }
  }

  .changeShowqidonghua {
    animation: shouqidonghua 0.5s linear;
    width: 60px !important;
    overflow-x: hidden;
  }

  @keyframes shouqidonghua {
    from {
      width: 180px;
    }

    to {
      width: 60px;
    }
  }

  .changeShowqidonghua {
    animation: shouqidonghua 0.5s linear;
    width: 60px !important;
    overflow-x: hidden;
  }

  .wave_wrapper {
    margin: 0px 20px 0px 0;
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
  }

  .wave_wrapper:hover {
    background-color: #f3f6f9;
  }

  .wave_wrapper .dona {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    border: 1px solid var(--q-color-primary) !important;
    border-radius: 50%;
    z-index: 2;
  }

  .MuiBadge-root {
    display: none !important;
  }

  .wave_wrapper span.wave_scale {
    animation: wave_scale 2s both infinite;
  }

  #tcccSdkDomRoot {
    z-index: 5000;
  }

  @keyframes wave_scale {
    0% {
      transform: translate3d(-41px, -41px, 0px) scale(1, 1);
      -webkit-transform: scale(1, 1);
      opacity: 1;
    }

    50% {
      transform: translate3d(-41px, -41px, 0px) scale(10, 10);
      -webkit-transform: scale(2.5, 2.5);
      opacity: 0;
    }

    100% {
      transform: translate3d(-41px, -41px, 0px) scale(1, 1);
      -webkit-transform: scale(1, 1);
      opacity: 0;
    }
  }

</style>
