<template>
  <div>
    <div class="bottomBg">
      <div class="item1F" @click="toggle1">1F</div>
      <div class="item2F" @click="toggle2">2F</div>
      <div class="item3F" @click="toggle3">3F</div>
      <div class="item4F" @click="toggle4">4F</div>
      <div class="item5F" @click="toggle5">5F</div>
    </div>
    <div ref="threeJs" class="app-container">
    </div>
    <div ref="modelInfo" class="model" style="display: inline-block">
      <Demo ref="modelInfoData"/>
    </div>
    <div ref="modelInfo1" class="model">
      <Demo ref="modelInfo1Data"/>
    </div>
    <div ref="modelInfo2" class="model">
      <Demo ref="modelInfo2Data"/>
    </div>
    <div ref="modelInfo3" class="model">
      <Demo ref="modelInfo3Data"/>
    </div>
    <div ref="modelInfo4" class="model">
      <Demo ref="modelInfo4Data"/>
    </div>
    <div style="position:absolute;top: 0;left: 0;">
      <el-input-number v-model="num" @change="handleChange" :step="0.1" label="描述文字"></el-input-number>
      <el-select v-model="floor" placeholder="去几楼" @change="toFloor">
        <el-option
          label="1楼"
          :value="1"
        >
        </el-option>
        <el-option
          label="2楼"
          :value="2"
        >
        </el-option>
        <el-option
          label="3楼"
          :value="3"
        >
        </el-option>
        <el-option
          label="4楼"
          :value="4"
        >
        </el-option>
        <el-option
          label="5楼"
          :value="5"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="tuopanReset">托盘复位</el-button>
      <el-button type="primary" @click="tuopanOut">托盘推出</el-button>
      <el-button type="primary" @click="removetuopan">删除托盘</el-button>
      <el-button type="primary" @click="toggle">显示/隐藏</el-button>
      <el-select v-model="tuopanFloor" placeholder="去几楼">
        <el-option
          label="1楼"
          :value="1"
        >
        </el-option>
        <el-option
          label="2楼"
          :value="2"
        >
        </el-option>
        <el-option
          label="3楼"
          :value="3"
        >
        </el-option>
        <el-option
          label="4楼"
          :value="4"
        >
        </el-option>
        <el-option
          label="5楼"
          :value="5"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="addtuopan">添加托盘</el-button>
      <el-select v-model="fx" placeholder="方向">
        <el-option
          label="x"
          value="x"
        >
        </el-option>
        <el-option
          label="z"
          value="z"
        >
        </el-option>
      </el-select>
      <el-input-number v-model="num1" :step="0.1" label="描述文字"></el-input-number>
      <el-button type="primary" @click="agvAn">移动agv</el-button>
    </div>
  </div>
</template>

<script>

import * as THREE from 'three'
import * as TWEEN from '@tweenjs/tween.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
import Demo from '@/components/model/demo.vue'
import { getAgvDeviceStatus } from '@/api/board/model'

import {
  tuopanInishengji,
  tishengjiAnimation,
  tuopanXAnimation,
  tuopanYAnimation,
  addtuopan
} from './animation'

import {
  keyidongModel,
  tuopanModel,
  scene,
  camera,
  renderer,
  loadF1,
  loadF2,
  loadF3,
  loadF4,
  loadF5,
  storeyHeight,
  storeyWidth,
  tuopanLocation,
  animationLine, isLoading,
  floor1Model,
  floor2Model,
  floor3Model,
  floor4Model,
  floor5Model, loadFOther, otherModel
} from './setThree'

import {
  AGVAnimation, agvData, floorOrigin, floorData1, isAGVLoading, agvLabel, loadAGV
} from './agv'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Model',
  components: { Demo },
  data() {
    return {
      num: -60,
      num1: 90,
      floor: 1,
      tuopanFloor: 1,
      fx: '',
      rotate: 0
    }
  },
  mounted() {
    setInterval(() => {
      if (isLoading && isAGVLoading) {
        getAgvDeviceStatus().then(e => {
          this.modelData = e.data
          e.data.agvStatusList.forEach(v => {
            if (v.agvName === '2楼叉车') {
              this.$refs.modelInfoData.setData(v)
              let x = (v.posX - floorOrigin.floor2Data.x) / floorData1.floor2Data.x
              let z = (v.posY - floorOrigin.floor2Data.y) / floorData1.floor2Data.z
              AGVAnimation('2AGV', '2AGV', 'xz', { x: x * 100, z: z * 100 })
            }
            if (v.agvName === '3楼叉车') {
              this.$refs.modelInfo1Data.setData(v)
              let x = (v.posX - floorOrigin.floor3Data.x) / floorData1.floor3Data.x
              let z = (v.posY - floorOrigin.floor3Data.y) / floorData1.floor3Data.z
              AGVAnimation('3AGV', '3AGV', 'xz', { x: x * 100, z: z * 100 })
            }
            if (v.agvName === '5楼叉车') {
              this.$refs.modelInfo2Data.setData(v)
              let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
              let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
              AGVAnimation('5CCAGV', '5CCAGV', 'xz', { x: x * 100, z: z * 100 })
            }
            if (v.agvName === '5楼背负式') {
              this.$refs.modelInfo3Data.setData(v)
              let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
              let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
              AGVAnimation('5BFAGV', '5BFAGV', 'xz', { x: x * 100, z: z * 100 })
            }
            if (v.agvName === '5楼CTU') {
              this.$refs.modelInfo4Data.setData(v)
              let x = (v.posX - floorOrigin.floor5Data.x) / floorData1.floor5Data.x
              let z = (v.posY - floorOrigin.floor5Data.y) / floorData1.floor5Data.z
              AGVAnimation('5CTU', '5CTU', 'x', { x: x * 100, z: z * 100 })
            }
          })
          let deviseInfo = []
          e.data.realtimeStatusList.forEach(v => {
            if (deviseInfo.map(vv => vv.deviceId).includes(v.deviceId)) {
              deviseInfo[deviseInfo.indexOf(deviseInfo.find(vv => vv.deviceId === v.deviceId))].info.push({
                name: v.statusName,
                value: v.statusValue,
                id: v.statusId,
                code: v.statusCode
              })
            } else {
              deviseInfo.push({
                deviceId: v.deviceId,
                deviceName: v.deviceName,
                info: [
                  {
                    name: v.statusName,
                    value: v.statusValue,
                    id: v.statusId,
                    code: v.statusCode
                  }
                ]
              })
            }
          })
          console.log(deviseInfo)
        })
      }
    }, 2500)
    this.$refs.threeJs.appendChild(renderer.domElement)

    // controls.rotateSpeed = -controls.rotateSpeed;
    // controls.enableZoom = false

    // loadF([ 'tishengji_tuopan'])
    // loadF1([ 'changfang005', 'liku005', 'quanzidongchaibaojizhaungpeixian003', 'tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan', 'Uxingxian'])
    // loadF2(['2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'AGVchongdianzhuang002', 'AGVchongdianzhuang003', 'AGVchongdianzhuang005','changfang002', 'changfang003',])

    loadF1([])
    loadF2(['AGVchongdianzhuang002', 'changfang002'])
    loadF3(['AGVchongdianzhuang003', 'changfang003', 'quanzidongchaibaojizhaungpeixian003'])
    loadF4([])
    loadF5(['AGVchongdianzhuang005', '2-1AGVchongdianzhuang005', '2-2AGVchongdianzhuang005', 'changfang005', 'liku005', 'Uxingxian'])
    loadFOther(['tishengji', 'tishengji_keyidongbufen', 'tishengji_tuopan'])
    // loadF(['changfang002', 'changfang003', 'changfang005'])

// 创建CSS2DObject
    agvLabel['2AGV'] = new CSS2DObject(this.$refs.modelInfo)
    agvLabel['3AGV'] = new CSS2DObject(this.$refs.modelInfo1)
    agvLabel['5CCAGV'] = new CSS2DObject(this.$refs.modelInfo2)
    agvLabel['5BFAGV'] = new CSS2DObject(this.$refs.modelInfo3)
    agvLabel['5CTU'] = new CSS2DObject(this.$refs.modelInfo4)

    loadAGV(['chacheshiAGV002', 'chacheshiAGV003', 'chacheshiAGV005', 'beifushiAGV005', 'CTU005'])

    // setInterval(()=>{
    //   labelObject2AGV.position.x +=0.1
    //   labelObject2AGV.position.y +=0.1
    //   labelObject2AGV.position.z +=0.1
    // },40)

// 渲染循环

  },
  methods: {
    handleChange() {
      AGVAnimation('5CTU', '5CTU', 'x', this.num)
      // tuopanModel.position.x = this.num
    },
    toFloor(e) {
      animationLine.push(() => {
        if (tuopanInishengji) {
          return Promise.all([tishengjiAnimation(keyidongModel, e, storeyHeight[e]), tuopanYAnimation(tuopanModel, e, storeyHeight[e])])
        } else {
          animationLine.push(() => tishengjiAnimation(keyidongModel, e, storeyHeight[e]))
        }
      })
    },
    tuopanReset() {
      animationLine.push(() => tuopanXAnimation(tuopanModel, 0))
    },
    tuopanOut() {
      animationLine.push(() => tuopanXAnimation(tuopanModel, storeyWidth[tuopanLocation.floor]))
    },
    removetuopan() {
      scene.remove(tuopanModel)
      tuopanModel = null
    },
    async addtuopan() {
      scene.remove(tuopanModel)
      tuopanModel = null
      tuopanModel = await addtuopan({ scene })
      scene.add(tuopanModel)
      tuopanModel.position.x = storeyWidth[this.tuopanFloor]
      tuopanModel.position.y = storeyHeight[this.tuopanFloor]
      tuopanLocation.floor = this.tuopanFloor
      tuopanLocation.y = storeyHeight[this.tuopanFloor]
      tuopanLocation.x = storeyWidth[this.tuopanFloor]
    },
    agvAn() {
      this.rotate -= this.num1
      AGVAnimation('3AGV', 'rotate', this.rotate)
    },
    toggle() {
      console.log(agvData)
      floor1Model.visible = true
      floor2Model.visible = true
      floor3Model.visible = true
      floor4Model.visible = true
      floor5Model.visible = true
      otherModel.visible = true
      agvData.floor2AGVGroup.visible = true
      agvData.floor3AGVGroup.visible = true
      agvData.floor5BFAGVGroup.visible = true
      agvData.floor5CCAGVGroup.visible = true
      agvData.floor5CTUGroup.visible = true
      this.$refs.modelInfoData.$el.style.display = 'inline-block'
      this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
      this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
      this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
      this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
    },
    toggle1() {
      floor1Model.visible = true
      floor2Model.visible = false
      floor3Model.visible = false
      floor4Model.visible = false
      floor5Model.visible = false
      otherModel.visible = false
      this.$refs.modelInfoData.$el.style.display = 'none'
      this.$refs.modelInfo1Data.$el.style.display = 'none'
      this.$refs.modelInfo2Data.$el.style.display = 'none'
      this.$refs.modelInfo3Data.$el.style.display = 'none'
      this.$refs.modelInfo4Data.$el.style.display = 'none'
      agvData.floor2AGVGroup.visible = false
      agvData.floor3AGVGroup.visible = false
      agvData.floor5BFAGVGroup.visible = false
      agvData.floor5CCAGVGroup.visible = false
      agvData.floor5CTUGroup.visible = false
    },
    toggle2() {
      floor1Model.visible = false
      floor2Model.visible = true
      floor3Model.visible = false
      floor4Model.visible = false
      floor5Model.visible = false
      otherModel.visible = false
      agvData.floor2AGVGroup.visible = true
      agvData.floor3AGVGroup.visible = false
      agvData.floor5BFAGVGroup.visible = false
      agvData.floor5CCAGVGroup.visible = false
      agvData.floor5CTUGroup.visible = false
      this.$refs.modelInfoData.$el.style.display = 'inline-block'
      this.$refs.modelInfo1Data.$el.style.display = 'none'
      this.$refs.modelInfo2Data.$el.style.display = 'none'
      this.$refs.modelInfo3Data.$el.style.display = 'none'
      this.$refs.modelInfo4Data.$el.style.display = 'none'
    },
    toggle3() {
      floor1Model.visible = false
      floor2Model.visible = false
      floor3Model.visible = true
      floor4Model.visible = false
      floor5Model.visible = false
      otherModel.visible = false
      agvData.floor2AGVGroup.visible = false
      agvData.floor3AGVGroup.visible = true
      agvData.floor5BFAGVGroup.visible = false
      agvData.floor5CCAGVGroup.visible = false
      agvData.floor5CTUGroup.visible = false
      this.$refs.modelInfoData.$el.style.display = 'none'
      this.$refs.modelInfo1Data.$el.style.display = 'inline-block'
      this.$refs.modelInfo2Data.$el.style.display = 'none'
      this.$refs.modelInfo3Data.$el.style.display = 'none'
      this.$refs.modelInfo4Data.$el.style.display = 'none'
    },
    toggle4() {
      floor1Model.visible = false
      floor2Model.visible = false
      floor3Model.visible = false
      floor4Model.visible = true
      floor5Model.visible = false
      otherModel.visible = false
      this.$refs.modelInfoData.$el.style.display = 'none'
      this.$refs.modelInfo1Data.$el.style.display = 'none'
      this.$refs.modelInfo2Data.$el.style.display = 'none'
      this.$refs.modelInfo3Data.$el.style.display = 'none'
      this.$refs.modelInfo4Data.$el.style.display = 'none'
      agvData.floor2AGVGroup.visible = false
      agvData.floor3AGVGroup.visible = false
      agvData.floor5BFAGVGroup.visible = false
      agvData.floor5CCAGVGroup.visible = false
      agvData.floor5CTUGroup.visible = false
    },
    toggle5() {
      floor1Model.visible = false
      floor2Model.visible = false
      floor3Model.visible = false
      floor4Model.visible = false
      floor5Model.visible = true
      otherModel.visible = false
      this.$refs.modelInfoData.$el.style.display = 'none'
      this.$refs.modelInfo1Data.$el.style.display = 'none'
      this.$refs.modelInfo2Data.$el.style.display = 'inline-block'
      this.$refs.modelInfo3Data.$el.style.display = 'inline-block'
      this.$refs.modelInfo4Data.$el.style.display = 'inline-block'
      agvData.floor2AGVGroup.visible = false
      agvData.floor3AGVGroup.visible = false
      agvData.floor5BFAGVGroup.visible = true
      agvData.floor5CCAGVGroup.visible = true
      agvData.floor5CTUGroup.visible = true
    }
  }
}
</script>
<style lang="less" scoped>
.app-container {
  padding: 0;
}

.model {
  position: relative;
}

.bottomBg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 2.656vw;
  background-image: url("~@/assets/model/bottomBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .item1F, .item2F, .item3F, .item4F, .item5F {
    position: absolute;
    top: 45%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 4.6vw;
    height: 1.32vw;
    line-height: 1.32vw;
    text-align: center;
    color: #fff;
  }

  .item1F {
    left: 39%;
    background-image: url("~@/assets/model/unselected.png");
  }

  .item2F {
    left: 44.5%;
    background-image: url("~@/assets/model/unselected.png");
  }

  .item3F {
    left: 50%;
    background-image: url("~@/assets/model/unselected.png");
  }

  .item4F {
    left: 55.5%;
    background-image: url("~@/assets/model/unselected.png");
  }

  .item5F {
    left: 61%;
    background-image: url("~@/assets/model/unselected.png");
  }
}
</style>
