<template>
  <n-collapse-item name="casingDamageDisaster" title="套管损坏灾害">
    <n-space vertical>
      <n-space>
        <n-button :disabled="hasDamage" type="primary" @click="applyDamage">
          生成套管损害模型
        </n-button>
        <n-button :disabled="!hasDamage" type="error" @click="clearDamage">
          移除套管损害模型
        </n-button>
      </n-space>
    </n-space>
  </n-collapse-item>
</template>

<script lang="ts" setup>
import {onUnmounted, ref} from 'vue';
import {NButton, NCollapseItem, NSpace} from 'naive-ui';
import {useBus} from '@/hooks';
import {ParametricCylinder} from '@deep/engine';
import * as THREE from 'three/webgpu';

const bus = useBus();
const hasDamage = ref(false);

let damageCylinder: ParametricCylinder | null = null;

/**
 * 应用损坏效果 - 生成套管损害圆柱体
 */
const applyDamage = () => {
  const viewer = bus.getViewer();

  const position = {x: 1.3, y: 1.1, z: 1.5};

  const cylinder = new ParametricCylinder({
    radiusTop: 0.155,
    radiusBottom: 0.155,
    height: 0.2,
    //------ 圆柱上下不闭合 开始------
    openEnded: true,
    //------ 圆柱上下不闭合 结束------
    //------ 圆柱细分优化 开始------
    radialSegments: 96,
    //------ 圆柱细分优化 结束------
    material: new THREE.MeshBasicMaterial({
      color: '#ff0000',
      side: THREE.DoubleSide,
    }),
  });
  cylinder.renderOrder = 1;
  cylinder.position.set(position.x, position.y, position.z);
  viewer!.scene.add(cylinder);

  damageCylinder = cylinder;
  hasDamage.value = true;

  console.log('已生成套管损害圆柱体模型');
};

/**
 * 清除损坏
 */
const clearDamage = () => {
  const viewer = bus.getViewer();

  if (damageCylinder) {
    viewer!.scene.remove(damageCylinder);
    damageCylinder.dispose();
    damageCylinder = null;
  }

  hasDamage.value = false;
  console.log('已清除套管损害模型');
};

onUnmounted(() => {
  clearDamage();
});
</script>

<style scoped>

</style>
