<template>
  <fixed1920>
    <div
      v-loading.fullscreen.lock="loading"
      :element-loading-text="$t('loading')"
      :class="[
        'g-bd',
        { 'z-sidebar--fold': $store.state.sidebarFold },
        {
          'z-sidebar--noside': true,
        },
      ]"
    >
      <template v-if="!loading">
        <main-navbar ref="ref_navbar" />

        <div class="g-cnt">
          <main-content
            v-if="!$store.state.contentIsNeedRefresh"
            @changeCustomerName="changeCustomerName"
          />
        </div>
      </template>
    </div>
  </fixed1920>
</template>

<script>
import MainNavbar from "./main-navbar";
import MainContent from "./main-content";
import debounce from "lodash/debounce";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import { requestPost } from "@/js/dai/request";
import fixed1920 from "@/views/components/fixed1920.vue";

export default {
  provide() {
    return {
      // 刷新
      refresh() {
        this.$store.state.contentIsNeedRefresh = true;
        this.$nextTick(() => {
          this.$store.state.contentIsNeedRefresh = false;
        });
      },
    };
  },
  data() {
    return {
      loading: true,
      userType: localStorage.getItem("userType"),
    };
  },
  components: {
    MainNavbar,
    MainContent,
    fixed1920,
  },

  watch: {
    $route: "routeHandle",
  },
  async created() {
    this.windowResizeHandle();
    this.routeHandle(this.$route);
    Promise.all([this.getWorkUserInfo()]).then(() => {
      this.loading = false;
    });
  },
  computed: {},
  methods: {
    changeCustomerName(customerName) {
      this.$refs["ref_navbar"].changeCustomerName(customerName);
    },
    // 窗口改变大小
    windowResizeHandle() {
      this.$store.state.sidebarFold =
        document.documentElement["clientWidth"] <= 992 || false;
      window.addEventListener(
        "resize",
        debounce(() => {
          this.$store.state.sidebarFold =
            document.documentElement["clientWidth"] <= 992 || false;
        }, 150)
      );
    },
    // 路由, 监听
    routeHandle(route) {
      if (!route.meta.isTab) {
        this.$store.state.mainShuju.activeName = "";
        this.$store.state.mainShuju.contentTabsActiveName = "";
        return false;
      }
      var tab = this.$store.state.contentTabs.filter(
        (item) => item.name === route.name
      )[0];
      if (!tab) {
        tab = {
          ...window.SITE_CONFIG["contentTabDefault"],
          ...route.meta,
          name: route.name,
          params: { ...route.params },
          query: { ...route.query },
        };
        this.$store.state.contentTabs =
          this.$store.state.contentTabs.concat(tab);
      }

      this.$store.state.mainShuju.activeName = tab.menuId;
      this.$store.state.mainShuju.contentTabsActiveName = tab.name;
    },

    // 获取当前管理员信息
    async getWorkUserInfo() {
      const url = "/epmetuser/customerstaff/staffbasicinfo";
      let params = {};
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.$store.state.user = { ...data };
        console.log("user---hahha", this.$store.state.user);
        localStorage.setItem("roleList", data.roleList);
        localStorage.setItem("customerId", data.customerId);
        localStorage.setItem("staffId", data.id);
        localStorage.setItem("agencyId", data.agencyId);
        localStorage.setItem("level", data.level);
        if (!localStorage.getItem("customerName")) {
          localStorage.setItem("customerName", data.customerName || "");
        }
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>
<style lang="scss">
.info-h {
  height: calc(100vh - 320px);
  // overflow: auto;
}
.info-scroll {
  &::-webkit-scrollbar {
    width: 8px;
    // background: linear-gradient(270deg, #0063FE, #0095FF);
  }

  &::-webkit-scrollbar-corner,
    /* 滚动条角落 */
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-track {
    /*滚动条的轨道*/
    border-radius: 4px;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    /* 滚动条轨道 */

    background: rgba(12, 129, 254, 0.24);
    // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    /* 滚动条手柄 */
    background: linear-gradient(270deg, #1257c9, #0095ff);
  }
}
</style>
