<!--
 * @Descripttion: 
 * @version: 
 * @Author: ysh
 * @Date: 2023-07-03 16:57:40
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-07-18 13:50:37
-->
<template>
  <div class="dialog_content">
    <div class="header">
      <h3>变换参数</h3>
      <div class="close" @click="close">×</div>
    </div>
    <div v-if="tagShow" style="text-align: center;">
      <el-tag type="warning">请选择要移动的模型</el-tag>
    </div>
    <div class="content">
      <el-row class="content-item">
        <el-col :span="10">模型：</el-col>
        <el-col :span="10"><a-button size="small" @click="add3DtilesetHandler">选择</a-button></el-col>
      </el-row>
      <el-row class="content-item">
        <el-col :span="10">X轴：</el-col>
        <el-col :span="8">
          <a-input-number :disabled="tagShow" v-model:value="params.tx" size="small" :step="0.0001"
            @change="changeNumber" />
        </el-col>
      </el-row>
      <el-row class="content-item">
        <el-col :span="10">Y轴：</el-col><el-col :span="8"><a-input-number :disabled="tagShow" v-model:value="params.ty"
            size="small" :step="0.0001" @change="changeNumber" /></el-col>
      </el-row>
      <el-row class="content-item">
        <el-col :span="10">z轴：</el-col><el-col :span="8"><a-input-number :disabled="tagShow" v-model:value="params.tz"
            size="small" :step="10" @change="changeNumber" /></el-col>
      </el-row>
      <el-row class="content-item">
        <el-col :span="10">旋转X轴：</el-col><el-col :span="8"><a-input-number :disabled="tagShow" v-model:value="params.rx"
            size="small" :max="180" :min="-180" :step="1" @change="changeNumber" /></el-col>
      </el-row>
      <el-row class="content-item">
        <el-col :span="10">旋转Y轴：</el-col><el-col :span="8"><a-input-number :disabled="tagShow" v-model:value="params.ry"
            size="small" :max="180" :min="-180" :step="1" @change="changeNumber" /></el-col>
      </el-row>
      <el-row class="content-item">
        <el-col :span="10">旋转Z轴：</el-col><el-col :span="8"><a-input-number :disabled="tagShow" v-model:value="params.rz"
            size="small" :max="180" :min="-180" :step="1" @change="changeNumber" /></el-col>
      </el-row>
      <el-row class="content-item">
        <el-col :span="10">缩放：</el-col><el-col :span="8"><a-input-number :disabled="tagShow" v-model:value="params.scale"
            size="small" :step="1" @change="changeNumber" /></el-col>
      </el-row>
      <el-row class="content-item" justify="center">
        <a-button type="primary" @click="zoomToModel" :disabled="tagShow">定位模型</a-button>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, getCurrentInstance } from 'vue';
import useMapStore from '@/store/modules/maps';
const { proxy } = getCurrentInstance();
watch(() => useMapStore().$state.tilesetObj, (newValue, oldValue) => {
  getModel(newValue);
  tagShow.value = false;
  console.log(handler.value);
  removeHandler();
  console.log(handler.value);

})
const tagShow = ref(true);
const handler = ref(null);
const params = reactive({
  tx: 0,
  ty: 0,
  tz: 0,
  rx: 0,
  ry: 0,
  rz: 0,
  scale: 1
})
let cesium = useMapStore().$state.cesium;
let viewer = useMapStore().$state.viewer;
function inits() {
  let cesium = useMapStore().$state.cesium;
  if (useMapStore().$state.tilesetObj instanceof cesium.Cesium3DTileset) {
    tagShow.value = false;
    getModel(useMapStore().$state.tilesetObj);
  }
}

function getModel(model) {
  let ce = useMapStore().$state.cesium;
  let vi = useMapStore().$state.viewer;
  let center = model.boundingSphere.center;
  let ellipsoid = vi.scene.globe.ellipsoid;
  let cartographic = ellipsoid.cartesianToCartographic(center);
  let longtitude = ce.Math.toDegrees(cartographic.longitude).toFixed(5);
  let latitude = ce.Math.toDegrees(cartographic.latitude).toFixed(5);
  let height = cartographic.height.toFixed(3);
  params.tx = Number(longtitude);
  params.ty = Number(latitude);
  params.tz = Number(height);
}
// 变换3Dtileset
function update3dtilesMaxtrix(tileset) {
  //旋转
  let ce = useMapStore().$state.cesium;
  let mx = ce.Matrix3.fromRotationX(ce.Math.toRadians(params.rx));
  let my = ce.Matrix3.fromRotationY(ce.Math.toRadians(params.ry));
  let mz = ce.Matrix3.fromRotationZ(ce.Math.toRadians(params.rz));
  let rotationX = ce.Matrix4.fromRotationTranslation(mx);
  let rotationY = ce.Matrix4.fromRotationTranslation(my);
  let rotationZ = ce.Matrix4.fromRotationTranslation(mz);
  //平移
  let position = ce.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
  let m = ce.Transforms.eastNorthUpToFixedFrame(position);
  let scale = ce.Matrix4.fromUniformScale(params.scale);
  //缩放
  ce.Matrix4.multiply(m, scale, m);
  //旋转、平移矩阵相乘
  ce.Matrix4.multiply(m, rotationX, m);
  ce.Matrix4.multiply(m, rotationY, m);
  ce.Matrix4.multiply(m, rotationZ, m);
  //赋值给tileset
  if (tileset instanceof cesium.Cesium3DTileset) {
    console.log(tileset._root.transform)
    tileset._root.transform = m;
  }

  if (tileset instanceof cesium.Model) {
    for (let p of viewer.scene.primitives._primitives) {
      if (p instanceof cesium.Model && p._resource.url == tileset._resource.url) {
        viewer.scene.primitives.remove(p)
      }
    }
    viewer.scene.primitives.add(
      cesium.Model.fromGltf({ url: tileset._resource.url, modelMatrix: m })
    )
  }
}
function changeNumber() {
  let tileset = useMapStore().$state.tilesetObj;
  update3dtilesMaxtrix(tileset)
}

function add3DtilesetHandler() {

  handler.value = new cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.value.setInputAction(function (e) {
    const pick = viewer.scene.pick(e.position);
    if (!cesium.defined(pick)) { viewer.scene.screenSpaceCameraController.enableRotate = true; return; };// 如果点击空白区域，则不往下执行
    if (pick.primitive) {
      useMapStore().setTilesetObj(pick.primitive);
    } else {
      return
    }
  }, cesium.ScreenSpaceEventType.LEFT_DOWN);
}
function removeHandler() {
  handler.value.removeInputAction(cesium.ScreenSpaceEventType.LEFT_DOWN);
}
function zoomToModel() {
  viewer.flyTo(useMapStore().$state.tilesetObj, new cesium.HeadingPitchRange(
    0.0,
    -0.5
  ));
}
function close() {
  if (handler.value) {
    removeHandler();
  }
  proxy.$emit('close');
}
inits();
</script>

<style scoped lang="scss">
.dialog_content {
  cursor: default;
}

.header {
  text-align: center;
  position: relative;

  h3 {
    color: #fff;
    line-height: 30px;
  }

  .close {
    position: absolute;
    right: 10px;
    top: -5px;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
  }

  .close:hover {
    color: #ff9a00;
  }
}

.content {
  color: #fff;
  padding: 10px;

  .content-item {
    margin-bottom: 10px;
  }
}
</style>