<template>
    <div>
        <el-dialog draggable destroy-on-close v-if="changeVisibilityState" :modal="false" v-model="changeVisibilityState"
            close-icon="" title="通视分析" width="20%" :before-close="handleClose" @opened="getIntervisOpen()"
            :close-on-click-modal="false">
            <div class="el-h-line">
                <p class="p">观察者信息</p>
                <el-row :gutter="10">
                    <el-col :span="6">
                        <p class="font-big">经度</p>
                    </el-col>
                    <el-col :span="18">
                        <div class="slider-demo-block">
                            <el-input v-model="longitude" placeholder="显示经度" :disabled="true" />
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="el-h-line">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <p class="font-big">纬度</p>
                    </el-col>
                    <el-col :span="18">
                        <div class="slider-demo-block">
                            <el-input v-model="latitude" placeholder="显示纬度" :disabled="true" />
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="el-h-line">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <p class="font-big">高程</p>
                    </el-col>
                    <el-col :span="18">
                        <div class="slider-demo-block">
                            <el-input v-model="height" placeholder="显示高程" :disabled="true" />
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--可见颜色-->
            <div class="el-h-line">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <p class="font-big">可见颜色</p>
                    </el-col>
                    <el-col :span="18">
                        <div class="slider-demo-block">
                            <el-color-picker v-model="visibleColor" @change="visibleColorChange" />
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--不可见颜色-->
            <div class="el-h-line">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <p class="font-big">不可见颜色</p>
                    </el-col>
                    <el-col :span="18">
                        <div class="slider-demo-block">
                            <div class="el-demo">
                                <el-color-picker v-model="hiddenColor" @change="hiddenColorChange" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addObserverPoint">添加观察点</el-button>
                    <el-button @click="addTargetPoint">添加目标点</el-button>
                    <el-button type="primary" @click="clearVisibility" style="background-color: #1d888b;">清除</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
// 组件传值
import emitter from "../../../utils/bus";
const changeVisibilityState = ref<Boolean>(true)
const longitude = ref()
const latitude = ref()
const height = ref()
const visibleColor = ref('#0e9dec')
const hiddenColor = ref('#ffb200')
const sightlineWidth = ref<number>()
const sightline = ref(null)
// 当前点击状态是否是 添加观察点
const addViewFlag = ref(false)
// 当前点击状态是否是 添加目标点
const addTargetFlag = ref(false)
// 添加的目标点的点号
const num = ref(0)
// 是否能移除目标点
const couldRemove = ref(false)
const handlerPoint = ref(null)
const pointEventHandler = ref(null)
const Cesium = window.Cesium

const handleClose = (done: () => void) => {
    done()
    clearVisibility()
}
// 接受layoutMenu传过来的值
emitter.on("visibilityState", (data: any) => {
    changeVisibilityState.value = data
});

const init = () => {
    if (!sightline.value) {
        sightline.value = new Cesium.Sightline(window.viewer.scene)
    }
    sightline.value.build()
    addViewFlag.value = false // 当前点击状态是否是 添加观察点
    addTargetFlag.value = false // 当前点击状态是否是 添加目标点
    num.value = 0 // 添加的目标点的点号
    couldRemove.value = false // 是否能移除目标点
}

const addObserverPoint = (): void => {
    addViewFlag.value = true
    sightline.value.lineWidth = 5
    handlerPoint.value = new Cesium.DrawHandler(
        window.viewer,
        Cesium.DrawMode.Point
    )

    handlerPoint.value.drawEvt.addEventListener((result: object) => {
        // 添加观察点
        if (addViewFlag.value) {
            var point = result.object
            // point.show = false;
            var position = result.object.position

            // 将获取的点的位置转化成经纬度
            var cartographic = Cartesian2toDegrees(position)

            longitude.value = cartographic[0]
            latitude.value = cartographic[1]
            height.value = cartographic[2]
            // 设置观察点
            sightline.value.viewPosition = cartographic
            addViewFlag.value = false
        }
        handlerPoint.value.deactivate()
    })
    if (handlerPoint.value.active) {
        return
    }
    window.viewer.entities.removeAll()
    if (couldRemove.value) {
        sightline.value.removeAllTargetPoint()
    }

    if (longitude.value && latitude.value && height.value) {
        sightline.value.viewPosition = [parseFloat(longitude.value), parseFloat(latitude.value), parseFloat(height.value)]
        addViewFlag.value = false
    } else {
        handlerPoint.value.activate()
    }

    if (addViewFlag.value || addTargetFlag.value) {
        window.viewer.enableCursorStyle = false
        window.viewer._element.style.cursor = ''
    }
}

const addTargetPoint = (): void => {
   
    addViewFlag.value = false
    addTargetFlag.value = true
    sightline.value.visibleColor = Cesium.Color.fromCssColorString(visibleColor.value)
    sightline.value.hiddenColor = Cesium.Color.fromCssColorString(hiddenColor.value)
    if (!pointEventHandler.value) {
        pointEventHandler.value = new Cesium.ScreenSpaceEventHandler(
            window.viewer.scene.canvas
        )
    }
    if (addViewFlag.value || addTargetFlag.value) {
        window.viewer.enableCursorStyle = false
        window.viewer._element.style.cursor = ''
    }

    // 鼠标点击事件，添加点
    pointEventHandler.value.setInputAction((e: any) => {
        var position = window.viewer.scene.pickPosition(e.position)
        addTarget(position)
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

    // 鼠标移动事件，更新点
    pointEventHandler.value.setInputAction((evt: any) => {
        if (num.value > 0) {
            // 鼠标移动，更新最后一次添加的目标点的位置
            var position = window.viewer.scene.pickPosition(evt.endPosition)
            sightline.value.removeTargetPoint('point0')

            var cartographic = Cartesian2toDegrees(position)

            var flag = sightline.value.addTargetPoint({
                position: cartographic,
                name: 'point0'
            })
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

    // 鼠标右键事件，结束
    pointEventHandler.value.setInputAction(() => {
        window.viewer.enableCursorStyle = true

        if (pointEventHandler.value) {
            pointEventHandler.value.removeInputAction(
                Cesium.ScreenSpaceEventType.MOUSE_MOVE
            )
            pointEventHandler.value.removeInputAction(
                Cesium.ScreenSpaceEventType.LEFT_CLICK
            )
        }
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
}

// 添加通视点
const addTarget = (CartesianPosition: object) => {
    if (addViewFlag.value === false && addTargetFlag.value) {
        num.value += 1
        // 将获取的点的位置转化成经纬度
        var cartographic = Cartesian2toDegrees(CartesianPosition)
        // 添加目标点
        var name = 'point' + num.value
        var flag = sightline.value.addTargetPoint({
            position: cartographic,
            name: name
        })
        couldRemove.value = true
    }
}

// 笛卡尔转换为经纬度
const Cartesian2toDegrees = (position: object) => {
    var cartographic = Cesium.Cartographic.fromCartesian(position)
    var longitude = Cesium.Math.toDegrees(cartographic.longitude)
    var latitude = Cesium.Math.toDegrees(cartographic.latitude)
    var height = cartographic.height

    return [longitude, latitude, height]
}

const clearVisibility = (): void => {
    addViewFlag.value = false
    addTargetFlag.value = false
    if (handlerPoint.value) {
        handlerPoint.value.clear()
    }
    num.value = 0
    window.viewer.entities.removeAll()
    if (couldRemove.value) {
        sightline.value.removeAllTargetPoint()
        couldRemove.value = false
    }
    window.viewer.enableCursorStyle = true
    longitude.value = null
    latitude.value = null
    height.value = null
    visibleColor.value = '#0e9dec'
    hiddenColor.value = '#ffb200'
}
// 可视线实时的颜色的改变，
const hiddenColorChange = (val: Number) => {
    sightline.value.visibleColor = Cesium.Color.fromCssColorString(val)
}
const visibleColorChange = (val: Number) => {
    sightline.value.hiddenColor = Cesium.Color.fromCssColorString(val)
}
onMounted(() => {
    init()
    onDialog()
});

// 弹框打开之后的回调再次穿透页面
const getIntervisOpen = () => {
    onDialog()
}

onBeforeUnmount(() => {
    clearVisibility()
    handlerPoint.value = null
    pointEventHandler.value = null
})

// 解决弹框打开时可操作操作其他Dom的问题
const onDialog = () => {
    var box = document.querySelector(".el-overlay-dialog");
    // 获取.el-overlay-dialog父级
    var boxa = box.parentNode;
    //  使用pointerEvents 进行页面穿透
    boxa.style.pointerEvents = "none";
}
</script>

<style lang='scss' scoped>
//解决弹框打开时可操作操作其他Dom的问题
:deep(.el-dialog) {
    pointer-events: auto !important;
}

.p-font {
    font-size: 16px;
    height: 36px;
    color: aqua;
}

:deep(.el-dialog__header) {
    background-color: #012728;
    margin-right: 0px;
    height: var(--el-hov);
    padding: var(--hoverc);
}

:deep(.el-dialog__title) {
    line-height: var(--line-h);
    font-size: var(--el-dialog-title-font-size);
    color: var(--text-color);
    margin-left: var(--m-l);
}

:deep(.el-slider__runway) {
    height: var(--el-h);
    background-color: var(--el-color);
    border: 1px solid var(--el-border);
}

:deep(.el-slider__bar) {
    height: var(--el-h);
    background-color: var(--el-bj);
}

:deep(.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button) {
    display: inline-block;
    width: 2px;
    height: 36px;
    margin-top: 13px;
}

:deep(.el-slider__button) {
    background-color: #1df9fc;
    border-radius: 0%;
    border: solid 0px var(--el-slider-main-bg-color);
}

:deep(.el-input-number__increase) {
    background: var(--el-color);
    color: var(--el-bj);
    border-left: 1px solid var(--el-border)
}

:deep(.el-input__wrapper) {
    background-color: var(--el-color);
    border: 1px solid var(--el-border);
    box-shadow: 0 0 0 0 var(--el-input-hover-border-color) inset;
}

:deep(.el-input-number__decrease) {
    background: var(--el-color);
    color: var(--el-bj);
    border-right: 1px solid var(--el-border)
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 0 var(--el-input-hover-border-color) inset;
}

:deep(.el-input__inner) {
    color: var(--text-color)
}

.font-big {
    font-size: var(--el-font);
    color: var(--text-color);
    line-height: var(--el-line);
}

:deep(.el-dialog--center) {
    text-align: left;
}

:deep(.el-color-picker__trigger) {
    width: 340px;
}

:deep(.el-color-picker__color-inner) {
    background-color: #00CC66;
    height: 32px;
}

:deep(.el-color-picker__trigger) {
    border: 0px solid var(--el-border-color);
    height: 28px;
}

:deep(.el-color-picker__color) {
    width: 100%;
    height: 32px;
    text-align: center;
    border: 0px solid var(--el-text-color-secondary);
    margin-left: 5px;
}

.el-h-line {
    margin-top: var(--el-h-line);
}

:deep(.el-color-picker:hover:not(.is-disabled) .el-color-picker__trigger) {
    border: 0 solid var(--el-border-color-hover);
}

:deep(.el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled):hover) {
    background-color: var(--el-fill-color-light);
    background-color: #34E0A8;
}

:deep(.el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled)) {
    background-color: var(--el-fill-color-light);
    background-color: #34E0A8;
}

:deep(.el-dialog--center .el-dialog__footer) {
    text-align: end;
    border-top: 1px solid #466c64;
}

:deep(.el-button) {
    background-color: var(--el-h-bj);
    color: var(--text-color);
    font-size: 15px;
}

:deep(.el-dialog__footer) {
    padding: var(--el-dialog-padding-primary);
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #466C64;
}

:deep(.el-dialog) {
    margin-right: 380px;
}

.el-dialog::after {
    clear: both;
}

.p {
    line-height: 52px;
    color: #34e0a8;
    margin-top: -18px;
    font-size: 15px;
    font-weight: 600;

}

:deep(.el-color-picker__color-inner) {

    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 78%;
    height: 100%;
    margin-left: -88px;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #123435;
    box-shadow: 0 0 0 0 #19686c inset;
}
</style>
<style lang='scss' >
.el-dialog {
    --el-dialog-width: 50%;
    --el-dialog-bg-color: #1B3A39;
}

.el-dialog__headerbtn {
    top: -5px;
    right: -5px;
}

.slider-demo-block {
    display: flex;
    align-items: center;
}

.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 8px;
}

.el-popper.is-light {
    width: 293px !important;
    opacity: 0.9;
}

.el-input__wrapper {
    background-color: #012728;
    border: 1 solid #00CC66;
    // box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
}

.el-input--small {
    --el-input-height: var(--el-component-size-small);
    border: 1;
    border: 1px solid #1df9fc;
}

.el-popper.is-light {
    background: #012324 !important;
    border: 0 solid var(--el-border-color-light) !important;
}
</style>