<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;">
    <a-spin :spinning="loading" />
    <div id="damper3D"  v-show="!loading" style="width: 100%; height: 100%;; position: absolute; overflow: hidden;"> </div>
    <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
      <div>
        <div ref="elementContent" class="elementContent">
          <p><span class="data-title">压力(Pa)：</span>{{monitorData.pressure}}</p>
          <p><span class="data-title">动力源压力(MPa)：</span>{{monitorData.powerPressure}}</p>
          <p><span class="data-title">故障诊断：</span>
            <i
              :class="{'state-icon': true, 'open': monitorData.messageBoxStatus, 'close': !monitorData.messageBoxStatus}"
            ></i>{{monitorData.fault}}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="scene-box">
    <div class="top-box">
      <div class="top-left row">
        2-3煤辅运大巷水仓自动风门远程控制
      </div>
      <div class="top-center row">
          <div class="button-box">打开前门</div>
          <div class="button-box">关闭前门</div>
          <div class="button-box">打开后门</div>
          <div class="button-box">关闭后门</div>
          <div class="button-box">打开前后门</div>
          <div class="button-box">关闭前后门</div>
          <div class="button-box" @click="enterMY">漫游</div>
        </div>
      <div class="top-right row">
        <div class="control-type row">
          <div class="control-title">控制模式：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">就地</a-radio>
            <a-radio :value="2">远程</a-radio>
          </a-radio-group>
        </div>
        <div class="run-type row">
          <div class="control-title">运行状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">检修</a-radio>
          </a-radio-group>
        </div>
        <div class="run-state row">
          <div class="control-title">网络状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">运行</a-radio>
          </a-radio-group>
        </div>
      </div>
      
    </div>
    <div class="tabs-box">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="实时监测">
            <MonitorTable class="monitor-table" columnsType="gate_monitor" :dataSource="dataSource" design-scope="gate-monitor" title="风门监测" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="实时曲线图" force-render>
          <div class="tab-item" v-if="activeKey === '2'">
            <Bar
              :chartData="dataSource"
              xAxisPropType="strname"
              seriesPropType="sourcePressure"
              height="200px"
              :option="option"
            />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="历史数据">
          <div class="tab-item">
            Content of Tab Pane 2
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="操作历史">
          <div class="tab-item">
            Content of Tab Pane 2
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="实时报警">
          <div class="tab-item">
            Content of Tab Pane 2
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
  
</template>

<script setup lang="ts">
  import '/@/assets/less/modal.less';
  import {onBeforeMount, computed, onUnmounted, onMounted, ref, Ref, reactive } from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import { initWebSocket, getRecordList } from '/@/hooks/web/useVentWebSocket';
  import gsap from 'gsap';
  import UseThree from '/@/hooks/core/useThree';
  import * as THREE from 'three';
  import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer'
     
  const elementContent = <Ref<HTMLElement>>ref()
  const activeKey = ref('1')
  const loading = ref(false);

  // 模型对象、 文字对象
  let model, fm1CSS3D, fm2CSS3D;
  
  // 监测数据
  const monitorData = reactive({
    pressure: 25,
    powerPressure: 30,
    fault: '起源压力超限'
  })

  //  实时监测数据
  const dataSource = computed(() => {
    return [...getRecordList()].reverse() || [];
  });

  // echarts 图标样式
  const option = {
    grid: {
      left: 60,
      right: 50,
      bottom: 20,
    },
    yAxis: {
      name: '气源压力(Pa)',
      nameTextStyle: {
        color: '#fff',
        fontSize: 14,
      },
    },
  }
  // 设备数据
  const controlType = ref(1)
  
  // 打灯光
  const addLight = (scene) => {


      const pointLight2 = new THREE.PointLight( 0xffeeee, 0.9, 30 );
      pointLight2.position.set(-2, 18.8, 10)
      // light2.castShadow = true
      pointLight2.shadow.bias = 0.05
      scene.add(pointLight2)
      // const pointLightHelper2 = new THREE.PointLightHelper( pointLight2, 1 );
      // scene.add( pointLightHelper2 );
   
      pointLight2.shadow.mapSize.width = 10; // default
      pointLight2.shadow.mapSize.height = 10; // default
      pointLight2.shadow.camera.near = -0.0000001; // default
      pointLight2.shadow.camera.far = 20; // default

      const pointLight3 = new THREE.PointLight( 0xffffff, 2, 100 );
      pointLight3.position.set(-145, 7, 42)
      // light2.castShadow = true
      pointLight3.shadow.bias = 0.05
      scene.add(pointLight3)
      // const pointLightHelper = new THREE.PointLightHelper( pointLight3, 1 );
      // scene.add( pointLightHelper );
    

      const pointLight4 = new THREE.PointLight( 0xffeeee, 0.6, 100 );
      pointLight4.position.set(-42, 8, 25.3)
      // light2.castShadow = true
      pointLight4.shadow.bias = 0.05
      scene.add(pointLight4)
      // const pointLightHelper4 = new THREE.PointLightHelper( pointLight4, 1 );
      // scene.add( pointLightHelper4 );

      const pointLight5 = new THREE.PointLight( 0xffffff, 0.8, 100 );
      pointLight5.position.set(67, 49, -3)
      // light2.castShadow = true
      pointLight5.shadow.bias = 0.05
      scene.add(pointLight5)
      // const pointLightHelper5 = new THREE.PointLightHelper( pointLight5, 1 );
      // scene.add( pointLightHelper5 );

      const pointLight6 = new THREE.PointLight( 0xffdddd, 0.8, 100 );
      pointLight6.position.set(36, 57, 0)
      // light2.castShadow = true
      pointLight6.shadow.bias = 0.05
      scene.add(pointLight6)
      // const pointLightHelper6 = new THREE.PointLightHelper( pointLight6, 1 );
      // scene.add( pointLightHelper6 );

      const pointLight7 = new THREE.PointLight( 0xff9999, 0.8, 100 );
      pointLight7.position.set(-87, 36.6, 3)
      // light2.castShadow = true
      pointLight7.shadow.bias = 0.05
      scene.add(pointLight7)
      // const pointLightHelper7 = new THREE.PointLightHelper( pointLight7, 1 );
      // scene.add( pointLightHelper7 );


      const spotLight = new THREE.SpotLight();
      spotLight.angle = Math.PI / 16;
      spotLight.penumbra = 0;
      spotLight.castShadow = true;
      spotLight.intensity = 2
      spotLight.position.set( -224, 492, 687 );
      scene.add( spotLight );

      spotLight.shadow.mapSize.width = 2000;  // default
      spotLight.shadow.mapSize.height = 1000; // default
      spotLight.shadow.camera.near = 0.5;    // default
      spotLight.shadow.camera.far = 1500      // default
      spotLight.shadow.focus = 1; 
      spotLight.shadow.bias = -0.000002

     
  }

  // 重置摄像头
  const resetCamera = () => {
    model.camera.position.set(30.328, 58.993, 148.315)
    model.camera.rotation.set(-27.88, 14.35, 7.47)
    model.orbitControls.update()
    model.camera.updateProjectionMatrix();
  }
  // 设置模型位置
  const setModalPosition = (group) => {
    group.position.set(-35, 20, 9)
    console.log(group);
  }
  // 文字
  const addFm1Text = () => {
    const element = document.createElement('div')
    element.className = 'elementTag'
    element.innerHTML = `
    <div class="elementContent">
      <p>压力：26</p>
      <p>排气温度：50%</p>
    </div>
  `
    fm1CSS3D = new CSS3DObject(element)
    fm1CSS3D.scale.set(0.11, 0.11, 0.11)
    fm1CSS3D.position.set( -45, 50, 10)
    fm1CSS3D.lookAt(model.camera.position.clone())
    // model?.scene.add(fm1CSS3D)

  //   const element1 = document.createElement('div')
  //   element1.className = 'elementTag'
  //   element1.innerHTML = `
  //   <div class="elementContent">
  //     <p>压力(Pa)：26</p>
  //     <p>动力源压力(MPa)：100KPa</p>
  //     <p>故障诊断：起源压力超限</p>
  //   </div>
  // `
    
    fm2CSS3D = new CSS3DObject(elementContent.value)
    fm2CSS3D.scale.set(0.12, 0.12, 0.12)
    fm2CSS3D.position.set( 0, 45, 0)
    fm2CSS3D.lookAt(model.camera.position.clone())
    model?.scene.add(fm2CSS3D)
  }
  // 路线
  const createLine = ()=>{
    const position = model.camera.position.clone()
		//创建样条曲线，作为运动轨迹
		const curve = new THREE.CatmullRomCurve3([
      new THREE.Vector3(position.x, position.y, position.z),
      new THREE.Vector3(26.586, 17.860, 14.144),
      new THREE.Vector3(-0.075, 15.669, 15.051),
      new THREE.Vector3(-154.882, 17.462, 14.981),
      // new THREE.Vector3(76, 28, 27),
    ])
    const geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(5000))
    // 材质对象
    var material = new THREE.LineBasicMaterial({
      color: 'red'
    })
    // 线条模型对象
    var line = new THREE.Line(geometry, material)
    // model?.scene.add(line) // 线条对象添加到场景中
    return curve
	}
  // 漫游
  const enterMY = () => {
    model.camera.position.set(114.270, 15.293, 14.189)
    model.camera.rotation.set(-86.23, 69.89, 85.98)
    const curve = createLine()
    let progress = 0
    model.startMY = () => {
      if (progress <= 1 - 0.004 * 20){
        const point = curve.getPointAt(progress) //获取样条曲线指定点坐标，作为相机的位置
        const pointBox = curve.getPointAt(progress + 0.004 * 20) //获取样条曲线指定点坐标
        model.camera.position.set(point.x, point.y, point.z)
        model.camera.lookAt(pointBox.x + 5, pointBox.y, pointBox.z)
        model.orbitControls.position0.set(point.x, point.y, point.z) //非必要，场景有控件时才加上
        model.orbitControls.target.set(pointBox.x, pointBox.y , pointBox.z) //非必要，场景有控件时才加上
        progress += 0.004
        console.log(progress);
      } else {
        // progress = 0
        model.camera.position.set(30.328, 58.993, 148.315)
        model.camera.rotation.set(-27.88, 14.35, 7.47)
        model.camera.lookAt(0,0,0)
        model.startMY = () => {}
      }
    }
    
  }
  
  onBeforeMount(() => {
    const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'gate', orgcode: '', ids: '', systemID: '' });
    initWebSocket(sendVal);
  });

  onMounted(() => {
    model = new UseThree('#damper3D', '#damper3DCSS');
    model.setEnvMap('test1');
    loading.value = true;
    model.setModel('fm-n-processed').then((group) => {
      addLight(model.scene)
      resetCamera();
      setModalPosition(group)
      addFm1Text()

      model.resetLookAt = () => {
        fm1CSS3D.lookAt(model?.camera?.position.clone())
        fm2CSS3D.lookAt(model?.camera?.position.clone())
      }
      loading.value = false;
      // 测试
      // setTimeout(() => {
      //   monitorData.pressure = 29
      // }, 1000)
    });
  });

  onUnmounted(() => {
    if(model){
      model.deleteModal()
    }
  })

</script>

<style  lang="less" scoped>
.scene-box{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-items: center;
    overflow: hidden;
    .top-box{
      position: absolute;
      top: 0;
      width: 100%;
      height: 50px;
      background-image: linear-gradient(to right, #046AD500, #006effe7, #046AD500);
      display: flex;
      align-items: center;
      pointer-events: auto;
      .row{
        color: #fff;
        display: flex;
      }
      .top-left{
        width: 400px;
        height: 100%;
        font-size: 16px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        background: url('/@/assets/images/vent/tj.png') no-repeat;
        background-position: center right;
        background-size: auto 100% ;
        cursor: pointer;
        padding-right: 80px;
      }
      .top-center{
        flex: 2.2;
        justify-content: space-around;
      }
      .top-right{
        flex: 1.8;
        justify-content: center;
        .run-type{  
          margin: 0 10px;
        }
        .control-title{
          color: rgb(0, 255, 242)
        }
      }
      .button-box{
        position: relative;
        padding: 5px;
        border:1px transparent solid;
        // background-clip: border-box;
        border-radius: 5px;
        margin-left: 8px;
        width: auto;
        height: 40px;
        border: 1px solid #65DBEA;     
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 15px;
        cursor:pointer;
        &:hover{
          background: linear-gradient( #3eb2ff55, #00c3ff55);
        }
        &::before {
          width: calc(100% - 6px);
          height: 32px;
          content: '';
          position: absolute;
          top: 3px;
          right: 0;
          left: 3px;
          bottom: 0;
          z-index: -1;
          border-radius: inherit; /*important*/
          background: linear-gradient( #014978, #3BF3FC);
        }
        &::after {
          width: calc(100% + 32px);
          height: 10px;
          content: '';
          position: absolute;
          top: 40px;
          right: 0;
          left: -16px;
          bottom: 0;
          z-index: -1;
          border-radius: inherit; /*important*/
          background: url('/@/assets/images/vent/short-light.png') no-repeat;
          background-position: center;
          background-size:100%;
          z-index: 999;
        } 
      }
    }
    .tabs-box{
      position: fixed;
      bottom: 0;
      height: 265px;
      pointer-events: auto;
      background-color: #ffffff11;
      backdrop-filter: blur(10px);
      .tab-item{
        height: 100%;
        color: #fff;
      }
    }
}
:deep(.jeecg-basic-table .ant-table-wrapper){
  background-color: #ffffff00;
}
:deep(.ant-tabs-bar){
  margin: 0;
}
:deep(.ant-table){
  background-color: #ffffff00 !important;
  color: #fff;
}
:deep(.ant-table-header){
  background-color:transparent;
  // height: 42px;
}
:deep(.ant-table-thead > tr > th){
  background-color:transparent;
  border: none;
}
:deep(.ant-table-body > tr > th){
  background-color:transparent;
  border: none;
}
:deep(.ant-table-body > tr > td){
  border: none;
}
:deep(.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body){
  background-color:#ffffff05;
  margin-top: 8px;
  &::-webkit-scrollbar {
    display: none;
  }
}

:deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title){
  padding: 0;
}
:deep(.jeecg-basic-table-row__striped td){
  background-color: transparent;
}
:deep(.ant-table-tbody > tr:hover.ant-table-row > td){
  background-color: #ffffff22;

}
:deep(.ant-table-tbody > tr:hover.ant-table-row > th){
  background-color: #ffffff22;
}
:deep(.ant-table-thead > tr:hover.ant-table-row > td){
  background-color: #ffffff22;
}
:deep(.ant-table-tbody > tr.ant-table-row-selected td){
  background-color: #ffffff22;
}
:deep(.ant-table-tbody > tr > td){
  border-color: #ffffff22;
}
:deep(.ant-table-thead > tr > th:hover){
  background-color: transparent !important;
}
:deep(.ant-table-thead > tr > th){
  color: #fff;
}
:deep(.ant-table-fixed-header .ant-table-scroll .ant-table-header){
  background: #ffffff44;
  position: relative;
  z-index: 999;
  padding: 4px 0 !important;
  &::-webkit-scrollbar {
    display: none;
  }
}
:deep(.ant-tabs-nav){
  color: #fff;
}
.ant-radio-group{
  color: #fff !important;
  .ant-radio-wrapper{
    color: #fff !important;
  }
  .ant-radio{
    color: #fff !important;
  }
}

.elementContent{
  background-color: rgb(20 143 221 / 68%);
  box-shadow: 0px 0px 12px rgb(0 128 255 / 75%);
  border: 1px solid rgb(127 177 255 / 75%);
  padding: 10px 20px 0px 20px;
  color: #efefef;
  p{
    line-height: 1rem;
  }
}

.state-icon {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 6px;
  margin-right: 6px;
}
.open {
  border: 2px solid #133a56;
  background: #4ecb73;
}
.close {
  border: 2px solid #ff1818;
  background: #ff8888;
  animation: close 1s infinite;
}
@keyframes close {
  0% {
    border: 2px solid #ff8888;
    background: #ff3538;
  }
  50% {
    border: 2px solid #ff0000;
    background: #c90000;
  }
  100% {
    border: 2px solid #ff8888;
    background: #ff3538;
  }
}
.data-title{
  color: #eee;
}

</style>
