<template>
  <div class="system-navigation-page">
    <Header sjl="sjlaaa" button-name="返回登陆页" />
    <div class="main-system-list">
      <div
        class="main-system-item"
        v-for="(systemItem, index) in mainSystemList"
        :key="index"
        @click="parentSystem(systemItem)"
      >
        <img :src="getSystemNavigationIcon(systemItem.img)" />
        <p class="system-title">{{ systemItem.name }}</p>
      </div>
    </div>
    <!-- <div class="alarm-system-list" v-if="account"> -->
    <!-- <div class="alarm-system-list">
      <div
        class="alarm-system-item"
        v-for="(alarmItem, index) in alarmSystemList"
        :key="index"
        @click="subSystem(alarmItem)"
      >
        <img :src="getSystemNavigationIcon(alarmItem.img)" />
        <p>{{ alarmItem.name }}</p>
      </div>
    </div> -->
    <!-- <p class="alarm-system-text" v-if="account">智能化地灾中台</p> -->
    <!-- <p class="alarm-system-text" v-if="alarmSystemList.length">智能化地灾中台</p> -->
    <!-- <div class="bottom"></div>
    <div class="ewm">
      <i><img :src="getSystemNavigationIcon('ewm')" alt="二维码" /></i>
      <span>扫描下载APP</span>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import Header from '/@/views/lifeline/bigscreen/header/header.vue';
  import { getSystemNavigationIcon } from '/@/views/lifeline/bigscreen/common/utilities';
  import Flexible from '/@/views/lifeline/bigscreen/common/flexible';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useAppStore } from '/@/store/modules/app';
  import { onMounted } from 'vue';
  import { onUnmounted } from 'vue';
  import { session } from '/@/utils/Memory.js';
  import { getAppEnvConfig } from '/@/utils/env';

  const permissionStore = usePermissionStore();
  const appStore = useAppStore();
  const { VITE_GLOB_BIG_SCREEN } = getAppEnvConfig();
  const account = ref(session.getItem('user').username == 'sysadmin');

  const mainTopList = [
    { name: '地质灾害监测综合应用子系统', img: 'img1' },
    { name: '地质灾害数据支撑子系统', img: 'img2' }, //地质灾害监测数据支撑子系统
  ];
  const alarmList = [
    { name: '数据管理中心', img: 'img3' },
    { name: '地灾监测物联网中心', img: 'img4' },
    { name: '地灾GIS支撑中心', img: 'img5' },
    { name: '服务支撑中心', img: 'img6' },
  ];
  const alarmSystemList = ref([]);
  const mainSystemList = ref([
    // { name: '地质灾害监测综合应用子系统', img: 'img1' },
    // { name: '地质灾害数据支撑子系统', img: 'img2' },
  ]);
  const flexibleObject = ref(null as any);
  onMounted(() => {
    flexibleObject.value = new Flexible();
    //下面四个子系统的权限控制
    // const a = permissionStore.getBackMenuList;
    const a = session.getItem('allMenuList');
    console.log('下面四个子系统的权限控制:', a);
    if (a && a.length) {
      // permissionStore.setBackMenuList(a);
      a.map((i) => {
        if (i.menuSys == '1') {
          mainTopList.map((j, index) => {
            if (i.name == j.name) {
              if (index == 0) {
                j.name = 'YX水文气象监测系统';
              }
              if (index == 1) {
                j.name = '水文气象数据支撑子系统';
              }
              mainSystemList.value.push(j);
            }
          });
          alarmList.map((j) => {
            if (i.name == j.name) {
              alarmSystemList.value.push(j);
            }
          });
        }
      });
    }
  });
  onUnmounted(() => {
    flexibleObject.value.removeflexible();
    flexibleObject.value = null;
  });
  const router = useRouter();
  const parentSystem = (e) => {
    if (e.name == 'YX水文气象监测系统') {
      subSystem({ name: '地质灾害数据支撑子系统' }, true);
      var tk = sessionStorage.getItem('token') || 'dsge1fds2fsf3f4sdfsjsdui1245we6io6sj729bsd';
      window.location.href = `${VITE_GLOB_BIG_SCREEN}refreshToken=${tk.replace(/['"]/g, '')}`;
    } else {
      subSystem({ name: '地质灾害数据支撑子系统' });
    }
  };

  function removeNodesWithType2(obj) {
    for (let i = 0; i < obj.length; i++) {
      const node = obj[i];
      if (node.children) {
        const newChildren = removeNodesWithType2(node.children);
        if (newChildren !== node.children) {
          node.children = newChildren;
        }
      }
      if (node.mat && node.meta.type === 2) {
        delete node.meta;
      }
    }
    return obj;
  }
  const subSystem = (alarmItem: object, type) => {
    var user = session.getItem('user');
    if (user.roles.indexOf('SYS_ADMIN') > -1 || user.roles.indexOf('PLATFORM_ADMIN') > -1) {
      const allMenuList = session.getItem('allMenuList');
      if (allMenuList && allMenuList.length) {
        allMenuList.map((i) => {
          if (i.name == alarmItem.name) {
            appStore.setCurrentSystemName(alarmItem.name);
            const result = removeNodesWithType2(i.children);
            console.log('result', result);
            permissionStore.setBackMenuList(i.children);
            if (!type) {
              if (i.path == '/dataSupport') {
                router.push({ path: '/dashbord' });
              } else {
                router.push({ path: i.path });
              }
            }
          }
        });
      }
    } else {
      const allMenuList = session.getItem('allMenuList');
      appStore.setCurrentSystemName('地质灾害数据支撑子系统');
      removeNodesWithType2(allMenuList);
      permissionStore.setBackMenuList(allMenuList);
      router.push({ path: '/dashbord' });
    }
  };
</script>
<style lang="less" scoped>
  .ewm {
    position: fixed;
    right: 20px;
    bottom: 20px;
  }

  .ewm i {
    display: block;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.5);
    padding: 5px;
    border-radius: 5px;
  }

  .ewm img {
    width: 60px;
    height: 60px;
  }

  .ewm span {
    font-size: 12px;
    color: aquamarine;
  }

  .system-navigation-page {
    width: 100%;
    height: 100%;
    background: ~"url('/@/views/lifeline/bigscreen/images/systemNavigation/bg.jpg')" no-repeat;
    background-size: 100% 100%;
    color: #fff;

    .main-system-list {
      position: absolute;
      top: 35%;
      right: calc(50% - 2.3958rem);
      width: 48%;
      /* 居中 */
      .main-system-item {
        float: left;
        width: 2.3958rem;
        display: flex;
        flex-flow: column;
        text-align: center;
        align-items: center;
        cursor: pointer;

        img {
          width: 0.3958rem;
          height: 0.3281rem;
          margin-bottom: 0.1563rem;
        }
      }

      .system-title {
        font: bold 16px AlimamaShuHeiTi-Bold;
      }
    }

    .alarm-system-list {
      display: flex;
      position: absolute;
      top: 60%;
      right: 0;
      right: calc(50% - 2.0833rem);

      /* 说明：居中 每个元素160px,一共五个元素长800px,一半为400px,flexible将屏幕分为10等分，UI设计稿1920*1080 */

      .alarm-system-item {
        width: 1rem;
        display: flex;
        flex-flow: column;
        text-align: center;
        align-items: center;
        font-size: 0.0729rem;
        cursor: pointer;

        img {
          width: 0.5208rem;
          height: 0.5208rem;
        }
      }
    }

    .alarm-system-text {
      display: flex;
      position: relative;
      top: 67%;
      justify-content: center;
      font: bold 0.0833rem AlimamaShuHeiTi-Bold;
    }

    .bottom {
      width: 100%;
      position: fixed;
      bottom: 0;

      img {
        width: 100%;
      }
    }
  }
</style>
