<template>
    <el-form ref="segmentForm" :model="form" label-width="120px" label-position="left" :rules="rules">
        <!-- 检查名称 -->
        <el-form-item :label="$t('segment:form:label:studyName')" prop="taskBlindName">
            <el-select v-model="form.studyId" clearable @change="(e) => handleChange(e, 'study')"
                @clear="(e) => handleClear(e, 'study')">
                <el-option v-for="item in studyList" :key="item.StudyId"
                    :label="taskInfo.IsReadingTaskViewInOrder !== 0 ? item.StudyCode : `${item.Modalities}(${item.SeriesCount})`"
                    :value="item.StudyId" />
            </el-select>
        </el-form-item>
        <!-- 序列名称 -->
        <el-form-item :label="$t('segment:form:label:seriesName')" prop="taskBlindName">
            <el-select v-model="form.seriesId" clearable @change="(e) => handleChange(e, 'series')"
                @clear="(e) => handleClear(e, 'series')">
                <el-option v-for="item in seriesList" :key="item.Id"
                    :label="`#${item.SeriesNumber}/${item.Modality}/${item.Description}`" :value="item.Id" />
            </el-select>
        </el-form-item>
        <!-- 分割组名称 -->
        <el-form-item :label="$t('segment:form:label:segmentGroupName')" prop="segmentGroupId">
            <el-select v-model="form.segmentGroupId" clearable @change="(e) => handleChange(e, 'segmentGroup')"
                @clear="(e) => handleClear(e, 'segmentGroup')">
                <el-option v-for="item in segmentGroupList" :key="item.Id" :label="item.SegmentationName"
                    :value="item.Id" />
            </el-select>
        </el-form-item>
        <!-- 分割名称 -->
        <el-form-item :label="$t('segment:form:label:segmentName')" prop="taskBlindName">
            <el-select v-model="form.segmentId" clearable>
                <el-option v-for="item in segmentList" :key="item.Id" :label="item.SegmentName" :value="item.Id" />
            </el-select>
        </el-form-item>
        <el-form-item style="text-align:right;">
            <!-- 取消 -->
            <el-button size="mini" @click="handleCancel">{{ $t('common:button:cancel') }}</el-button>
            <!-- 确认 -->
            <el-button type="primary" size="mini" @click="handleSave" :disabled="!form.segmentId">
                {{ $t('common:button:confirm') }}</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { getSegmentationList, getSegmentList, getSegmentBindingList } from '@/api/reading'
export default {
    name: 'FusionForm',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        visitInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            form: {
                studyId: '',
                seriesId: '',
                segmentGroupId: '',
                segmentId: ""
            },
            studyList: [],
            seriesList: [],
            segmentGroupList: [],
            segmentList: [],
            segmentionList: [],
            series: {},
            rules: {
                segmentGroupId: [
                    {
                        validator: (rule, value, callback) => {
                            if (value) {
                                // callback(new Error('请再次输入密码'));
                                let segmentGroup = this.segmentGroupList.find(item => item.Id === value)
                                if (!segmentGroup.IsSaved) {
                                    callback(new Error(this.$t('segment:confirm:message:segmentGroupIsNotSave')));
                                } else {
                                    callback();
                                }
                            } else {
                                callback();
                            }
                        }, trigger: ['blur', 'change']
                    }
                ]
            },
            taskInfo: {}
        }
    },
    mounted() {
        this.taskInfo = JSON.parse(sessionStorage.getItem('taskInfo'))
    },
    methods: {
        setSeries(series) {
            this.series = series
        },
        async init() {
            let studyList = Object.assign(this.visitInfo.StudyList, {})
            let s = await this.getSegmentationList()
            this.segmentionList = s
            let StudyIds = s.map(item => item.StudyId)
            let SeriesIds = s.map(item => item.SeriesId)
            studyList = studyList.filter(item => StudyIds.includes(item.StudyId))
            studyList.forEach(study => {
                study.SeriesArr = study.SeriesList.filter(item => SeriesIds.includes(item.Id))
            })
            this.studyList = studyList
            if (this.visitInfo.operateStateEnum === 21) {
                let find = studyList.some(item => item.StudyId === this.series.StudyId)
                if (find) {
                    this.form.studyId = this.series.StudyId
                    this.handleChange(null, 'study')
                    if (find.SeriesArr && find.SeriesArr.length > 0) {
                        let findSeries = find.SeriesArr.some(item => item.Id === this.form.seriesId)
                        if (findSeries) {
                            this.form.seriesId = this.series.Id
                            this.handleChange(null, 'series')
                        }
                    }


                }

            }
            if (this.visitInfo.operateStateEnum === 22) {
                let o = {}
                if (this.visitInfo.isTableQuestion) {
                    o.TableQuestionId = this.visitInfo.operateQuestionId
                    o.RowId = this.visitInfo.operateRowId
                } else {
                    o.QuestionId = this.visitInfo.operateQuestionId
                }
                let list = await this.getSegmentBindingList(o)
                let segmentGroup = this.segmentionList.find(item => item.Id === list[0].SegmentationId)
                this.form.studyId = segmentGroup.StudyId
                this.handleChange(null, 'study')
                this.form.seriesId = segmentGroup.SeriesId
                this.handleChange(null, 'series')
                this.form.segmentGroupId = list[0].SegmentationId
                this.handleChange(null, 'segmentGroup')
                this.form.segmentId = list[0].SegmentId
            }
        },
        async handleChange(e, key) {
            this.handleClear(e, key)
            if (key === 'study') {
                this.seriesList = this.studyList.find(item => item.StudyId === this.form.studyId).SeriesArr
            }
            if (key === 'series') {
                this.segmentGroupList = this.segmentionList.filter(item => item.SeriesId === this.form.seriesId)
            }
            if (key === 'segmentGroup') {
                let list = await this.getSegmentList(this.form.segmentGroupId)
                this.segmentList = list.filter(item => item.SegmentJson)
            }
        },
        handleClear(e, key) {
            if (key === 'study') {
                this.form.seriesId = null
                this.form.segmentGroupId = null
                this.form.segmentId = null
            }
            if (key === 'series') {
                this.form.segmentGroupId = null
                this.form.segmentId = null
            }
            if (key === 'segmentGroup') {
                this.form.segmentId = null
            }
        },
        handleCancel() {
            this.$emit("update:visible", false)
        },
        async handleSave() {
            let validate = await this.$refs.segmentForm.validate()
            if (!validate) return false
            let segment = this.segmentList.find(item => item.Id === this.form.segmentId)
            if (segment.SegmentJson) {
                let obj = JSON.parse(segment.SegmentJson)
                segment.stats = obj.stats
                segment.bidirectional = obj.bidirectional
            }
            this.$emit('handleSegmentSave', segment)
            this.handleCancel()
        },
        // 获取分割组
        async getSegmentationList() {
            try {
                let data = {
                    VisitTaskId: this.visitInfo.VisitTaskId,
                    PageSize: 9999,
                    PageIndex: 1,
                }
                this.loading = true;
                let res = await getSegmentationList(data);
                this.loading = false;
                if (res.IsSuccess) {
                    return res.Result.CurrentPageData;

                }
            } 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 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)
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.series-table {
    ::v-deep.el-table {
        background-color: #1e1e1e !important;
        color: #dfdfdf;
    }

    ::v-deep.el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border-bottom: 1px solid #dfdfdf;
    }

    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        background-color: #1e1e1e;
    }

    ::v-deep.el-table__header-wrapper {
        th {
            background-color: #1e1e1e !important;
            color: #dfdfdf;
        }
    }

    ::v-deep.el-table__body-wrapper {
        tr {
            background-color: #1e1e1e !important;
            color: #dfdfdf;
        }

        tr:hover>td {
            background-color: #1e1e1e !important;
        }
    }

    ::v-deep.el-table__empty-block {
        background-color: #1e1e1e !important;
    }
}
</style>
