<template>
    <div id="scene">
        <div id="cvs" ref="content"></div>
        <dev-info ref="info" :devInfo="devInfo" />
        <pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
            :hasDev="hasDevice" :pointNum="pointNum" pointGap="500" :equipmentType="equipmentType"
            :equipmentName="equipmentName" :equipmentValue="equipmentValue" />
        <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
        margin: 20% auto;
        width: 569px;
        height: 330px;
        background: rgba(7, 35, 72, 0.79);
        border-radius: 20px;
        border: 2px solid #0f82af;
        ">
            <p id="remove-title">是否确定删除该设备</p>
            <div class="btn">
                <button @click="centerDialogVisible = false">取消</button>
                <button @click="handleConfirmAddEqu">确定</button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import PreDialog from "./preEquComp/preDialog.vue"


// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
    CSS3DRenderer,
    CSS3DObject,
    CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
    CSS2DRenderer,
    CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";

import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref, toRaw, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { deleteEquipment, initData } from "./request";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
let modelList = ref(null);
let demo; //定义demo全局变量
// const loader = new OBJLoader();
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;

const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理



let isedit = ref(params.isedit)


// watch(
//     () => params.tunnelId,
//     (now) => {
//         params.tunnelId = now
//         console.log(params.tunnelId);

//     },
//     { deep: true }
// )

onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
    const doms = [info.value.$el, edit.value.$el];
    demo = new ThreeDScene(three, content.value);
    //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
    demo.isedit = params.isedit;
    let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel-have-wall.gltf");
    demo.addOrbitControls(OrbitControls);
    demo.addTween(TWEEN);
    demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
    demo.setDistance(10);
    lClickCallback(demo); //绑定左键回调
    rClickCallback(demo); //绑定右键回调

    //加载HDR背景图片
    demo.loadBackground(hdrLoader, backColorSet);
    watch(
        () => params.tunnelId,
        async () => {
            const text = await initData(params.tunnelId);
        }
    );
    // 初始化设备模型
    try {
        //在这加载隧道
        const map = new Map();
        map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
        map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
        // 给对象初加载设备模型
        demo.initDevicesModel(map);
        // const equipmentList = await store.getEquipmentList();
        modelList.value = await initData(params.tunnelId);
        // console.log("init", params.tunnelId);
        demo.previewtunnelModeInit(modelList.value);
        watch(
            () => params.tunnelId,
            (now) => {
                params.tunnelId = now
                // console.log(params.tunnelId);
                checkTunnelInit(modelList.value)
                demo.previewtunnelModeInit(modelList.value);
            },
            { deep: true }
        )
        // demo.previewtunnelModeInit(equipmentList);
        // previewEquInfProcess(modelList.value, targetP.value)
    } catch (err) {
        console.log(err);
    }
}


function checkTunnelInit(equipmentList) {
    equipmentList.forEach((item) => {
        let equipment = toRaw(item)
        console.log("我要清理掉之前的设备！！！");
        console.log(equipment);
        console.log(demo.scene.getObjectByName(equipment.position));
        demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
    });
}

// 每个模型加载回调
function loadModel(path) {
    return new Promise((resolve, reject) => {
        loader.load(
            path,
            (obj) => {
                resolve(obj);
            },
            (xhr) => { },
            (err) => {
                reject(err);
            }
        );
    });
}

let hasDevice = ref(true);
let devInfo = reactive({
    meshId: null,
    name: "无",
    state: "无",
    position: "无",
});

// 对象建构赋值功能
function editDevInfo(
    value = {
        meshId: null,
        name: "无",
        state: "无",
        position: "无",
    }
) {
    devInfo.meshId = value.meshId;
    devInfo.name = value.name;
    devInfo.state = value.state;
    devInfo.position = value.position;
}

//左键/双击左键回调函数
function lClickCallback(demo) {
    //demo动态添加函数，为操作组件内部
    function displayDevInfo(targetPoint = null) {
        hasDevice.value = targetPoint.hasDevice;
        if (!targetPoint.info) {
            editDevInfo();
            return;
        }
        editDevInfo(targetPoint.info);
    }
    // 传给内部使用
    demo.addFunction("displayDevInfo", displayDevInfo);
}

let pointNum = ref(0);
let targetP = ref({});
// 右键点击附着点后调函数
function rClickCallback(demo) {
    function editDev(targetPoint = null) {
        hasDevice.value = targetPoint.hasDevice;
        targetP.value = targetPoint;
        const equipmentList = initData(params.tunnelId)
        equipmentList.then((result) => {
            previewEquInfProcess(result, targetP.value)
        })
        pointNum.value = Number(
            targetPoint.name.substring(
                targetPoint.name.indexOf("_") + 1,
                targetPoint.name.lastIndexOf("_")
            ) - 1
        );
        if (!targetPoint.info) return;
        editDevInfo(targetPoint.info);
    }
    demo.addFunction("editDev", editDev);
}

// 添加设备
function handleAddEqu(formInfo) {
    demo.addEquipment(targetP.value, formInfo);
}

const centerDialogVisible = ref(false);
// 删除设备
function handleRemoveEqu() {
    if (!targetP.hasDevice) {
        ElMessage({
            message: "该点位不存在设备！",
            type: "warning",
        });
        return;
    }
    centerDialogVisible.value = true;
}
// 对话框确认删除
function handleConfirmAddEqu() {
    console.log("target:", targetP.value.info);
    deleteEquipment(targetP.value.info.equipmentId, pointGap)
        .then((res) => {
            demo.removeEquipment(targetP.value);
            centerDialogVisible.value = false;
            ElMessage({
                message: "删除成功！",
                type: "success",
            });
        })
        .catch((res) => {
            ElMessage({
                message: "删除失败！",
                type: "warning",
            });
        });
}
// 处理取消关闭编辑框事件
function handleCancel() {
    if (!demo) return;
    // 关闭标签
    demo.isControlOrbit(true);
    demo._resetState();
    demo.clearTagsObj();
}

let equipmentType = ref(0)
let equipmentName = ref(0)
let equipmentValue = ref(0)


function previewEquInfProcess(equipmentList, targetP) {
    for (const equipment of equipmentList) {
        if (equipment.position == targetP.name) {
            equipmentType.value = equipment.equipmentType
            //需要将获取到的设备列表进行序列化
            equipmentName.value = equipment.equipmentName
            equipmentValue.value = equipment.threshold
            if (equipmentType.value == 'frequency') {
                equipmentType.value = '风机'
            }
            if (equipmentType.value == 'windPressure') {
                equipmentType.value = '风压传感器'
            }
            if (equipmentType.value == 'sensor') {
                equipmentType.value = '其他传感器'
            }
            // console.log(equipmentType.value);
            // console.log(equipmentName.value);
            // console.log(equipmentValue.value);
        }
    }
}






</script>

<style lang="scss" scoped>
#scene {
    position: relative;
    height: 100%;
    width: 100%;

    #cvs {
        height: 100%;
    }
}

#remove-title {
    height: 42px;
    font-size: 32px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #08b7b8;
    line-height: 42px;
    letter-spacing: 3px;
    text-align: center;
    margin: 65px 0px 70px 0px;
}

.btn {
    display: flex;
    justify-content: center;
    gap: 80px;

    :nth-child(1) {
        width: 190px;
        height: 60px;
        border-radius: 11px;
        border: 2px solid #0f82af;
        font-size: 28px;
        font-family: MicrosoftYaHei;
        color: #08b7b8;
        line-height: 37px;
        background: transparent;
    }

    :nth-child(2) {
        width: 190px;
        height: 60px;
        background: #08b7b8;
        border-radius: 11px;
        font-size: 28px;
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 37px;
    }
}
</style>
