<template>
  <Grid :rows="['50px', 1]" style="height: 100%">
    <Flex jc="fe" style="grid-area: 1 / 1 / 2 / 2">
      <span class="welcome-content">{{ userInfo.nickName }}，欢迎您！</span>
    </Flex>
    <Flex ai="c" jc="c" style="grid-area: 1 / 1 / 3 / 2">
      <Grid style="width: 917px; height: 445px" :columns="[1, 1, 1]" :rows="[1, 1]">
        <Flex
          v-for="module in systemModules"
          :key="module.moduleCode"
          fd="co"
          ai="c"
          jc="sb"
          class="module-block"
          @click="handleClick(module)"
        >
          <img class="icon" :src="module.icon" alt="" />
          <div class="title">{{ module.moduleName }}</div>
        </Flex>
      </Grid>
    </Flex>
  </Grid>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      systemPathMap: {
        db_system: '/simulationScene/database',
        simulation_system: '/simulationScene/simulationModel',
        scenario_system: '/simulationScene/sceneEditing',
        display_system: '/simulationScene/display',
        evaluation_system: '/simulationScene/evaluation',
      },
      systemModules: [
        {
          moduleCode: 'db_system',
          moduleName: '数据库子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/database.png'),
          modulePath: '/simulationScene/database',
        },
        {
          moduleCode: 'simulation_system',
          moduleName: '仿真模型子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/model.png'),
          modulePath: '/simulationScene/simulationModel',
        },
        {
          moduleCode: 'scenario_system',
          moduleName: '场景编辑子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/editing.png'),
          modulePath: '/simulationScene/sceneEditing',
        },
        {
          moduleCode: 'display_system',
          moduleName: '显示子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/display.png'),
          modulePath: '/simulationScene/display',
        },
        {
          moduleCode: 'evaluation_system',
          moduleName: '评估子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/evaluation.png'),
          modulePath: '/simulationScene/evaluation',
        },
        {
          moduleCode: 'control_system',
          moduleName: '系统控制子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/database.png'),
          modulePath: '/simulationScene/centralControl',
        },
      ],
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.info,
    }),
  },
  methods: {
    handleClick(module) {
      window.open(
        window.location.origin + module.modulePath,
        '_blank',
        'height=' +
          window.screen.height +
          ',width=' +
          window.screen.width +
          ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
      )
    },
  },
}
</script>

<style lang="less" scoped>
.welcome-content {
  font-size: 20px;
  line-height: 50px;
  font-weight: bolder;
  color: #00deff;
  letter-spacing: 2px;
  margin: 0 20px;
}
.module-block {
  border: 1px solid #06445f;
  background-color: #062e45;
  padding-bottom: 32px;
  cursor: pointer;
  .icon {
    transform: translateY(calc(80px - 50%));
  }
  .title {
    color: #9cd3f5;
    font-size: 24px;
    line-height: 32px;
  }
}
.module-block:hover {
  border-color: #00deff;
}
</style>
