<template>
    <div class="SurfaceViewport" ref="SurfaceViewport" v-show="visible" id="SurfaceViewport"></div>
</template>
<script>
import {
    getRenderingEngine,
    CONSTANTS,
    setVolumesForViewports,
    eventTarget,
    Enums,
    utilities,
} from '@cornerstonejs/core'
import * as cornerstoneTools from '@cornerstonejs/tools'
import setCtTransferFunctionForVolumeActor from '@/views/trials/trials-panel/reading/dicoms/components/Fusion/js/setCtTransferFunctionForVolumeActor'
const {
    Enums: csToolsEnums,
    segmentation,
    TrackballRotateTool,
    ToolGroupManager
} = cornerstoneTools
const { MouseBindings, Events: toolsEvents } = csToolsEnums
export default {
    name: "SurfaceViewport",
    props: {
        renderingEngineId: {
            type: String,
            required: true
        },
        viewportId: {
            type: String,
            required: true
        },
        visitInfo: {
            type: Object,
            default: () => {
                return {}
            }
        },
        visible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            volumeId: null,
            info: null
        }
    },
    mounted() {
        eventTarget.addEventListener(Enums.Events.WEB_WORKER_PROGRESS, (evt) => {
            const { progress } = evt.detail;
            console.log(progress, 'progress')
        });
    },
    methods: {
        async setSeriesInfo(obj) {
            try {
                const renderingEngine = getRenderingEngine(this.renderingEngineId)
                const viewport = renderingEngine.getViewport(this.viewportId)
                let { volumeId } = obj
                this.info = obj
                this.volumeId = volumeId
                await setVolumesForViewports(
                    renderingEngine,
                    [{ volumeId, callback: setCtTransferFunctionForVolumeActor }],
                    [this.viewportId]
                );
                const volumeActor = viewport.getDefaultActor()
                    .actor;
                utilities.applyPreset(
                    volumeActor,
                    CONSTANTS.VIEWPORT_PRESETS.find((preset) => preset.name === 'CT-Bone')
                );
                volumeActor.setVisibility(false);
                viewport.render();

            } catch (e) {
                console.log(e)
            }

        },
        async setSurface() {
            let { segmentationId, segmentations } = this.info
            const toolGroup = ToolGroupManager.getToolGroup(this.viewportId)
            toolGroup.setToolActive(TrackballRotateTool.toolName, {
                bindings: [
                    {
                        mouseButton: MouseBindings.Primary,
                    },
                ],
            });
            let s = segmentation.getActiveSegmentation(this.viewportId)
            console.log(s)
            if (s) {
                await segmentation.removeSegmentationRepresentation(this.viewportId, {
                    segmentationId: s.segmentationId,
                    type: csToolsEnums.SegmentationRepresentations.Surface,
                })
            }
            await segmentation.addSegmentationRepresentations(this.viewportId, [
                {
                    segmentationId,
                    type: csToolsEnums.SegmentationRepresentations.Contour,
                },
            ]);
            console.log("loading...")
            this.$nextTick(async () => {
                await segmentation.addSegmentationRepresentations(this.viewportId, [
                    {
                        segmentationId,
                        type: csToolsEnums.SegmentationRepresentations.Surface,
                    },
                ]);
                segmentations.segments.forEach(item => {
                    segmentation.config.color.setSegmentIndexColor(this.viewportId, item.segmentationId, item.segmentIndex, this.hex2Rgb(item.color))
                })
            })
        },
        hex2Rgb(hexValue, alpha = 1) {
            const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
            const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b);
            const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            if (!rgb) {
                return hexValue;
            }
            const r = parseInt(rgb[1], 16),
                g = parseInt(rgb[2], 16),
                b = parseInt(rgb[3], 16);
            return [r, g, b, alpha * 255];
        },
    }
}
</script>
<style lang="scss" scoped>
#SurfaceViewport {
    width: 450px;
    height: 300px;
    position: fixed;
    top: 100px;
    z-index: 9999;
    left: 100px;
}
</style>