<template>
  <div class="dialog_content">
    <div class="header">
      <h3>参数设置</h3>
      <div class="close" @click="$emit('close')">×</div>
    </div>
    <div class="content">
      <el-row class="content-item">
        <el-col :span="10">闸门编号:</el-col>
        <el-col :span="14">
          <el-checkbox-group v-model="checkboxGroup" size="small" @change="onChangeGate">
            <el-checkbox id label="1#" border></el-checkbox>
            <el-checkbox label="2#" border></el-checkbox>
            <el-checkbox label="3#" border></el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>

      <el-row class="content-item">
        <a-button @click="discharge()">开始泄洪</a-button>
        <a-button @click="stop()" style="margin-left: 15px;">停止</a-button>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, getCurrentInstance } from 'vue';
import shp from 'shpjs/dist/shp';
import useMapStore from '@/store/modules/maps';
import { forEachCorner } from 'ol/extent';
const checkboxGroup = ref([]);
let viewer = useMapStore().$state.viewer;
let cesium = useMapStore().$state.cesium;
//泄洪
function discharge() {
  addWaterGate();
};
// 添加水柱
function addWaterGate() {
  viewer.shouldAnimate = true;
  viewer.clock.shouldAnimate = true;
  // 阀门位置
  const posArr = [
    { x: 91.876299, y: 29.968240, z: 3888 },
    { x: 91.876471, y: 29.968307, z: 3888 },
    { x: 91.876641, y: 29.968371, z: 3888 },
  ]
  for (let i = 0, len = posArr.length; i < len; i++) {
    const pos = posArr[i]
    var gatePosition = cesium.Cartesian3.fromDegrees(pos.x, pos.y, pos.z);;
    var zm = viewer.entities.add({ position: gatePosition });
    console.log(viewer.entities);

    viewer.trackedEntity = viewer.entities[0];
    var particleSystem = new cesium.ParticleSystem({
      image: "/src/assets/images/map/smoke.png", // "./img/particle/waterfall.png",
      startColor: cesium.Color.fromAlpha(cesium.Color.fromCssColorString("#538c6e"), 0.7),
      endColor: cesium.Color.WHITE.withAlpha(0.1),
      startScale: 5,
      endScale: 10,
      minimumParticleLife: 1,
      maximumParticleLife: 2,
      lifetime: 16.0,
      minimumSpeed: 10,
      maximumSpeed: 14,
      imageSize: new cesium.Cartesian2(12, 12),
      emissionRate: 5,
      emitter: new cesium.CircleEmitter(2.0),
      modelMatrix: computeModelMatrix(zm),
      emitterModelMatrix: computeEmitterModelMatrix(65, 0, 0),
      updateCallback: updateCallback,
    })
    viewer.scene.primitives.add(particleSystem)
  }
}
function computeModelMatrix(entity) {

  let position = cesium.Cartesian3.fromDegrees(91.876633, 29.968201, 3888);
  let modelMatrix = cesium.Transforms.eastNorthUpToFixedFrame(position);
  return modelMatrix;
}
// 计算粒子发射器的位置姿态
function computeEmitterModelMatrix(heading, pitch, roll) {
  let hpr = cesium.HeadingPitchRoll.fromDegrees(heading, pitch, roll);
  let trs = new cesium.TranslationRotationScale();
  trs.translation = cesium.Cartesian3.fromElements(0, 0, 0);
  trs.rotation = cesium.Quaternion.fromHeadingPitchRoll(hpr);
  let Matrix4 = cesium.Matrix4.fromTranslationRotationScale(trs);
  return Matrix4
}
// 更新粒子运动状态
function updateCallback(p, dt) {
  var gravityScratch = new cesium.Cartesian3();
  var position = p.position;
  cesium.Cartesian3.normalize(position, gravityScratch);
  cesium.Cartesian3.multiplyByScalar(
    gravityScratch,
    -20 * dt,
    gravityScratch
  );
  p.velocity = cesium.Cartesian3.add(
    p.velocity,
    gravityScratch,
    p.velocity
  );
}
// 单个闸门控制
function onChangeGate(val) {
  console.log(val);
  
}
//停止
function stop() {
};
</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>