<template>
  <Flex fd="co" class="page-scene">
    <Flex ai="c" jc="sb" class="page-scene-header">
      <span class="page-scene-title">场景编辑子系统</span>
      <span class="page-scene-title">推演想定【{{ roomName }}-{{ scenarioName }}】</span>
      <span class="page-scene-title">剩余 {{ roomInfo.remainTimeStr }}</span>
    </Flex>
    <Grid class="page-scene-main flex-1 oh" :columns="['320px', 1, '320px']" :rows="['30px', 1]" gap="0px">
      <div class="tool-wrapper" style="grid-area: 1 / 1 / 2 / 4"></div>
      <div
        ref="scene-cesium-container"
        class="scene-cesium-container"
        id="scene-cesium-container"
        style="grid-area: 2 / 1 / 3 / 4"
      ></div>
      <div class="pr zi1" style="grid-area: 2 / 1 / 3 / 2">
        <ModuleWrapper title="作战/保障力量" height="60%">
          <div class="normal" style="padding: 5px; overflow-y: auto">
            <a-tree
              class="simulation-tree"
              :treeData="zzbzllTreeData"
              :selectedKeys.sync="zzbzll.selectedKeys"
              :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
              @select="handleSelectZzbzll"
            >
            </a-tree>
          </div>
        </ModuleWrapper>
        <ModuleWrapper title="日志" height="40%">
          <div class="normal"></div>
        </ModuleWrapper>
      </div>
      <Grid class="pr zi1" :rows="rightRows" gap="0px" style="grid-area: 2 / 3 / 3 / 4">
        <ModuleWrapper title="兵力编组">
          <template #extra>
            <Zoom :max="rightViewer === 'blbz'" @zoom-max="rightViewer = 'blbz'" @zoom-min="rightViewer = ''" />
          </template>
          <div class="normal" style="padding: 5px; overflow-y: auto">
            <a-tree
              class="simulation-tree"
              :treeData="showBlbzCheckedTreeData"
              :selectable="false"
              :replaceFields="{ children: 'children', title: 'title', key: 'id' }"
            >
            </a-tree>
          </div>
        </ModuleWrapper>
        <ModuleWrapper title="基础属性">
          <template #extra>
            <Zoom :max="rightViewer === 'jcsx'" @zoom-max="rightViewer = 'jcsx'" @zoom-min="rightViewer = ''" />
          </template>
          <div class="normal" style="padding: 15px 0">
            <Jcsx
              ref="jcsx"
              v-if="zzbzllSelectedFd"
              :scenarioId="scenarioId"
              :resourceId="zzbzllSelectedFd.id"
              :resourceName="zzbzllSelectedFd.title"
              :resourceType="zzbzllSelectedFd.resourceType"
              :type="zzbzllSelectedFd.type"
              :modelData="jcsxModelData"
              :readonly="true"
            />
          </div>
        </ModuleWrapper>
        <ModuleWrapper :title="xdrw.resourceTypeMapTitle[zzbzllSelectedFd?.resourceType] || '行动任务'">
          <template #extra>
            <Zoom :max="rightViewer === 'xdrw'" @zoom-max="rightViewer = 'xdrw'" @zoom-min="rightViewer = ''" />
          </template>
          <div class="normal" style="padding: 0">
            <Zzxd
              ref="xdrw"
              v-if="zzbzllSelectedFd"
              :scenarioId="scenarioId"
              :resourceId="zzbzllSelectedFd.id"
              :resourceType="zzbzllSelectedFd.resourceType"
              :actionList="xdrwActionList"
              :readonly="true"
            />
          </div>
        </ModuleWrapper>
      </Grid>
    </Grid>
  </Flex>
</template>

<script>
import { getAction } from '@/api/manage'
import Zoom from './components/Zoom.vue'
import Jcsx from './components/Jcsx.vue'
import Zzxd from './components/Zzxd.vue'

export default {
  name: 'SubsystemScene',
  components: {
    Zoom,
    Jcsx,
    Zzxd,
  },
  data() {
    return {
      ws: null,
      roomInfo: {
        remainTimeStr: '',
        remainTime: '',
        duringTime: '',
        roomData: [],
      },
      roomId: '',
      roomName: '',
      scenarioId: '',
      scenarioName: '',
      cesium: null,
      zzbzll: {
        selectedKeys: [],
      },
      blbz: {
        treeData: [],
      },
      rightViewer: '',
      xdrw: {
        resourceTypeMapTitle: {
          5: '作战行动',
          6: '保障任务',
        },
      },
    }
  },
  computed: {
    zzbzllTreeData() {
      return []
    },
    zzbzllSelectedFd() {
      if (this.zzbzll.selectedKeys.length === 0) {
        return null
      }
      return null
    },
    rightRows() {
      switch (this.rightViewer) {
        case 'blbz':
          return [8, 1, 1]
        case 'jcsx':
          return [1, 8, 1]
        case 'xdrw':
          return [1, 1, 8]
        default:
          return [4, 3, 3]
      }
    },
    blbzShowKeys() {
      return []
    },
    showBlbzCheckedTreeData() {
      const target = []
      this.getTree(target, this.blbz.treeData, this.blbzShowKeys)
      return target
    },
    jcsxModelData() {
      return {}
    },
    xdrwActionList() {
      return []
    },
  },
  created() {
    this.roomId = this.$route.params.roomId
    this.roomName = this.$route.params.roomName
    this.scenarioId = this.$route.params.scenarioId
    this.scenarioName = this.$route.params.scenarioName
    this.getBlbzTreeData()
  },
  mounted() {
    this.cesium = new window.MyCesium('scene-cesium-container')
    this.initWebsocket()
    window.addEventListener('beforeunload', (e) => {
      this.closeWebsocket()
      return true
    })
  },
  methods: {
    getTree(target, treeData, showKeys) {
      treeData.forEach((item) => {
        const newChildren = []
        if (item.children && item.children.length > 0) {
          this.getTree(newChildren, item.children, showKeys)
        }
        if (newChildren.length > 0 || showKeys.includes(item.key)) {
          target.push({ ...item, children: newChildren })
        }
      })
    },

    initWebsocket() {
      this.ws = new window.MyWebsocket(`/ws/${this.scenarioId}/${this.roomId}`, (error, response) => {
        if (error) return this.$message.error(error.message)
        switch (response.cmdType) {
          case 'update_time':
            this.roomInfo.remainTimeStr = response.data.update_time_str
            this.roomInfo.remainTime = response.data.remain_time
            this.roomInfo.duringTime = response.data.during_time
            break
          case 'path_init':
            this.cesium.drawRouteByCoordinates(response.data.points)
            break
          case 'path_update':
            this.cesium.movePlotByCoordinates(response.data.resourceId, response.data.points)
            break
          case 'scenarioInfo':
            this.roomInfo.roomData = response.data
            // this.initPlots()
            break
          default:
            console.log(response.cmdType, JSON.parse(response.data))
            break
        }
      })
      this.ws.send({ cmdType: 'scenarioInfo' })
    },
    closeWebsocket() {
      this.ws && this.ws.close()
      this.ws = null
    },

    async getBlbzTreeData() {
      try {
        const res = await getAction('/tree/organization')
        this.blbz.treeData = res.data
      } catch (error) {
        console.log(error)
      }
    },

    initPlots(plots) {
      plots.forEach((item) => {
        if (item.lng && item.lat) {
          this.cesium.addPlotByLonLat(item.imgBase64, { lon: +item.lng, lat: +item.lat }, item.id)
        }
      })
    },

    handleSelectZzbzll(selectedKeys, { node }) {
      this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
    },
  },
}
</script>

<style lang="less" scoped>
.page-scene {
  height: 100%;
  color: #ffffff;
  .page-scene-header {
    height: 50px;
    background-color: #0a2a3d;
    padding: 0 20px;
    .page-scene-title {
      color: #00d5fe;
      font-size: 18px;
      font-weight: bolder;
      letter-spacing: 2px;
    }
  }
  .page-scene-main {
    background-color: #022234;
  }
}
.scene-cesium-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
::v-deep {
  .distance-legend {
    left: 320px;
  }
  .compass {
    right: 320px;
  }
  .navigation-controls {
    right: 350px;
  }
}
.simulation-tree::v-deep {
  color: #a1c2d0;
  li .ant-tree-node-content-wrapper {
    color: #a1c2d0;
  }
  li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #bae7ff44;
  }
  li .ant-tree-node-content-wrapper:hover {
    background-color: #bae7ff22;
  }
}
</style>
