<template>
  <Grid class="central-control-page" :columns="[1, 1]" :rows="['331px', 1]">
    <ModuleWrapper title="系统模块" style="grid-column: 1 / 3">
      <Grid class="normal" :columns="[1, 1, 1, 1, 1]">
        <div
          v-for="block in systemModules"
          :key="block.moduleCode"
          :class="['system-block', 'flex-c', 'ai-c', 'jc-sb', `system-${block.moduleStatus}`]"
        >
          <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>
      </Grid>
    </ModuleWrapper>
    <ModuleWrapper title="全部房间" style="grid-column: 1 / 3">
      <template #extra>
        <a-button type="primary" @click="handleOpenScenarioModal()">新建房间</a-button>
      </template>
      <div class="normal flex-c ai-c" v-loading="room.loading">
        <Grid class="room-wrapper" :columns="[1, 1, 1, 1, 1]" :rows="[1, 1]">
          <div v-for="item in room.list" :key="item.id" class="room-item">
            <img class="room-image" :src="item.image || '/mockData/68ab3707-2552-4b78-bfc0-cec3502ec62f.png'" alt="" />
            <div class="room-mask"></div>
            <div class="room-brief">
              <div class="room-name">{{ item.name }}</div>
              <div class="room-author">{{ item.author }}</div>
            </div>
            <div class="room-reload" title="进入房间" @click="handleJoinRoom(item)">
              <a-icon type="reload" />
            </div>
          </div>
        </Grid>
        <a-pagination
          v-model="room.pagination.current"
          :pageSize.sync="room.pagination.pageSize"
          :total="room.pagination.total"
          @change="getRoomList"
        />
      </div>
    </ModuleWrapper>
    <a-modal
      v-model="scenarioModal.visible"
      title="选择想定"
      width="900px"
      :maskClosable="false"
      :destroyOnClose="true"
      @ok="handleConfirmScenario()"
    >
      <Grid style="height: 600px" :columns="[1, 1]">
        <ModuleWrapper title="想定列表">
          <template #extra>
            <a-icon type="sync" style="font-size: 30px; color: #00deff" @click="getScenarioListData()" />
          </template>
          <div
            class="normal"
            v-loading="scenarioModal.scenarioLoading"
            style="background-color: white; padding: 20px 0; overflow: auto"
          >
            <a-tree
              :treeData="scenarioModal.scenarioList"
              :replaceFields="{ title: 'name', key: 'id' }"
              :selectedKeys.sync="scenarioModal.selectedKeys"
              @select="handleChangeScenarioSelected"
            >
            </a-tree>
          </div>
        </ModuleWrapper>
        <ModuleWrapper title="作战/保障力量">
          <template #extra>
            <a-icon type="sync" style="font-size: 30px; color: #00deff" @click="getZzbzllTreeData()" />
          </template>
          <div class="normal" v-loading="scenarioModal.zzbzllLoading" style="background-color: white; overflow: auto">
            <a-tree
              :treeData="scenarioModal.zzbzllTree"
              :replaceFields="{ title: 'name', key: 'id' }"
              :selected="false"
              :expandedKeys.sync="scenarioModal.expandedKeys"
            >
            </a-tree>
          </div>
        </ModuleWrapper>
      </Grid>
    </a-modal>
  </Grid>
</template>

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

export default {
  name: 'SimulationSceneCentralControl',
  data() {
    return {
      room: {
        list: [],
        loading: false,
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
        },
      },
      scenarioModal: {
        visible: false,
        scenarioList: [],
        scenarioLoading: false,
        selectedKeys: [],
        zzbzllTree: [],
        zzbzllLoading: false,
        expandedKeys: [],
      },
      roomInfo: {
        roomId: '',
      },
    }
  },
  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,
    }),
  },
  created() {
    this.getSystemModules()
    this.getRoomList()
  },
  methods: {
    ...mapActions(['getSystemModules']),
    async getRoomList() {
      try {
        this.loading = true
        const res = await this.$http({
          url: '/baseData/room/list',
          method: 'get',
          params: {
            pageNum: this.room.pagination.current,
            pageSize: this.room.pagination.pageSize,
          },
        })
        this.room.list = res.data.data
        this.room.pagination.total = res.data.totalCount
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    handleOpenScenarioModal() {
      this.scenarioModal.visible = true
      setTimeout(() => {
        this.getScenarioListData()
      }, 100)
    },
    async getScenarioListData() {
      try {
        this.scenarioModal.scenarioLoading = true
        const res = await this.$http({
          url: `/baseData/scenario/all`,
          method: 'get',
        })
        this.scenarioModal.scenarioList = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.scenarioModal.scenarioLoading = false
      }
    },
    handleChangeScenarioSelected() {
      this.getZzbzllTreeData()
    },
    async getZzbzllTreeData() {
      try {
        this.scenarioModal.zzbzllLoading = true
        const res = await this.$http({
          url: `/scenario/power/${this.scenarioModal.selectedKeys[0]}`,
          method: 'get',
        })
        this.scenarioModal.zzbzllTree = [
          {
            id: '1',
            name: '红方',
            children: [
              { id: '1-1', name: '作战力量', children: res.data.red.fight },
              { id: '1-2', name: '保障力量', children: res.data.red.guarantee },
              { id: '1-3', name: '指挥力量', children: res.data.red.command },
            ],
          },
          {
            id: '2',
            name: '蓝方',
            children: [
              { id: '2-1', name: '作战力量', children: res.data.blue.fight },
              { id: '2-2', name: '保障力量', children: res.data.blue.guarantee },
              { id: '2-3', name: '指挥力量', children: res.data.blue.command },
            ],
          },
        ]
        this.scenarioModal.expandedKeys = ['1', '1-1', '1-2', '1-3', '2', '2-1', '2-2', '2-3']
      } catch (error) {
        console.log(error)
      } finally {
        this.scenarioModal.zzbzllLoading = false
      }
    },
    async handleConfirmScenario() {
      const scenarioId = this.scenarioModal.selectedKeys[0]
      if (!scenarioId) {
        return this.$message.warning('请先选择想定！')
      }
      try {
        this.$message.info('正在创建新房间，请稍候')
        const res = await this.$http({
          url: '/room/scenario/create',
          method: 'get',
          params: { id: scenarioId },
        })
        this.scenarioModal.visible = false
        this.clearScenarioModal()
        const shifou = await new Promise((resolve) => {
          this.$confirm({
            content: `创建新房间成功，房间编号${res.data.roomCode}，是否立即进入？`,
            onOk() {
              resolve(true)
            },
            onCancel() {
              resolve(false)
            },
          })
        })
        if (shifou) {
          this.handleJoinRoom(res.data)
        }
      } catch (error) {
        console.log(error)
      }
    },
    clearScenarioModal() {
      this.scenarioModal.scenarioList = []
      this.scenarioModal.selectedKeys = []
      this.scenarioModal.zzbzllTree = []
      this.scenarioModal.expandedKeys = []
    },
    handleJoinRoom(item) {
      this.roomInfo.roomId = item.roomId
    },
  },
}
</script>

<style lang="less" scoped>
.central-control-page {
  padding: 20px;
}
.system-block {
  border: 1px solid #06445f;
  background-color: #062e45;
  position: relative;
  padding-bottom: 32px;
  cursor: pointer;
  .icon {
    transform: translateY(calc(90px - 50%));
  }
  .title {
    color: #9cd3f5;
    font-size: 24px;
    line-height: 26px;
  }
  .status {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 8px 10px;
    font-size: 14px;
    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;
}

.room-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}
.room-item {
  position: relative;
  cursor: pointer;
  .room-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .room-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .room-brief {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1));
    padding-left: 10px;
    .room-name {
      font-size: 20px;
      line-height: 36px;
    }
    .room-author {
      font-size: 12px;
      line-height: 24px;
    }
  }
  .room-reload {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 1;
    display: none;
  }
  &:hover .room-reload {
    display: block;
  }
  .room-reload:hover {
    color: #00f2fe;
  }
}

.scenario-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}
.scenario-item {
  position: relative;
  cursor: pointer;
  .scenario-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .scenario-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .scenario-brief {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1));
    padding-left: 10px;
    .scenario-name {
      font-size: 20px;
      line-height: 36px;
    }
    .scenario-author {
      font-size: 12px;
      line-height: 24px;
    }
  }
  .scenario-reload {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 1;
    display: none;
  }
  &:hover .scenario-reload {
    display: block;
  }
  .scenario-reload:hover {
    color: #00f2fe;
  }
}

.scenario-info-wrapper {
  flex: 1;
  border: 1px solid #06445f;
  background-color: #0f3b4f;
  overflow: auto;
  .ant-row {
    line-height: 26px;
    .xdsm-wrapper {
      background-color: #ffffff;
      color: #666666;
    }
  }
  *::-webkit-scrollbar {
    display: none;
  }
  ::v-deep {
    .ant-calendar-picker-input,
    .ant-time-picker-input {
      background-color: #0b293a;
      border: solid 1px #1d5777;
      color: #ffffff;
    }
  }
  .ant-calendar-picker {
    color: #ffffff;
    margin: 5px 0;
  }
  .ant-time-picker {
    margin: 5px 0;
  }
  .ant-calendar-picker::v-deep {
    .anticon {
      color: #ffffff;
    }
  }
  .ant-calendar-picker:hover::v-deep {
    .anticon {
      background-color: transparent;
    }
  }
  .ant-time-picker::v-deep {
    .anticon {
      color: #ffffff;
    }
  }
  .ant-time-picker:hover::v-deep {
    .anticon {
      background-color: transparent;
    }
  }
  .ant-input {
    background-color: #0b293a;
    border: solid 1px #1d5777;
    color: #ffffff;
  }
}

.io-event-list {
  width: 100%;
  height: 100%;
  background-color: #082532;
  padding: 20px;
  overflow-y: scroll;
  .io-event-item {
    padding: 10px 0;
    font-size: 16px;
    line-height: 22px;
    color: #a1c2d0;
  }
}

.ant-btn + .ant-btn {
  margin-left: 8px;
}
</style>
