<template>
  <div :class="classObj" class="app-wrapper">
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <navbar />
      </div>
      <app-main />
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import { playSound } from "@/utils/index";

export default {
  name: "Layout",
  components: {
    Navbar,
    Sidebar,
    AppMain,
  },
  mixins: [ResizeMixin],
  data() {
    return {
      kefuInfo: {},
      $socket: {},
    };
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    device() {
      return this.$store.state.app.device;
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader;
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
  },
  watch: {
    "$store.state.msg.sendMsg": function () {
      console.log("我收到了消息", this.$store.state.msg.sendMsg);
      this.$socket.emit(
        "S2C",
        encodeURI(JSON.stringify(this.$store.state.msg.sendMsg), "utf-8")
      );
    },
  },
  created() {
    this.sockets();
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
    },
    randomNumber() {
      const now = new Date();

      let randStr = "";
      for (var i = 0; i < 8; i++) {
        randStr += Math.floor(Math.random() * 10);
      }

      return now.getFullYear().toString() + randStr;
    },
    sockets() {
      let url =
        process.env.VUE_APP_BASE_API + ":" + process.env.VUE_APP_SOCKET_PORT;
      this.$socket = io(url);

      this.$socket.on("connect", (msg) => {
        this.kefuInfo = JSON.parse(localStorage.getItem("kefu_info"));
        this.$message.success("链接服务器成功");
        this.$socket.emit(
          "KEFU_LOGIN",
          encodeURI(JSON.stringify(this.kefuInfo), "utf-8")
        );
      });

      this.$socket.on("CUSTOMER_IN", (res) => {
        playSound("new_customer.mp3");
        this.$store.commit("SET_NEW_CUSTOMER", res);
      });

      this.$socket.on("CHAT", (res) => {
        playSound("new_msg.wav");
        if (window.location.hash === "#/work/index") {
          this.$store.commit("SET_NEW_MSG", res);
        } else {
          const unreadMsg = parseInt(this.$store.getters.unreadMsg) + 1;
          this.$store.commit("SET_UNREAD_MSG", unreadMsg);
        }
      });

      this.$socket.on("CUSTOMER_OUT", (res) => {
        this.$store.commit("SET_CUSTOMER_OUT", res + "_" + this.randomNumber());
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
</style>
