<template>
  <div class="system-select-page" v-grid-box="{ columns: [1, 1, 1, 1, 1, 1], rows: [1, 1], gap: '40px' }">
    <div
      v-for="(block, index) in systemModules"
      :key="block.moduleCode"
      :class="['system-block', `system-${block.moduleStatus}`]"
      :style="blockStyleMap[index]"
      v-flex.v="['c', 'sb']"
      @click="handleClick(block)"
    >
      <img class="icon" :src="systemIconMap[block.moduleCode]" alt="" />
      <div class="title">{{ block.moduleName }}</div>
      <div :class="['status', `status-${block.moduleStatus}`]">
        {{ systemStatusDesc[block.moduleStatus] }}
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  name: 'SimulationSceneSystemSelect',
  data() {
    return {
      blockStyleMap: [
        { gridColumn: '2 / 4' },
        { gridColumn: '4 / 6' },
        { gridColumn: '1 / 3' },
        { gridColumn: '3 / 5' },
        { gridColumn: '5 / 7' },
      ],
    }
  },
  computed: {
    ...mapState({
      systemModules: (state) => state.simulation.systemModules,
      systemStatusMap: (state) => state.simulation.systemStatusMap,
      systemStatusDesc: (state) => state.simulation.systemStatusDesc,
      systemIconMap: (state) => state.simulation.systemIconMap,
      systemPathMap: (state) => state.simulation.systemPathMap,
    }),
  },
  mounted() {
    this.getSystemModules()
  },
  methods: {
    ...mapActions(['getSystemModules']),
    handleClick(block) {
      if (block.moduleStatus === '0') return
      this.$router.push(this.systemPathMap[block.moduleCode])
    },
  },
}
</script>

<style lang="less" scoped>
.system-select-page {
  padding: 40px;
  .system-block {
    border: 1px solid #06445f;
    background-color: #062e45;
    position: relative;
    padding-bottom: 64px;
    cursor: pointer;
    .icon {
      transform: translateY(calc(180px - 50%)) scale(1.5, 1.5);
    }
    .title {
      color: #9cd3f5;
      font-size: 36px;
      line-height: 39px;
    }
    .status {
      position: absolute;
      right: 15px;
      top: 15px;
      padding: 12px 15px;
      font-size: 21px;
      line-height: 1;
      color: #ffffff;
    }
    .status-1 {
      background-color: #11b740;
    }
    .status-0 {
      background-color: #9d9d9d;
    }
  }
  .system-0 {
    cursor: not-allowed;
  }
  .system-1:hover {
    border-color: #00f2fe;
  }
}
</style>
