<template>
    <div class="Segmentations" v-loading="loading">
        <el-collapse v-model="activeNames">
            <el-collapse-item name="tools">
                <template slot="title">
                    {{ $t('trials:reading:Segmentations:title:tools') }}
                </template>
                <div class="tool-frame">
                    <div :title="$t('trials:Segmentations:tools:contour')"
                        :class="['tool-item', activeTool === 'LabelMapEditWithContour' && segmentList.length > 0 ? 'tool-item-active' : '']"
                        :style="{ cursor: segmentList.length <= 0 || (curSegment && curSegment.lock) ? 'not-allowed' : 'pointer' }"
                        @click.prevent="setToolActive('LabelMapEditWithContour')">
                        <svg-icon icon-class="contour" class="svg-icon" />
                    </div>
                    <div :title="$t('trials:Segmentations:tools:circularbrush')"
                        :class="['tool-item', activeTool === 'CircularBrush' && segmentList.length > 0 ? 'tool-item-active' : '']"
                        :style="{ cursor: segmentList.length <= 0 || (curSegment && curSegment.lock) ? 'not-allowed' : 'pointer' }"
                        @click.prevent="setToolActive('CircularBrush')">
                        <svg-icon icon-class="circularbrush" class="svg-icon" />
                    </div>
                    <div :class="['tool-item', activeTool === 'CircularEraser' && segmentList.length > 0 ? 'tool-item-active' : '']"
                        :style="{ cursor: segmentList.length <= 0 || (curSegment && curSegment.lock) ? 'not-allowed' : 'pointer' }"
                        :title="$t('trials:dicom-show:Eraser')" @click.prevent="setToolActive('CircularEraser')">
                        <svg-icon icon-class="clear" class="svg-icon" />
                    </div>
                    <!-- <div :class="['tool-item']">
                        <input type="file" @change="beginScanFiles($event)">
                    </div> -->
                </div>
                <div class="ConfigBox">
                    <div class="EraserConfig" v-if="activeTool === 'CircularEraser' || activeTool === 'CircularBrush'">
                        <span>{{ $t('trials:reading:Segmentations:title:EraserConfig') }}</span>
                        <el-slider v-model="brushSize" show-input :step="1" :max="100" input-size="mini"
                            :show-input-controls="false" />
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item name="Segment">
                <template slot="title">
                    <div class="SegmentTitle">
                        {{ $t('trials:reading:Segmentations:title:Segment') }}
                        <svg-icon icon-class="individuation" class="svg-icon" @click.stop="changeShowSegmentConfig" />
                    </div>
                </template>
                <div class="addSegmentBox viewHover" @click.stop="addSegment" v-if="segmentList.length <= 0">
                    <span><i class="el-icon-plus"></i>
                        {{ $t('trials:reading:Segmentations:button:addSegmention') }}
                    </span>
                </div>
                <div class="SegmentConfigBox" v-if="showSegmentConfig && segmentList.length > 0">
                    <div class="SegmentConfig">
                        <span>{{ $t('trials:reading:Segmentations:title:Show:Fill&Outline') }}</span>
                        <div style="display: flex;">
                            <div :class="['tool-item', SegmentConfig.renderOutline && SegmentConfig.renderFill ? 'tool-item-active' : '']"
                                :title="$t('trials:dicom-show:Eraser')" @click.stop="changeSegmentConfig(true, true)">
                                <svg-icon icon-class="fill_outline" class="svg-icon" />
                            </div>
                            <div :class="['tool-item', SegmentConfig.renderOutline && !SegmentConfig.renderFill ? 'tool-item-active' : '']"
                                :title="$t('trials:dicom-show:Eraser')" @click.stop="changeSegmentConfig(true, false)">
                                <svg-icon icon-class="outline" class="svg-icon" />
                            </div>
                            <div :class="['tool-item', !SegmentConfig.renderOutline && SegmentConfig.renderFill ? 'tool-item-active' : '']"
                                :title="$t('trials:dicom-show:Eraser')" @click.stop="changeSegmentConfig(false, true)">
                                <svg-icon icon-class="fill" class="svg-icon" />
                            </div>


                        </div>
                    </div>
                    <div class="SegmentConfig">
                        <span>{{ $t('trials:reading:Segmentations:title:Opacity') }}</span>
                        <el-slider v-model="SegmentConfig.fillAlpha" show-input :step="0.1" :max="1" input-size="mini"
                            :show-input-controls="false" />
                    </div>
                    <div class="SegmentConfig">
                        <span>{{ $t('trials:reading:Segmentations:title:Border') }}</span>
                        <el-slider v-model="SegmentConfig.outlineWidth" show-input :step="0.5" :max="10"
                            input-size="mini" :show-input-controls="false" />
                    </div>
                    <span class="line" />
                    <div class="SegmentConfig" style="justify-content: flex-start;">
                        <el-switch v-model="SegmentConfig.InactiveSegmentations.show" :active-value="true"
                            :inactive-value="false">
                        </el-switch>
                        <span style="margin-left: 5px;">{{
                            $t('trials:reading:Segmentations:title:InactiveSegmentationsShow')
                            }}</span>
                    </div>
                    <!-- <div class="SegmentConfig" v-if="SegmentConfig.InactiveSegmentations.show">
                        <span>{{ $t('trials:reading:Segmentations:title:Opacity') }}</span>
                        <el-slider v-model="SegmentConfig.InactiveSegmentations.fillAlpha" show-input :step="0.1"
                            :max="1" input-size="mini" :show-input-controls="false" />
                    </div> -->
                </div>
                <template v-if="segmentList.length > 0">
                    <div class="SegmentGroupBox">
                        <el-popover placement="left" width="40" trigger="click">
                            <div class="SegmentGroupBtnBox">
                                <div class="SegmentGroupBtn" @click.stop="addSegmentGroup">
                                    {{ $t('trials:reading:Segmentations:button:addSegmentGroup') }}
                                </div>
                                <div class="SegmentGroupBtn" @click.stop="rename('segmentGroup')">
                                    {{ $t('trials:reading:Segmentations:button:renameSegmentGroup') }}
                                </div>
                                <div class="SegmentGroupBtn" @click.stop="exportSegmentGroup">
                                    {{ $t('trials:reading:Segmentations:button:exportSegmentGroup') }}
                                </div>
                                <div class="SegmentGroupBtn" @click.stop="delSegmentGroup">
                                    {{ $t('trials:reading:Segmentations:button:deleteSegmentGroup') }}
                                </div>
                            </div>
                            <i slot="reference" class="el-icon-more" style="cursor: pointer;color:#fff" />
                        </el-popover>
                        <el-select v-model="segmentationId" placeholder="" @change="selectSegmentGroup">
                            <el-option v-for="item in segmentList" :key="item.segmentationId" :label="item.name"
                                :value="item.segmentationId">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="addSegmentBox" @click.stop="addSegment"
                        style="display: flex;align-items: center;justify-content: space-between;">
                        <span><i class="el-icon-plus"></i>
                            {{ $t('trials:reading:Segmentations:button:addSegment') }}
                        </span>
                        <svg-icon :icon-class="!curSegmentGroup.view ? 'eye' : 'eye-open'"
                            @click.stop="viewSegmentGroup(segmentList.find(i => i.segmentationId === segmentationId))" />
                    </div>
                    <div
                        :style="`overflow-y: auto;max-height:${showSegmentConfig ? (SegmentHight - 220) : SegmentHight}px;`">
                        <div :class="['SegmentBox', item && item.segmentIndex === segmentIndex ? 'SegmentBox_active' : '']"
                            v-for="(item) in curSegmentGroup.segments"
                            :key="`${item.segmentationId}_${item.segmentIndex}`" @click.stop="selectSegment(item)">
                            <div class="messageBox">
                                <el-popover placement="left" :title="item.SegmentLabel" width="200" trigger="hover">
                                    <div class="Bidirectionalbox">
                                        <div class="BidirectionalBtn" @click.stop="getBidirectional(item)"
                                            v-if="!item.bidirectional">
                                            {{ $t('trials:reading:Segmentations:button:getBidirectional') }}
                                        </div>
                                        <template v-else>
                                            <div class="num">
                                                <span>L:{{ Number(item.bidirectional.maxMajor).toFixed(2) }} mm</span>
                                                <span>s:{{ Number(item.bidirectional.maxMinor).toFixed(2) }} mm</span>
                                            </div>
                                            <div class="btnBox">
                                                <svg-icon :icon-class="!item.bidirectionalView ? 'eye' : 'eye-open'"
                                                    style="color:#000;margin-right: 5px;cursor: pointer;"
                                                    @click.stop="viewBidirectional([item], !item.bidirectionalView)" />
                                                <svg-icon icon-class="jumpto" style="color:#000;cursor: pointer;"
                                                    @click.stop="jumpBidirectional(item)" />
                                            </div>
                                        </template>
                                    </div>
                                    <template v-if="item.stats">
                                        <div v-for="k in statsKey" :key="k" class="statsBox">
                                            <span>{{ k }}</span>
                                            <span v-if="item.stats[k]">{{ Number(item.stats[k].value).toFixed(2)
                                                }}<i>{{ item.stats[k].unit }}</i></span>
                                        </div>
                                    </template>
                                    <div class="serialNum" slot="reference">{{ item.segmentIndex }}</div>
                                </el-popover>

                                <el-color-picker v-model="item.color" size="mini"
                                    @change="(e) => changeColor(e, item)"></el-color-picker>
                                <div class="SegmentName">{{ item.SegmentLabel }}</div>
                            </div>
                            <div class="btnBox">
                                <svg-icon :icon-class="item && !item.view ? 'eye' : 'eye-open'"
                                    @click.stop="viewSegment(item, !item.view)" class="docShow" />
                                <i class="el-icon-lock" v-if="item.lock" @click.stop="lockSegment(item, false)"></i>
                                <el-popover placement="bottom" width="40" trigger="click" class="docShow">
                                    <div class="SegmentGroupBtnBox">
                                        <div class="SegmentGroupBtn" @click.stop="rename('segment', item)">
                                            {{ $t('trials:reading:Segmentations:button:renameSegmentGroup') }}
                                        </div>
                                        <div class="SegmentGroupBtn" @click.stop="delSegment(item.segmentIndex)">
                                            {{ $t('trials:reading:Segmentations:button:deleteSegmentGroup') }}
                                        </div>
                                        <div class="SegmentGroupBtn" v-if="!item.lock"
                                            @click.stop="lockSegment(item, true)">
                                            {{ $t('trials:reading:Segmentations:button:lockSegment') }}
                                        </div>
                                        <div class="SegmentGroupBtn" v-if="item.lock"
                                            @click.stop="lockSegment(item, false)">
                                            {{ $t('trials:reading:Segmentations:button:unlockSegment') }}
                                        </div>
                                    </div>
                                    <i slot="reference" class="el-icon-more" style="cursor: pointer;color:#fff" />
                                </el-popover>
                            </div>
                        </div>
                    </div>
                </template>
            </el-collapse-item>
        </el-collapse>
        <div class="saveBtnBox">
            <el-button type="success" size="small" @click="saveSegmentGroup">{{ $t("common:button:save") }}</el-button>
        </div>
    </div>
</template>
<script>
import { getSegmentationList, addOrUpdateSegmentation, deleteSegmentation, getSegmentList, addOrUpdateSegment, deleteSegment, getSegmentBindingList, saveSegmentBindingAndAnswer, getReadingTableQuestionTrialById, getReadingQuestionTrialById } from '@/api/reading'
import * as cornerstoneTools from '@cornerstonejs/tools';
import * as cornerstone from "@cornerstonejs/core";
import dcmjs from '@/utils/dcmUpload/dcmjs'
import * as cornerstoneAdapters from "@cornerstonejs/adapters";
import cornerstoneDICOMImageLoader from '@cornerstonejs/dicom-image-loader'
import DicomEvent from '@/views/trials/trials-panel/reading/dicoms/components/DicomEvent'
import { getCustomizeStandardsSegmentDicomTools } from './toolConfig'
const {
    ToolGroupManager,
    Enums: csToolsEnums,
    segmentation,
    annotation,
    LabelMapEditWithContourTool,
    SegmentBidirectionalTool,
    CrosshairsTool,
    utilities: CStUtils,
} = cornerstoneTools;
const { MouseBindings, Events: toolsEvents } = csToolsEnums
const { segmentation: segmentationUtils } = CStUtils;
const { cache, getRenderingEngine, imageLoader, eventTarget, metaData, utilities: csUtils, volumeLoader } = cornerstone;
// const { downloadDICOMData } = cornerstoneAdapters.helpers;
const { Cornerstone3D } = cornerstoneAdapters.adaptersSEG;
export default {
    name: "Segmentations",
    props: {
        isMPR: {
            type: Boolean,
            default: false
        },
        volumeToolGroupId: {
            type: String,
            default: ''
        },
        viewportKey: {
            type: String,
            default: 'viewport'
        },
        activeViewportIndex: {
            type: Number,
            default: 0
        },
        activeTool: {
            type: String,
            default: ''
        },
        visitInfo: {
            type: Object,
            default: () => {
                return {}
            }
        },
        actionConfiguration: {
            type: Object,
            default: () => {
                return {}
            }
        },
        renderingEngineId: {
            type: String,
            required: true
        },
    },
    data() {
        return {
            loading: false,
            series: {},
            activeNames: ['tools', 'Segment'],
            brushSize: 10,
            showSegmentConfig: false,
            SegmentConfig: {
                renderOutline: true,
                renderFill: true,
                fillAlpha: 0.5,
                outlineWidth: 1,
                InactiveSegmentations: {
                    show: true,
                    fillAlpha: 0.3,
                }
            },
            segmentList: [],
            segmentationId: "",
            segmentIndex: null,
            SegmentHight: 100,
            colors: [
                '#0ca8df',
                '#ffd10a',
                '#b6d634',
                '#3fbe95',
                '#785db0',
                '#5070dd',
                '#505372',
                '#ff994d',
                '#fb628b',
            ],
            viewprotIds: ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3', 'viewport-MPR-0', 'viewport-MPR-1', 'viewport-MPR-2'], // 
            statsKey: [],
            drawing: false, // 是否正在分割
            isDel: false,
            digitPlaces: 2
        }
    },
    mounted() {
        this.SegmentHight = window.innerHeight > 900 ? window.innerHeight * 0.5 : window.innerHeight * 0.4;
        this.statsKey = getCustomizeStandardsSegmentDicomTools('Labelmap')[0].props.filter(item => item !== 'width' && item !== 'length')
        console.log(segmentation, 'segmentation')
        // console.log(annotation, 'annotation')
        eventTarget.addEventListener(
            'CORNERSTONE_TOOLS_SEGMENTATION_DATA_MODIFIED',
            this.segmentationModifiedCallback
        );
        DicomEvent.$on('activeSeries', (series) => {
            this.series = series
        })
        DicomEvent.$on('isloaded', (data) => {
            let { segment } = data
            this.delAllSegment()
            this.getSegmentationList(segment)
        })
        const digitPlaces = Number(localStorage.getItem('digitPlaces'))
        this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
    },
    computed: {
        curSegmentGroup() {
            let s = this.segmentList.find(item => item.segmentationId === this.segmentationId)
            return s ? s : {}
        },
        curSegment() {
            let s = {}
            if (this.curSegmentGroup.segments && this.curSegmentGroup.segments.length) {
                s = this.curSegmentGroup.segments.find(item => item.segmentIndex === this.segmentIndex)
            }
            return s
        }
    },
    watch: {
        SegmentConfig: {
            handler() {
                this.readingSegmentByConfig()
            },
            deep: true
        },
        brushSize: {
            handler() {
                this.setBrushSize()
            },
            deep: true
        }
    },
    methods: {
        createSegmentConfiguration(segmentIndex, segmentationId, otherSegments) {
            const containedSegmentIndices = otherSegments
                ? { has: (segmentIndex) => otherSegments.indexOf(segmentIndex) !== -1 }
                : undefined;
            const colorConfig = segmentation.config.color.getSegmentIndexColor(
                `${this.viewportKey}-${this.activeViewportIndex}`,
                segmentationId,
                segmentIndex
            );
            // Allow null style to skip style set
            let color, activeColor;
            if (colorConfig?.length) {
                color = `rgb(${colorConfig.join(',')})`;
                activeColor = color;
            }
            const style = {
                color,
                colorHighlightedActive: activeColor,
                colorActive: activeColor,
                textBoxColor: color,
                textBoxColorActive: activeColor,
                textBoxColorHighlightedActive: activeColor,
            };
            const label = otherSegments
                ? `Combined ${segmentIndex} with ${otherSegments.join(', ')}`
                : `Segment ${segmentIndex}`;

            this.actionConfiguration.contourBidirectional.data.segmentData.set(segmentIndex, {
                containedSegmentIndices,
                label,
                style,
            });
            this.actionConfiguration.contourBidirectional.data.segmentationId = segmentationId
            this.actionConfiguration.contourBidirectional.data.segmentIndex = segmentIndex
        },
        getBidirectional(item, DATA = null) {
            this.createSegmentConfiguration(item.segmentIndex, item.segmentationId);
            const renderingEngine = getRenderingEngine(this.renderingEngineId)
            const viewportId = `${this.viewportKey}-${this.activeViewportIndex}`
            const viewport = renderingEngine.getViewport(viewportId);
            this.$nextTick(() => {
                [viewport.element].forEach(async (element) => {
                    const bidirectionalData =
                        await CStUtils.segmentation.getSegmentLargestBidirectional({
                            segmentationId: item.segmentationId,
                            segmentIndices: [item.segmentIndex],
                        });
                    // console.log(bidirectionalData, 'bidirectionalData')
                    if (bidirectionalData.length <= 0) {
                        let annotations = annotation.state.getAllAnnotations().filter(i => i.metadata.segmentationId === item.segmentationId && i.metadata.segmentIndex === item.segmentIndex);
                        annotations.forEach(i => {
                            annotation.state.removeAnnotation(i.annotationUID)
                        })
                        this.resetViewport(false)
                        item.bidirectional = null
                        if (DATA) {
                            this.segmentationId = DATA.SegmentationId;
                            this.segmentIndex = DATA.SegmentMumber;
                            setTimeout(() => {
                                this.selectSegment(DATA)
                            })
                        }
                    }
                    bidirectionalData.forEach((bidirectional) => {
                        const { segmentIndex } = bidirectional;
                        const { majorAxis, minorAxis, maxMajor, maxMinor } = bidirectional;

                        SegmentBidirectionalTool.hydrate(viewportId, [majorAxis, minorAxis], {
                            segmentIndex,
                            segmentationId: item.segmentationId,
                        });
                        let an = annotation.state.getAllAnnotations().find(i => i.metadata.segmentationId === item.segmentationId && i.metadata.segmentIndex === bidirectional.segmentIndex && i.metadata.toolName === "SegmentBidirectional");
                        if (an) {
                            annotation.locking.setAnnotationLocked(an.annotationUID, true)
                            annotation.visibility.setAnnotationVisibility(an.annotationUID, item.bidirectionalView)
                        }
                        item.bidirectional = bidirectional
                        if (DATA) {
                            this.segmentationId = DATA.SegmentationId;
                            this.segmentIndex = DATA.SegmentMumber;
                            setTimeout(() => {
                                this.selectSegment(DATA)
                            })
                        }
                        // render the bidirectional tool data
                    });

                });
            })
        },
        setToolActive(toolName) {
            if (this.segmentList.length <= 0) return false
            if (this.curSegment.lock) return false
            const toolGroupId = this.isMPR ? this.volumeToolGroupId : `${this.viewportKey}-${this.activeViewportIndex}`
            const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
            if (this.activeTool === toolName) {
                if (toolName === CrosshairsTool.toolName) {
                    toolGroup.setToolDisabled(this.activeTool)
                } else {
                    toolGroup.setToolPassive(this.activeTool)
                }
                this.$emit('update:activeTool', '')
            } else {
                if (this.activeTool) {
                    if (toolName === CrosshairsTool.toolName) {
                        toolGroup.setToolDisabled(this.activeTool)
                    } else {
                        toolGroup.setToolPassive(this.activeTool)
                    }
                }
                toolGroup.setToolActive(toolName, {
                    bindings: [{ mouseButton: MouseBindings.Primary }]
                })
                this.setBrushSize()
                this.$emit('update:activeTool', toolName)
            }
        },
        changeShowSegmentConfig() {
            if (this.segmentList.length > 0) {
                this.showSegmentConfig = !this.showSegmentConfig
            }
        },
        viewBidirectional(arr, view) {
            for (let j = 0; j < arr.length; j++) {
                let item = arr[j]
                let bidirectional = annotation.state.getAllAnnotations().find(i => i.metadata.segmentationId === item.segmentationId && i.metadata.segmentIndex === item.segmentIndex && i.metadata.toolName === "SegmentBidirectional");
                item.bidirectionalView = view
                if (!bidirectional) return false
                annotation.visibility.setAnnotationVisibility(bidirectional.annotationUID, view)
            }
            this.resetViewport()
        },
        async jumpBidirectional(item) {
            if (item.bidirectional) {
                let an = annotation.state.getAllAnnotations().find(i => i.metadata.segmentationId === item.segmentationId && i.metadata.segmentIndex === item.segmentIndex && i.metadata.toolName === "SegmentBidirectional");
                // console.log(an, 'an')
                if (!an) return false

                const renderingEngine = getRenderingEngine(this.renderingEngineId)
                const viewportId = `${this.viewportKey}-${this.activeViewportIndex}`
                const viewport = renderingEngine.getViewport(viewportId)
                let key = Object.keys(an.data.cachedStats)[0]; // referencedImageId
                if (key) {
                    let sliceIndex = key.split("?")[1].split("&")[0].split("=")[1]
                    csUtils.jumpToSlice(viewport.element, { imageIndex: sliceIndex });
                } else {
                    const points = an.data.handles.points;
                    const worldPoint = points[0]; // 取一个点
                    let imageData = cache.getVolume(this.series.SeriesInstanceUid).imageData
                    const ijk = imageData.worldToIndex(worldPoint);
                    const sliceIndex = Math.abs(Math.round(ijk[2]));
                    let imageIds = viewport.getImageIds(this.series.SeriesInstanceUid)
                    // console.log(sliceIndex, 'sliceIndex')
                    csUtils.jumpToSlice(viewport.element, { imageIndex: imageIds.length - sliceIndex - 1 });
                }

            }
        },
        viewSegmentGroup(item) {
            let view = !item.view
            this.viewprotIds.forEach(id => {
                segmentation.config.visibility.setSegmentationRepresentationVisibility(
                    id,
                    {
                        segmentationId: item.segmentationId,
                        type: csToolsEnums.SegmentationRepresentations.Labelmap,
                    },
                    view
                );
            })
            item.view = view

            item.segments.forEach(i => {
                i.view = view
                // this.viewBidirectional(i, view)
            })
            this.viewBidirectional(item.segments, view)
        },
        viewSegment(item, view) {
            this.viewprotIds.forEach(id => {
                segmentation.config.visibility.setSegmentIndexVisibility(id, {
                    segmentationId: item.segmentationId,
                    type: csToolsEnums.SegmentationRepresentations.Labelmap,
                }, item.segmentIndex, view)
            })
            item.view = view
            this.viewBidirectional([item], view)
            this.$emit('setToolsPassive')
        },
        lockSegment(item, lock) {
            segmentation.segmentLocking.setSegmentIndexLocked(item.segmentationId, item.segmentIndex, lock)
            item.lock = lock
        },
        selectSegment(item) {
            this.segmentationId = item.segmentationId;
            this.segmentIndex = item.segmentIndex;
            segmentation.segmentIndex.setActiveSegmentIndex(item.segmentationId, item.segmentIndex);
            this.jumpBidirectional(item)
            if (item.lock) {
                this.$emit('setToolsPassive')
            }
            // this.resetViewport()
        },
        selectSegmentGroup() {
            this.viewprotIds.forEach(id => {
                segmentation.activeSegmentation.setActiveSegmentation(id, this.segmentationId)
            })
            let segment = this.segmentList.find(item => item.segmentationId === this.segmentationId).segments[0]
            this.selectSegment(segment)
            this.readingSegmentByConfig()
        },
        async addSegmentGroup() {
            let viewprotIds = this.viewprotIds
            // let segmentationId = this.$guid();
            let obj = {
                name: this.$t('trials:reading:Segmentations:name:SegmentGroup') + (this.segmentList.length + 1),
                view: true,
                segmentationId: null,
                segments: []
            }
            let segmentationId = await this.addOrUpdateSegmentation({ name: obj.name })
            obj.segmentationId = segmentationId
            let o = {
                segmentIndex: 1,
                segmentationId,
                SegmentLabel: 'Segment 1',
                color: this.colors[0],
                stats: null,
                bidirectional: null,
                bidirectionalView: true,
                view: true,
                lock: false
            }
            let id = await this.addOrUpdateSegment({ name: o.SegmentLabel, color: o.color, segmentIndex: o.segmentIndex, segmentationId: o.segmentationId })
            o.id = id
            obj.segments.push(o);
            this.segmentList.push(obj);
            this.segmentationId = obj.segmentationId;
            await this.createSegmentation(obj.segmentationId)
            this.createSegmentationRepresentation(obj.segmentationId)
            this.segmentIndex = 1
            viewprotIds.forEach(id => {
                segmentation.config.color.setSegmentIndexColor(id, obj.segmentationId, 1, this.hex2Rgb(this.colors[0]))
            })
            this.selectSegmentGroup()
        },
        async addSegment() {
            let viewprotIds = this.viewprotIds;
            if (this.segmentList.length <= 0) {
                let obj = {
                    name: this.$t('trials:reading:Segmentations:name:SegmentGroup') + 1,
                    view: true,
                    segments: []
                }
                let segmentationId = await this.addOrUpdateSegmentation({ name: obj.name })
                obj.segmentationId = segmentationId
                let o = {
                    segmentIndex: 1,
                    segmentationId,
                    SegmentLabel: 'Segment 1',
                    color: this.colors[0],
                    stats: null,
                    bidirectional: null,
                    bidirectionalView: true,
                    view: true,
                    lock: false
                }
                let id = await this.addOrUpdateSegment({ name: o.SegmentLabel, color: o.color, segmentIndex: o.segmentIndex, segmentationId: o.segmentationId })
                o.id = id
                obj.segments.push(o);
                this.segmentList.push(obj);
                this.segmentationId = this.segmentList[0].segmentationId;
                await this.createSegmentation(this.segmentationId)
                this.createSegmentationRepresentation(this.segmentationId)
                this.segmentIndex = 1
                segmentation.segmentIndex.setActiveSegmentIndex(this.segmentList[0].segmentationId, 1);
                viewprotIds.forEach(id => {
                    segmentation.config.color.setSegmentIndexColor(id, this.segmentList[0].segmentationId, 1, this.hex2Rgb(this.colors[0]))
                })
                this.readingSegmentByConfig()

            } else {
                let item = this.segmentList.find(i => i.segmentationId === this.segmentationId)
                let segmentIndex = item.segments[item.segments.length - 1].segmentIndex + 1
                let obj = {
                    segmentIndex: segmentIndex,
                    segmentationId: this.segmentationId,
                    SegmentLabel: `Segment ${segmentIndex}`,
                    color: item.segments.length > this.colors.length ? this.colors[0] : this.colors[item.segments.length],
                    stats: null,
                    bidirectional: null,
                    bidirectionalView: true,
                    view: true,
                    lock: false
                }
                let id = await this.addOrUpdateSegment({ name: obj.SegmentLabel, color: obj.color, segmentIndex: obj.segmentIndex, segmentationId: obj.segmentationId })
                obj.id = id
                item.segments.push(obj)
                segmentation.segmentIndex.setActiveSegmentIndex(obj.segmentationId, obj.segmentIndex);
                viewprotIds.forEach(id => {
                    segmentation.config.color.setSegmentIndexColor(id, obj.segmentationId, obj.segmentIndex, this.hex2Rgb(obj.color))
                })
                this.segmentIndex = obj.segmentIndex
            }


        },
        changeColor(e, item) {
            this.viewprotIds.forEach(id => {
                segmentation.config.color.setSegmentIndexColor(id, item.segmentationId, item.segmentIndex, this.hex2Rgb(e))
            })
        },
        // 清空所有分割
        delAllSegment() {
            segmentation.removeAllSegmentations()
            segmentation.state.removeAllSegmentations()
            let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.segmentationId && item.metadata.segmentIndex && item.metadata.toolName === "SegmentBidirectional");
            annotations.forEach(item => {
                annotation.state.removeAnnotation(item.annotationUID)
            })
            this.segmentationId = ''
            this.segmentIndex = null
            this.segmentList = []
            this.resetViewport()
        },
        // 删除分割分组
        async delSegmentGroup() {
            let res = await this.deleteSegmentation(this.segmentationId)
            if (!res) return false
            segmentation.removeSegmentation(this.segmentationId)
            segmentation.state.removeSegmentation(this.segmentationId)
            let groupIndex = this.segmentList.findIndex(item => item.segmentationId === this.segmentationId)
            this.segmentList.splice(groupIndex, 1)
            let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.segmentationId === this.segmentationId);
            annotations.forEach(item => {
                annotation.state.removeAnnotation(item.annotationUID)
            })
            if (this.segmentList.length > 0) {
                this.segmentationId = this.segmentList[0].segmentationId;
                this.selectSegmentGroup()
            } else {
                this.segmentationId = ''
            }
            this.readingSegmentByConfig()
            this.resetViewport()
        },
        // 删除分割片段
        async delSegment(segmentIndex) {
            let groupIndex = this.segmentList.findIndex(item => item.segmentationId === this.segmentationId)
            if (this.segmentList[groupIndex].segments.length <= 1) return this.$confirm(this.$t('trials:reading:Segmentations:confirm:hasOneSegment'))
            let s = this.segmentList[groupIndex].segments.find(item => item.segmentIndex === segmentIndex)
            let res = await this.deleteSegment(s.id)
            if (!res) return false
            segmentation.removeSegment(this.segmentationId, Number(segmentIndex), { setNextSegmentAsActive: false, recordHistory: false })
            segmentation.helpers.clearSegmentValue(this.segmentationId, Number(segmentIndex), { recordHistory: false })
            // segmentation.updateSegmentations({ segmentationId: this.segmentationId })
            let index = this.segmentList[groupIndex].segments.findIndex(item => item.segmentIndex === segmentIndex)
            this.segmentList[groupIndex].segments.splice(index, 1)
            let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.segmentationId === this.segmentationId && item.metadata.segmentIndex === segmentIndex);
            annotations.forEach(item => {
                annotation.state.removeAnnotation(item.annotationUID)
            })
            this.resetViewport()
            if (this.segmentList[groupIndex].segments.length > 0) {
                this.selectSegment(this.segmentList[groupIndex].segments[0])
            }

        },
        resetViewport(passive = true) {
            let renderingEngine = getRenderingEngine(this.renderingEngineId)
            this.viewprotIds.forEach(id => {
                const viewport = renderingEngine.getViewport(id)
                viewport.render()
            })
            if (passive) this.$emit('setToolsPassive')
        },
        async rename(key, item) {
            let name = await this.customPrompt()
            if (key === 'segmentGroup') {
                let group = this.segmentList.find(i => i.segmentationId === this.segmentationId)
                group.name = name
                this.addOrUpdateSegmentation({ name, id: group.segmentationId })
            } else {
                item.SegmentLabel = name
                this.addOrUpdateSegment({ name: item.SegmentLabel, color: item.color, segmentIndex: item.segmentIndex, segmentationId: item.segmentationId, segmentJson: JSON.stringify({ stats: item.stats, bidirectional: item.bidirectional }), id: item.id })
            }
        },
        async customPrompt() {
            try {
                const that = this
                // 请输入标记名称
                let message = this.$t('trials:reading:Segmentations:message:rename')
                const { value } = await this.$prompt(message, '', {
                    showClose: false,
                    cancelButtonText: this.$t('common:button:cancel'),
                    confirmButtonText: this.$t('common:button:save'),
                    showCancelButton: true,
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            // const value = instance.inputValue
                            done()
                        } else {
                            done()
                        }
                    }
                })
                return value
            } catch (err) {
                console.log(err)
                return null
            }
        },
        // 切换非当前分组分割标记显示
        changeInactiveSegmentShow() {
            let segmentList = this.segmentList.filter(item => item.segmentationId !== this.segmentationId)
            this.viewprotIds.forEach(id => {
                segmentation.config.visibility.setSegmentationRepresentationVisibility(
                    id,
                    {
                        segmentationId: this.segmentationId,
                        type: csToolsEnums.SegmentationRepresentations.Labelmap,
                    },
                    true
                );
                segmentList.forEach(segment => {
                    segmentation.config.visibility.setSegmentationRepresentationVisibility(
                        id,
                        {
                            segmentationId: segment.segmentationId,
                            type: csToolsEnums.SegmentationRepresentations.Labelmap,
                        },
                        this.SegmentConfig.InactiveSegmentations.show
                    );

                })

            })
            segmentList.forEach(segment => {
                this.viewBidirectional(segment.segments, this.SegmentConfig.InactiveSegmentations.show)
            })
            let segmentGroup = this.segmentList.find(item => item.segmentationId === this.segmentationId)
            if (segmentGroup) {
                let segments = segmentGroup.segments
                this.viewBidirectional(segments, true)
            }
        },
        // 更改分割标记显示模式
        changeSegmentConfig(renderOutline, renderFill) {
            this.SegmentConfig.renderOutline = renderOutline;
            this.SegmentConfig.renderFill = renderFill;
        },
        // 导出SEG
        exportSegmentGroup() {
            let group = this.segmentList.find(item => item.segmentationId === this.segmentationId)
            this.exportSegmentation(this.segmentationId, group, true)
        },
        exportSegmentation(segmentationId, group, isFile = false) {
            const segmentationIds = segmentation.state
                .getSegmentations()
                .map(x => x.segmentationId);
            if (!segmentationIds.length) {
                return;
            }
            const segmentGroup =
                segmentation.state.getSegmentation(segmentationId);

            let { imageIds } = segmentGroup.representationData.Labelmap;

            let segImages = imageIds.map(imageId => cache.getImage(imageId));
            segImages = segImages.reverse()
            let referencedImages = segImages.map(image =>
                cache.getImage(image.referencedImageId)
            );
            const labelmaps2D = [];

            let z = 0;

            for (const segImage of segImages) {
                const segmentsOnLabelmap = new Set();
                const pixelData = segImage.getPixelData();
                const { rows, columns } = segImage;

                for (let i = 0; i < pixelData.length; i++) {
                    const segment = pixelData[i];
                    if (segment !== 0) {
                        segmentsOnLabelmap.add(segment);
                    }
                }

                labelmaps2D[z++] = {
                    segmentsOnLabelmap: Array.from(segmentsOnLabelmap),
                    pixelData,
                    rows,
                    columns
                };
            }

            const allSegmentsOnLabelmap = labelmaps2D.map(
                labelmap => labelmap.segmentsOnLabelmap
            );

            const labelmap3D = {
                segmentsOnLabelmap: Array.from(new Set(allSegmentsOnLabelmap.flat())),
                metadata: [],
                labelmaps2D
            };

            labelmap3D.segmentsOnLabelmap.forEach(segmentIndex => {
                const color = segmentation.config.color.getSegmentIndexColor(
                    `${this.viewportKey}-${this.activeViewportIndex}`,
                    segmentationId,
                    segmentIndex
                );
                const RecommendedDisplayCIELabValue = dcmjs.data.Colors.rgb2DICOMLAB(
                    color.slice(0, 3).map(value => value / 255)
                ).map(value => Math.round(value));
                let segment = group.segments.find(item => item.segmentIndex === segmentIndex)
                if (segment) {
                    let SegmentLabel = segment.SegmentLabel
                    const segmentMetadata = {
                        SegmentNumber: segmentIndex.toString(),
                        SegmentLabel: SegmentLabel,
                        SegmentAlgorithmType: "MANUAL",
                        SegmentAlgorithmName: "OHIF Brush",
                        RecommendedDisplayCIELabValue,
                        SegmentedPropertyCategoryCodeSequence: {
                            CodeValue: "T-D0050",
                            CodingSchemeDesignator: "SRT",
                            CodeMeaning: "Tissue"
                        },
                        SegmentedPropertyTypeCodeSequence: {
                            CodeValue: "T-D0050",
                            CodingSchemeDesignator: "SRT",
                            CodeMeaning: "Tissue"
                        }
                    };

                    if (segment.bidirectional && segment.stats) labelmap3D.metadata[segmentIndex] = segmentMetadata;
                }
            });
            if (labelmap3D.metadata.length <= 0) {
                return false
            }
            const generatedSegmentation =
                Cornerstone3D.Segmentation.generateSegmentation(
                    referencedImages,
                    labelmap3D,
                    metaData
                );
            if (!isFile) {
                const buffer = Buffer.from(dcmjs.data.datasetToDict(generatedSegmentation.dataset).write());
                let blob = new Blob([buffer], { type: "application/dicom" });
                return blob
            } else {
                this.downloadDICOMData(generatedSegmentation.dataset, `${group.name}.dcm`);
            }
        },
        downloadDICOMData(bufferOrDataset, filename) {
            let blob;
            if (bufferOrDataset instanceof ArrayBuffer) {
                blob = new Blob([bufferOrDataset], { type: 'application/dicom' });
            } else {
                if (!bufferOrDataset._meta) {
                    throw new Error('Dataset must have a _meta property');
                }
                blob = dcmjs.data.datasetToBlob(bufferOrDataset);
            }

            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            link.click();
        },

        // 导入SEG
        beginScanFiles(e) {
            let files = e.target.files
            for (const file of files) {
                file.segmentationId = this.$guid()
                this.readSegmentation(file, true)
            }
        },
        async readSegmentation(obj, isFile = false) {
            let imageId = null
            if (isFile) {
                imageId = cornerstoneDICOMImageLoader.wadouri.fileManager.add(obj);
            } else {
                const imageIdObj = await cornerstoneDICOMImageLoader.wadouri.loadImage(`wadouri:${this.OSSclientConfig.basePath}${obj.segUrl}`).promise
                imageId = imageIdObj.imageId
            }
            const image = await imageLoader.loadAndCacheImage(imageId);

            if (!image) {
                return;
            }

            const instance = metaData.get("instance", imageId);

            if (instance.Modality !== "SEG") {
                console.error("This is not segmentation: " + file.name);
                return;
            }

            const arrayBuffer = image.data.byteArray.buffer;
            await this.loadSegmentation(arrayBuffer, obj.segmentationId);
            this.createSegmentationRepresentation(obj.segmentationId);
        },
        async loadSegmentation(arrayBuffer, segmentationId) {
            const generateToolState =
                await Cornerstone3D.Segmentation.generateToolState(
                    this.series.ImageIds,
                    arrayBuffer,
                    metaData,
                );

            if (generateToolState.labelmapBufferArray.length !== 1) {
                alert(
                    "Overlapping segments in your segmentation are not supported yet. You can turn on the skipOverlapping option but it will override the overlapping segments."
                );
                return;
            }

            await this.createSegmentation(segmentationId);

            const megmentGroup =
                segmentation.state.getSegmentation(segmentationId);
            const { imageIds } = megmentGroup.representationData.Labelmap;
            const derivedSegmentationImages = imageIds.map(imageId =>
                cache.getImage(imageId)
            );

            const volumeScalarData = new Uint8Array(
                generateToolState.labelmapBufferArray[0]
            );

            for (let i = 0; i < derivedSegmentationImages.length; i++) {
                const voxelManager = derivedSegmentationImages[i].voxelManager;
                const scalarData = voxelManager.getScalarData();
                scalarData.set(
                    volumeScalarData.slice(
                        i * scalarData.length,
                        (i + 1) * scalarData.length
                    )
                );
                voxelManager.setScalarData(scalarData);
            }
        },
        createSegmentGroupObj(name) {
            let flag = this.segmentList.some(item => item.name === name)
            let obj = {
                segmentationId: this.$guid(),
                name: !flag ? name : this.$t('trials:reading:Segmentations:name:SegmentGroup') + (this.segmentList.length + 1),
                view: true,
                segments: []
            }
            return obj
        },
        readingSegmentByConfig() {
            this.changeInactiveSegmentShow()
            segmentation.config.style.setStyle(
                {
                    type: csToolsEnums.SegmentationRepresentations.Labelmap,
                },
                {
                    renderFill: this.SegmentConfig.renderFill,
                    renderOutline: this.SegmentConfig.renderOutline,
                    outlineWidth: Number(this.SegmentConfig.outlineWidth),
                    fillAlpha: Number(this.SegmentConfig.fillAlpha),
                }
            )
        },
        setBrushSize() {
            const toolGroupId = this.isMPR ? this.volumeToolGroupId : `${this.viewportKey}-${this.activeViewportIndex}`
            CStUtils.segmentation.setBrushSizeForToolGroup(toolGroupId, this.brushSize);
        },
        async createSegmentation(segmentationId) {
            const toolGroupId = this.isMPR ? this.volumeToolGroupId : `${this.viewportKey}-${this.activeViewportIndex}`
            const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
            toolGroup.setToolActive(
                LabelMapEditWithContourTool.toolName,
            );
            if (!cache.getVolume(segmentationId)) {
                await volumeLoader.createAndCacheDerivedLabelmapVolume(
                    this.series.SeriesInstanceUid,
                    {
                        volumeId: segmentationId
                    }
                )
            }
            segmentation.addSegmentations([
                {
                    segmentationId,
                    representation: {
                        type: cornerstoneTools.Enums.SegmentationRepresentations
                            .Labelmap,
                        data: {
                            volumeId: segmentationId
                        }
                    }
                }
            ]);
        },
        segmentationModifiedCallback(evt) {
            const { detail } = evt;
            // console.log(detail)
            if (detail.segmentIndex === 0) {
                this.drawing = true
                this.isDel = true
            }
            // || !detail.segmentIndex
            if (!detail || detail.segmentIndex === 255) {
                return;
            }
            this.drawing = true
        },
        async calculateStatistics(indices, segmentationId, mode) {
            const stats = await segmentationUtils.getStatistics({
                segmentationId,
                segmentIndices: indices,
                mode,
            });

            if (mode === 'individual') {
                const segmentStats = stats;

                for (const segmentIndex of indices) {
                    if (segmentStats[segmentIndex]) {
                        const segmentStat = segmentStats[segmentIndex];
                        // console.log(segmentStat, 'segmentStat')
                        segmentStat.count.label = 'Voxels';
                        let segmentGroup = this.segmentList.find(item => item.segmentationId === segmentationId)
                        if (segmentGroup) {
                            let segment = segmentGroup.segments.find(item => item.segmentIndex === segmentIndex)
                            segment.stats = segmentStat;
                        }

                    }
                }
            } else {
                const items = [`Statistics on ${indices.join(', ')}`];
                const namedStats = stats;
                namedStats.count.label = 'Voxels';

            }

        },
        createSegmentationRepresentation(segmentationId) {
            this.viewprotIds.forEach(id => {
                segmentation.addSegmentationRepresentations(id, [
                    {
                        segmentationId,
                        type: csToolsEnums.SegmentationRepresentations.Labelmap,
                    },
                ])
            })
            this.$emit('setToolsPassive')
        },
        contentMouseup() {
            // console.log("segment contentMouseup")
            if (!this.drawing) return false
            if (this.timeoutId) {
                clearTimeout(this.timeoutId);
                this.timeoutId = null;
            }
            this.timeoutId = setTimeout(() => {
                this.timeoutId = null;
                this.drawing = false;
                if (!this.isDel) {
                    this.calculateStatistics([this.segmentIndex], this.segmentationId, 'individual');
                    let segmentGroup = this.segmentList.find(item => item.segmentationId === this.segmentationId)
                    let segment = segmentGroup.segments.find(item => item.segmentIndex === this.segmentIndex)
                    this.getBidirectional(segment)
                } else {
                    let segmentGroup = this.segmentList.find(item => item.segmentationId === this.segmentationId)
                    let segmentIndexs = []
                    segmentGroup.segments.forEach(item => {
                        segmentIndexs.push(item.segmentIndex)
                        this.getBidirectional(item)
                    })
                    this.calculateStatistics(segmentIndexs, this.segmentationId, 'individual');
                }
                this.isDel = false

            }, 500);
        },
        // 获取当前任务分割标记与问题绑定关系
        async getSegmentBindingList(param = {}) {
            try {
                let data = {
                    VisitTaskId: this.visitInfo.VisitTaskId,
                    PageSize: 9999,
                    PageIndex: 1,
                }
                data = Object.assign(data, param)
                let res = await getSegmentBindingList(data)
                if (res.IsSuccess) {
                    return res.Result.CurrentPageData
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 添加分割标记与问题绑定关系
        async saveSegmentBindingAndAnswer(list) {
            try {
                let data = {
                    VisitTaskId: this.visitInfo.VisitTaskId,
                    BindingList: list
                }
                let res = await saveSegmentBindingAndAnswer(data)
                if (res.IsSuccess) {
                    this.$emit("resetQuestion")
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 保存整个分组
        async saveSegmentGroup() {
            try {
                if (this.segmentList.length <= 0) return false
                this.$emit("setToolsPassive")
                let questionNeedChange = false;
                let bindingList = []
                for (let i = 0; i < this.segmentList.length; i++) {
                    let segmentGroup = this.segmentList[i]
                    let data = {
                        SegmentationId: segmentGroup.segmentationId
                    }
                    let res = await this.getSegmentBindingList(data)
                    if (res && res.length > 0) questionNeedChange = true
                    for (let j = 0; j < res.length; j++) {
                        let item = res[j]
                        let segment = segmentGroup.segments.find(d => d.id === item.SegmentId)
                        let question = await this.getQuestionConfig(item.TableQuestionId ? item.TableQuestionId : item.QuestionId, !!item.TableQuestionId);
                        let imageToolAttribute = question.ImageToolAttribute
                        let answer = ''
                        if (imageToolAttribute === 'length' || imageToolAttribute === 'width') {
                            let s = {
                                length: "maxMajor",
                                width: 'maxMinor'
                            }
                            answer = segment.bidirectional && segment.bidirectional[s[imageToolAttribute]] ? Number(segment.bidirectional[s[imageToolAttribute]]).toFixed(this.digitPlaces) : ''
                        } else {
                            answer = segment.stats && segment.stats[imageToolAttribute] ? Number((segment.stats[imageToolAttribute]).value).toFixed(this.digitPlaces) : ''
                        }
                        let o = {
                            Answer: answer,
                            QuestionId: item.QuestionId,
                            RowId: item.RowId,
                            SegmentId: item.SegmentId,
                            SegmentationId: item.SegmentationId,
                            TableQuestionId: item.TableQuestionId,
                            VisitTaskId: this.visitInfo.VisitTaskId,
                        }
                        bindingList.push(o)
                    }
                }
                if (questionNeedChange) {
                    let confirm = await this.$confirm(this.$t("segment:confirm:questionNeedChange"))
                    if (!confirm) return false
                }
                for (let i = 0; i < this.segmentList.length; i++) {
                    let segmentGroup = this.segmentList[i]
                    // 将所有分割进行锁定
                    segmentGroup.segments.forEach(s => {
                        this.lockSegment(s, true)
                    })
                    // 生成文件路径
                    let blob = this.exportSegmentation(segmentGroup.segmentationId, segmentGroup)
                    if (blob) {
                        let path = `/${this.$route.query.trialId}/Segment/${this.visitInfo.SubjectId
                            }/${this.visitInfo.VisistId}/${this.series.StudyId
                            }/${this.series.Id}/${segmentGroup.name}.dcm`
                        const result = await this.OSSclient.put(path, blob)
                        segmentGroup.segUrl = this.$getObjectName(result.url)
                    }

                    this.addOrUpdateSegmentation({ name: segmentGroup.name, id: segmentGroup.segmentationId, url: segmentGroup.segUrl })
                    segmentGroup.segments.forEach(s => {
                        this.addOrUpdateSegment({ name: s.SegmentLabel, color: s.color, segmentIndex: s.segmentIndex, segmentationId: s.segmentationId, segmentJson: JSON.stringify({ stats: s.stats, bidirectional: s.bidirectional }), id: s.id })
                    })
                }
                if (bindingList.length > 0) this.saveSegmentBindingAndAnswer(bindingList)
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 新增或修改分割组
        async addOrUpdateSegmentation(item) {
            let { name, id, url } = item
            try {
                let data = {
                    SegmentationName: name,
                    SeriesId: this.series.Id,
                    StudyId: this.series.StudyId,
                    SubjectId: this.visitInfo.SubjectId,
                    SubjectVisitId: this.visitInfo.VisistId,
                    TrialId: this.$route.query.trialId,
                    VisitTaskId: this.visitInfo.VisitTaskId,
                }
                if (url) data.SegUrl = url;
                if (id) data.Id = id;
                this.loading = true;
                let res = await addOrUpdateSegmentation(data);
                this.loading = false;
                if (res.IsSuccess) {
                    return res.Result
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 获取分割组
        async getSegmentationList(SEGMENT = null) {
            try {
                let data = {
                    SeriesId: this.series.Id,
                    VisitTaskId: this.visitInfo.VisitTaskId,
                    PageSize: 9999,
                    PageIndex: 1,
                }
                this.loading = true;
                let res = await getSegmentationList(data);
                this.loading = false;
                if (res.IsSuccess) {
                    let list = res.Result.CurrentPageData;
                    for (let i = 0; i < list.length; i++) {
                        let item = list[i]
                        let obj = {
                            segmentationId: item.Id,
                            name: item.SegmentationName,
                            view: true,
                            segUrl: item.SEGUrl,
                            segments: []
                        }
                        this.segmentList.push(obj)
                        if (item.SEGUrl) {
                            await this.readSegmentation(obj)
                        } else {
                            await this.createSegmentation(obj.segmentationId)
                            this.createSegmentationRepresentation(obj.segmentationId)
                        }
                        let segments = await this.getSegmentList(item.Id)
                        segments.forEach((s, index) => {
                            let SegmentJson = s.SegmentJson ? JSON.parse(s.SegmentJson) : {};
                            let o = {
                                segmentIndex: s.SegmentMumber,
                                segmentationId: s.SegmentationId,
                                SegmentLabel: s.SegmentName,
                                color: s.ColorRgb,
                                stats: SegmentJson.stats,
                                bidirectional: SegmentJson.bidirectional,
                                bidirectionalView: true,
                                view: true,
                                lock: item.locked,
                                id: s.Id
                            }
                            obj.segments.push(o)
                            this.selectSegment(o)
                            this.changeColor(s.ColorRgb, o)
                            this.lockSegment(o, true)
                            // setTimeout(() => {
                            //     if (SEGMENT && index === segments.length - 1) {
                            //         return this.getBidirectional(o, SEGMENT)
                            //     }
                            //     this.getBidirectional(o)
                            // })
                            if (SEGMENT && index === segments.length - 1) {
                                console.log(SEGMENT, 'SEGMENT')
                                return this.getBidirectional(o, SEGMENT)
                            }
                            this.getBidirectional(o)
                        })
                    }
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 删除分割组
        async deleteSegmentation(id) {
            try {
                this.loading = true;
                let res = await deleteSegmentation(id)
                this.loading = false;
                if (res.IsSuccess) return true
                return false
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 新增或修改分割
        async addOrUpdateSegment(item) {
            try {
                let { name, color, segmentIndex, segmentationId, segmentJson, id } = item
                let data = {
                    ColorRgb: color,
                    SegmentName: name,
                    SegmentMumber: segmentIndex,
                    SegmentationId: segmentationId,
                    VisitTaskId: this.visitInfo.VisitTaskId,
                    SegmentJson: segmentJson
                }
                if (id) data.Id = id
                this.loading = true;
                let res = await addOrUpdateSegment(data)
                this.loading = false;
                if (res.IsSuccess) {
                    return res.Result
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 获取分割
        async getSegmentList(id) {
            try {
                let data = {
                    SegmentationId: id,
                    PageSize: 9999,
                    PageIndex: 1,
                }
                this.loading = true;
                let res = await getSegmentList(data)
                this.loading = false;
                if (res.IsSuccess) {
                    return res.Result.CurrentPageData
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 删除分割
        async deleteSegment(id) {
            try {
                this.loading = true;
                let res = await deleteSegment(id)
                this.loading = false;
                if (res.IsSuccess) return true
                return false
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        // 获取问题配置
        async getQuestionConfig(Id, isTable = false) {
            try {
                let params = {
                    Id
                }
                let res = null
                if (isTable) {
                    res = await getReadingTableQuestionTrialById(params)
                } else {
                    res = await getReadingQuestionTrialById(params)
                }
                if (res.IsSuccess) return res.Result
            } catch (err) {
                console.log(err)
            }
        },
        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>
.Segmentations {
    height: 100%;
    position: relative;

    .saveBtnBox {
        position: absolute;
        bottom: 5px;
        left: 50%;
    }
}

.Bidirectionalbox {
    padding: 5px;
    border-bottom: 1px solid #333;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .BidirectionalBtn {
        width: 100%;
    }

    .num {
        display: flex;
        width: 70%;
        flex-wrap: wrap;

        span {
            display: block;
            width: 100%;
        }
    }

    .btnBox {
        display: flex;
        align-items: center;
    }
}

.statsBox {
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    color: #333;

    i {
        margin-left: 5px;
        color: #000;
    }
}

.SegmentBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background-color: #333;
    cursor: pointer;
    margin: 0 5px 10px;
    border-radius: 3px;
    padding: 5px;
    position: relative;

    .messageBox {
        display: flex;
        align-items: center;
        margin-left: 30px;

        .serialNum {
            position: absolute;
            height: 100%;
            width: 30px;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 30px;
            background-color: #222;
        }

        .color {
            width: 10px;
            height: 10px;
            background-color: #f0f;
            border-radius: 50%;
        }

        .SegmentName {
            margin-left: 5px;
        }
    }

    .btnBox {
        i {
            font-size: 20px;
            margin-left: 5px;
        }

        .segmentBtn {
            display: none;
        }

        .docShow {
            display: inline-block;
        }
    }

    &:hover {
        background-color: #999;

        .messageBox {
            color: #333;
        }

        .serialNum {
            color: #fff;
        }

        .segmentBtn {
            display: inline-block;
        }
    }
}

.SegmentBox_active {
    background-color: #999;

    .messageBox {
        color: #333;
    }

    .serialNum {
        color: #fff;
    }
}

.SegmentGroupBox {
    padding: 8px 5px;
    background-color: #333;
    margin: 0 5px;
    border-radius: 3px;
    display: flex;
    align-items: center;

    i {
        font-size: 20px;
    }

    ::v-deep .el-input--medium {
        .el-input__inner {
            line-height: 30px;
            height: 30px;
        }

        .el-input__icon {
            line-height: 30px;
        }
    }

    ::v-deep .el-select {
        margin-left: 10px;
    }
}

.SegmentGroupBtn {
    line-height: 30px;
    cursor: pointer;
    border-radius: 3px;
    padding: 0 5px;

    &:hover {
        background-color: rgba($color: #409EFF, $alpha: 0.2);
    }
}

.addSegmentBox {
    cursor: pointer;
    color: #fff;
    line-height: 30px;
    margin: 5px;
    padding: 0 5px;
    border-radius: 3px;
}

.viewHover {
    &:hover {
        background-color: #ddd;
        color: #333;

    }
}

.line {
    display: block;
    border-bottom: 1px solid #333;
    margin-bottom: 4px;
}

.SegmentTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .svg-icon {
        transform: rotate(90deg);
    }
}

.EraserConfig,
.SegmentConfig {
    width: calc(100% - 10px);
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
        color: #fff;
        margin-right: 10px;
    }

    ::v-deep .el-slider {
        width: 70%;
    }

    ::v-deep .el-slider__input {
        width: 60px;
    }

    ::v-deep .el-slider__runway.show-input {
        margin-right: 70px;
    }
}

.SegmentConfig {
    padding: 5px;
}

.svg-icon {
    color: #fff;
    font-size: 20px;
}

.tool-item {
    padding: 5px;
    margin: 0 5px;
    border: 1px solid #333;
    // font-size: 20px;
    cursor: pointer;
}

.tool-item-active {
    background-color: #607d8b;
}

.tool-disabled {
    cursor: not-allowed;
}

.tool-frame {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    // margin-right: 20px;
    padding: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #404040;

    .icon {
        padding: 5px;
        border-right: 1px solid #404040;
        cursor: pointer;
        text-align: center;

        .svg-icon {
            font-size: 20px;
            color: #ddd;
        }
    }

    .select-wrapper {
        width: 60px;
        background-color: black;
        color: #ddd;
        border: none;
        font-size: 13px;
        outline: none;
    }

    .text {
        position: relative;
        font-size: 12px;
        margin-top: 5px;
        color: #d0d0d0;
        display: none;
    }
}

::v-deep.el-collapse {
    border: none;

    .el-collapse-item {
        background-color: #000 !important;
        color: #ddd;

    }

    .el-collapse-item__content {
        padding-bottom: 0px;
        background-color: #000 !important;
        line-height: 1;
    }

    .el-collapse-item__header {
        background-color: #000 !important;
        color: #ddd;
        border-bottom-color: #5a5a5a;
        padding-left: 5px;
        // height: 50px;
        line-height: 20px;
    }
}

::v-deep .el-progress-bar__inner {
    transition: width 0s ease;
}

::v-deep .el-collapse-item__wrap {
    background-color: #000;
}
</style>