<template>
  <q-layout view="lHh Lpr lFf">
    <q-header bordered reveal height-hint="98" class="head-bg text-dark">
      <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
        <q-avatar style="width:38px" square>
          <img :src="logo" />
        </q-avatar>
        <q-toolbar-title style="font-family:perfectFont;margin-right:50px">
          {{ name }}
        </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"
          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 class="q-pl-lg flex items-center">
          <div class="wave_wrapper" @click="showNotify">
            <!-- <span class="dona wave_scale">
            </span> -->
            <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.50);background-color:#f5f6f7"
          class="text-subtitle2 second-menu-bg"
          :style="{ width: IsShowLeft ? '0' : '180px' }"
          v-if="secondNavs && secondNavs.length > 0"
        >
          <div class="full-width left-menu-box q-pt-md">
            <div class="is-show-menu-2" @click="changeLeft">
              <!-- <a v-if="!IsShowLeft" title="收起"><<</a> -->
              <i
                v-if="!IsShowLeft"
                class="iconfont icon-shouqi"
                title="收起"
              ></i>
              <i
                v-else
                class="iconfont icon-zhankai is_Show_menu_3"
                title="展开"
              ></i>
              <!-- <a v-else class="is_Show_menu_3" title="展开">>></a> -->
            </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 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"
      @close="closeSaveForm"
    ></notify>
    <studentRight-form
      v-if="callInStu"
      :isJudgeTrans="1"
      :BelongType="1"
      :save-obj="callInStu"
      @close="closeStuForm"
    >
    </studentRight-form>
  </q-layout>
</template>

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

import { GetMsgLogList } 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
    };
  },
  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.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", () => {
          //tccc.UI.hide();
          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
            console.log("会话结束", data);
            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() {
      GetMsgLogList().then(res => {
        if (res.Code == 1) {
          this.socektArr = res.Data;
        }
      });
    },
    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.socektArr = this.socektArr.concat(newData)
        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-image: url('~assets/images/page/top.png');
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto 100%;*/
  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>
