<template>
  <div id="container" v-if="!isLogin">
    <nav-top />
    <div style="display: flex">
      <nav-left />
      <div style="flex: 1; display: flex; flex-direction: column; width: 0">
        <open-pages />
        <bread-crumb />
        <main>
          <a-config-provider :locale="zhCN">
            <router-view />
          </a-config-provider>
        </main>
      </div>
    </div>
  </div>
  <div id="container" v-if="isLogin">
    <router-view />
  </div>
</template>
<script>
import { computed, defineComponent, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import NavLeft from "@/components/NavLeft";
import NavTop from "@/components/NavTop";
import OpenPages from "@/components/OpenPages";
import BreadCrumb from "@/components/BreadCrumb";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import * as api from "./api/index1";
import * as api1 from "@/api/index1";
import * as api2 from "@/api/index";
export default defineComponent({
  components: {
    NavLeft,
    NavTop,
    OpenPages,
    BreadCrumb,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const isLogin = ref(false);
    // console.log("router", router.getRoutes(), route);
    console.log("版本0.13------------");
    const routes = computed(() => {
      return router.getRoutes().filter((e) => e.meta?.isLink);
    });
    watch(
      () => route.path,
      () => {
        route.path === "/login" && (isLogin.value = true);
      }
    );
    const currentRouteName = computed(() => route.name);
    function init() {
      console.log(store);
      getUserInfo();
      initDict("faceclassPic");
      initDict("faceclassClass");
      initDict("faceclassScene");
      initDict("projectLevel");
      initDict("projectSys");
      initDict("pathmapPic");
      initDict("projectClass");
      initDict("projectPic");
      getMemberInfo();
      getOrgTree();
    }
    async function getMemberInfo() {
      const list = localStorage.getItem("memberInitInfo");
      if (list) {
        store.commit("SET_MEMBER_INFO", JSON.parse(list));
        return;
      }
      const memberInitInfo = await api1
        .getMemberInfo({ keyWord: "", pageNo: 1, pageSize: 10 })
        .then((res) => res.data.data.rows);
      store.commit("SET_MEMBER_INFO", memberInitInfo);
      localStorage.setItem("memberInitInfo", JSON.stringify(memberInitInfo));
    }
    async function getUserInfo() {
      const userInfo = await api2.userInfo();
      store.commit("SET_USER", userInfo);
    }
    async function initDict(key) {
      let list = localStorage.getItem(key);
      if (list) {
        store.commit("SET_DICT", { key, data: JSON.parse(list) });
        return;
      }
      list = await getDictList(key);
      localStorage.setItem(key, JSON.stringify(list));
      store.commit("SET_DICT", { key, data: list });
    }
    const getDictList = (param) =>
      api1
        .getDict({
          pageNo: 1,
          pageSize: 20,
          setCode: param,
        })
        .then((res) => res.data.data.rows);
    //获取组织树
    const getOrgTree = () => {
      const orgtreeList = localStorage.getItem("orgtreeList");
      if (orgtreeList) {
        store.commit("getOrgtreeList", JSON.parse(orgtreeList));
        return;
      }
      let obj = {
        keyWord: "",
        id: -1,
        pageNo: 1,
        pageSize: 20,
      };
      api
        .getOrgInfo(obj)
        .then((res) => {
          console.log("组织树获取成功", res);
          if (res.data.code === 200) {
            // state.treeData = res.data.data;
            localStorage.setItem("orgtreeList", JSON.stringify(res.data.data));
            store.commit("getOrgtreeList", res.data.data);
          }
        })
        .catch((err) => {
          console.log("组织树获取失败", err);
        });
    };
    init();
    return {
      isLogin,
      routes,
      name: currentRouteName,
      zhCN,
    };
  },
});
</script>
<style lang="scss">
#app {
  // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
  // sans-serif;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}
#container {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 1000px;
  min-height: 100%;
  background-color: rgba(245, 247, 250, 1);
  main {
    height: 0;
    flex: 1 1 auto;
    // flex-shrink: 0;
    display: flex;
    overflow-y: auto;
    // display: flex;
    // flex: 1 1 auto;
    width: calc(100% - 40px);
    // margin-bottom: 20px;
    margin: 0px 20px 20px 20px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
  }
  // @media screen and (max-width: 1366px) {
  //   .cmMain {
  //     width: 750px;
  //   }
  // }
  // @media screen and (min-width: 1367px) and (max-width: 1680px) {
  //   .cmMain {
  //     width: 1010px;
  //   }
  // }
  // @media screen and (min-width: 1681px) and (max-width: 1920px) {
  //   .cmMain {
  //     width: 1270px;
  //   }
  // }
  // @media screen and (min-width: 1921px) {
  //   .cmMain {
  //     width: 1270px;
  //   }
  // }
}
</style>