<template>
    <div class="ImageManual">
        <div class="config">
            <div style="margin-bottom: 20px;font-weight: bold;">
                {{ $t("trials:researchRecord:ImageManual:uploadFile") }}
            </div>
            <el-form size="small" :model="uploadForm" style="width:80%">
                <el-form-item :label="$t('trials:researchRecord:ImageManual:IsSupportUploadFile')">
                    <el-radio-group v-model="uploadForm.IsSupportUploadFile"
                        @input="uploadForm.IsOnlyUploadFile = false">
                        <el-radio :label="item.value" v-for="item in $d.YesOrNo" :key="item.id">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('trials:researchRecord:ImageManual:IsOnlyUploadFile')"
                    v-if="uploadForm.IsSupportUploadFile">
                    <el-radio-group v-model="uploadForm.IsOnlyUploadFile">
                        <el-radio :label="item.value" v-for="item in $d.YesOrNo" :key="item.id">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div style="margin-bottom: 20px;font-weight: bold;">
                {{ $t("trials:researchRecord:ImageManual:BasicQuestion") }}
            </div>
            <el-form size="small" :model="form" style="width:80%">
                <el-form-item>
                    <el-checkbox v-model="form.AverageEngravingCycle">
                        {{ $t('trials:researchForm:form:engravingCycle') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.IsConfirmImagingTechnologist"
                        @change="(val) => handleChange(val, 'IsConfirmImagingTechnologist')">
                        {{ $t('trials:researchForm:form:isQualified') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.EfficacyEvaluatorType">
                        {{ $t('trials:researchForm:form:staffType') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.IsFollowStudyParameters"
                        @change="(val) => handleChange(val, 'IsFollowStudyParameters')">
                        <span v-html="$t('trials:researchForm:form:isFollowStudyParam')"></span>
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.IsRoutineMRIPDEE">
                        <span v-html="$t('trials:researchForm:form:IsRoutineMRIPDEE')"></span>
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.IsMRIPDFF" @change="(val) => handleChange(val, 'IsMRIPDFF')">
                        <span v-html="$t('trials:researchForm:form:IsMRIPDFF')"></span>
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.IsAuthorize" @change="(val) => handleChange(val, 'IsAuthorize')">
                        <span v-html="$t('trials:researchForm:form:IsAuthorize')"></span>
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="form.ISStrictManualBurnFlag"
                        @change="(val) => handleChange(val, 'ISStrictManualBurnFlag')">
                        <span v-html="$t('trials:researchForm:form:ISStrictManualBurnFlag')"></span>
                    </el-checkbox>
                </el-form-item>
            </el-form>
            <div style="margin-bottom: 20px;font-weight: bold;">
                {{ $t("trials:researchRecord:ImageManual:TableConfiguration") }}
            </div>
            <el-form size="small" :model="form" style="width:80%">
                <el-form-item :label="$t('trials:researchRecord:ImageManual:Equipment')">
                    <el-radio-group v-model="form.IsCloseEquipmentSurvey" @input="handleInput">
                        <el-radio :label="item.value" v-for="item in $d.YesOrNo" :key="item.id">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div style="margin-bottom: 20px;font-weight: bold;" v-if="form.IsCloseEquipmentSurvey">
                {{ $t("trials:researchRecord:ImageManual:EquipmentConfig") }}
            </div>
            <el-form size="small" :model="EquipmentForm" style="width:80%" v-if="form.IsCloseEquipmentSurvey">
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.EquipmentTypeEnum">
                        {{ $t('trials:researchForm:form:EquipmentTypeEnum') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.Parameters">
                        {{ $t('trials:researchForm:form:Parameters') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.ManufacturerType">
                        {{ $t('trials:researchForm:form:ManufacturerType') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.ScannerType">
                        {{ $t('trials:researchForm:form:ScannerType') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.MagneticFieldStrengthType">
                        {{ $t('trials:researchForm:form:MagneticFieldStrengthType') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.BodyCoilChannelCount">
                        {{ $t('trials:researchForm:form:BodyCoilChannelCount') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.HasDedicatedPdfFatQuantificationSequence"
                        @change="EquipmentForm.PdfFatQuantificationSequenceType = false">
                        {{ $t('trials:researchForm:form:HasDedicatedPdfFatQuantificationSequence') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item v-if="EquipmentForm.HasDedicatedPdfFatQuantificationSequence">
                    <el-checkbox v-model="EquipmentForm.PdfFatQuantificationSequenceType">
                        {{ $t('trials:researchForm:form:PdfFatQuantificationSequenceType') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.HasT2R2Correction">
                        {{ $t('trials:researchForm:form:HasT2R2Correction') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.CanFullyExportPdfParameterMapsAndRawDicom">
                        {{ $t('trials:researchForm:form:CanFullyExportPdfParameterMapsAndRawDicom') }}
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="EquipmentForm.Note">
                        {{ $t('trials:researchForm:form:Note') }}
                    </el-checkbox>
                </el-form-item>
            </el-form>
            <div style="margin-bottom: 20px;font-weight: bold;">
                {{ $t("trials:researchRecord:ImageManual:Precautions") }}
            </div>
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 99 }" placeholder=""
                v-model="form.ReplaceContentCN" style="width: 70%;" />
            <div style="margin: 20px 0;font-weight: bold;">
                {{ $t("trials:researchRecord:ImageManual:PrecautionsUS") }}
            </div>
            <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 99 }" placeholder=""
                v-model="form.ReplaceContent" style="width: 70%;" />
            <div style="text-align: right;margin: 20px;" class="btnBox">
                <el-button type="primary" :loading="loading" size="small" @click="handleSave">
                    {{ $t('common:button:save') }}
                </el-button>
            </div>
        </div>
        <div class="preview">
            <researchForm ref="ResearchForm" :trialSiteSurveyId="trialSiteSurveyId" />
        </div>
    </div>
</template>
<script>
import researchForm from '@/views/research/components/ResearchForm'
import { updateTrialExtralConfig, getTrialExtralConfig, getTrialDocumentList } from "@/api/trials"
export default {
    name: "ImageManual",
    components: { researchForm },
    props: {
        trialSiteSurveyId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            form: {
                AverageEngravingCycle: false,
                IsConfirmImagingTechnologist: false,
                NotConfirmReson: false,
                EfficacyEvaluatorType: false,
                IsFollowStudyParameters: false,
                NotFollowReson: false,
                ReplaceContent: '',
                ReplaceContentCN: '',
                IsOpenLostVistRead: false,
                IsSupportQCDownloadImage: false,
                IsCloseEquipmentSurvey: true,
                IsRoutineMRIPDEE: false,
                IsMRIPDFF: false,
                MRIPDFFScanTime: false,
                MRIPDFFLeadTime: false,
                MRIPDFFOther: false,
                IsAuthorize: false,
                IsAuthorizeRadiologistsParticipate: false,
                AssignFixedTechnologists: false,
                ISStrictManualBurnFlag: false,
                NotStrictManualBurnFlagReason: false
            },
            EquipmentForm: {
                Parameters: false,
                Note: false,
                EquipmentTypeEnum: false,
                ManufacturerType: false,
                ScannerType: false,
                MagneticFieldStrengthType: false,
                BodyCoilChannelCount: false,
                HasDedicatedPdfFatQuantificationSequence: false,
                PdfFatQuantificationSequenceType: false,
                HasT2R2Correction: false,
                CanFullyExportPdfParameterMapsAndRawDicom: false,
            },
            uploadForm: {
                IsSupportUploadFile: false,
                IsOnlyUploadFile: false
            },
            obj: {
                AverageEngravingCycle: false,
                IsConfirmImagingTechnologist: false,
                NotConfirmReson: false,
                EfficacyEvaluatorType: false,
                IsFollowStudyParameters: false,
                NotFollowReson: false,
                IsRoutineMRIPDEE: false,
                MRIPDFFScanTime: false,
                MRIPDFFLeadTime: false,
                MRIPDFFOther: false,
                IsAuthorizeRadiologistsParticipate: false,
                AssignFixedTechnologists: false,
                ISStrictManualBurnFlag: false,
                NotStrictManualBurnFlagReason: false,
            },
            loading: false
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        handleChange(val, key) {
            if (key === 'IsConfirmImagingTechnologist') this.form.NotConfirmReson = val
            if (key === 'IsFollowStudyParameters') this.form.NotFollowReson = val
            if (key === 'IsMRIPDFF') {
                this.form.MRIPDFFScanTime = val
                this.form.MRIPDFFLeadTime = val
                this.form.MRIPDFFOther = val
            }
            if (key === 'IsAuthorize') {
                this.form.IsAuthorizeRadiologistsParticipate = val
                this.form.AssignFixedTechnologists = val
            }
            if (key === 'ISStrictManualBurnFlag') this.form.NotStrictManualBurnFlagReason = val
        },
        handleInput(val) {
            Object.keys(this.EquipmentForm).forEach(key => {
                this.EquipmentForm[key] = false
            })
        },
        async getInfo() {
            try {
                let param = {
                    TrialId: this.$route.query.trialId
                }
                let res = await getTrialExtralConfig(param)
                if (res.IsSuccess) {
                    this.uploadForm.IsOnlyUploadFile = res.Result.IsOnlyUploadFile
                    this.uploadForm.IsSupportUploadFile = res.Result.IsSupportUploadFile
                    Object.keys(this.form).forEach(key => {
                        this.form[key] = true
                        if (key === 'ReplaceContent' || key === 'ReplaceContentCN') this.form[key] = ''
                    })
                    Object.keys(this.EquipmentForm).forEach(key => {
                        this.EquipmentForm[key] = false
                    })
                    res.Result.EquipmentControlFieldList.forEach(item => {
                        if (this.EquipmentForm.hasOwnProperty(item.FiledName)) {
                            this.EquipmentForm[item.FiledName] = true
                        }
                    })
                    this.form.IsOpenLostVistRead = res.Result.IsOpenLostVistRead
                    this.form.IsSupportQCDownloadImage = res.Result.IsSupportQCDownloadImage
                    this.form.IsCloseEquipmentSurvey = !res.Result.IsCloseEquipmentSurvey
                    if (Array.isArray(res.Result.NotShowFieldList) && res.Result.NotShowFieldList.length > 0) {
                        res.Result.NotShowFieldList.forEach(key => {
                            this.form[key] = false
                            if (['MRIPDFFScanTime', 'MRIPDFFLeadTime', 'MRIPDFFOther'].includes(key)) this.form.IsMRIPDFF = false
                            if (['IsAuthorizeRadiologistsParticipate', 'AssignFixedTechnologists'].includes(key)) this.form.IsAuthorize = false
                        })
                    }
                    if (Array.isArray(res.Result.ModifyFiledList) && res.Result.ModifyFiledList.length > 0) {
                        this.form.ReplaceContent = res.Result.ModifyFiledList[0].ReplaceContent.split('<p>').join('').split('</p>').filter(item => isNaN(item)).join("\n")
                        this.form.ReplaceContentCN = res.Result.ModifyFiledList[0].ReplaceContentCN.split('<p>').join('').split('</p>').filter(item => isNaN(item)).join("\n")
                    } else {
                        let arr = [this.$t('trials:equiptResearch:form:item1'), this.$t('trials:equiptResearch:form:item2'), this.$t('trials:equiptResearch:form:item3'), this.$t('trials:equiptResearch:form:item4')]
                        let arr2 = [this.$t('trials:equiptResearch:form:item5'), this.$t('trials:equiptResearch:form:item6'), this.$t('trials:equiptResearch:form:item7'), this.$t('trials:equiptResearch:form:item8')]
                        if (this.$i18n.locale !== 'zh') {
                            this.form.ReplaceContentCN = arr2.join("\n")
                            this.form.ReplaceContent = arr.join("\n")
                        } else {
                            this.form.ReplaceContentCN = arr.join("\n")
                            this.form.ReplaceContent = arr2.join("\n")
                        }

                    }
                }
            } catch (err) {
                console.log(err)
            }
        },

        async getTrialDocumentList() {
            try {
                let data = {
                    PageIndex: 1,
                    PageSize: 20,
                    TrialId: this.$route.query.trialId,
                    IsPublish: true,
                    FileTypeCode: 4,
                    IsDeleted: false
                }
                let res = await getTrialDocumentList(data)
                if (res.IsSuccess) {
                    const { CurrentPageData } = res.Result
                    if (CurrentPageData.length <= 0) this.$confirm(this.$t("trials:researchRecord:ImageManual:message:noImageManual"), this.$t('system:menu:confirm:title:warning'), {
                        type: 'warning'
                    })
                }
            } catch (err) {
                console.log(err)
            }
        },
        async handleSave() {
            try {
                let param = {
                    TrialId: this.$route.query.trialId
                }
                let data = {
                    IsOpenLostVistRead: this.form.IsOpenLostVistRead,
                    IsSupportQCDownloadImage: this.form.IsSupportQCDownloadImage,
                    IsCloseEquipmentSurvey: !this.form.IsCloseEquipmentSurvey,
                    IsOnlyUploadFile: this.uploadForm.IsOnlyUploadFile,
                    IsSupportUploadFile: this.uploadForm.IsSupportUploadFile,
                    ModifyFiledList: [],
                    NotShowFieldList: [],
                    EquipmentControlFieldList: []
                }
                Object.keys(this.obj).forEach(key => {
                    if (!this.form[key]) data.NotShowFieldList.push(key)
                })
                let ReplaceContent = ''
                this.form.ReplaceContent.split("\n").forEach(item => {
                    ReplaceContent += `<p>${item}</p>`
                })
                let ReplaceContentCN = ''
                this.form.ReplaceContentCN.split("\n").forEach(item => {
                    ReplaceContentCN += `<p>${item}</p>`
                })
                let obj = {
                    NeedModifyFiled: 'SiteSurveyNote',
                    ReplaceContent: ReplaceContent,
                    ReplaceContentCN: ReplaceContentCN,
                }
                data.ModifyFiledList.push(obj)
                Object.keys(this.EquipmentForm).forEach((key, index) => {
                    if (this.EquipmentForm[key]) {
                        let obj = {
                            FiledName: key,
                            IsView: true,
                            ShowOrder: index,
                        }
                        data.EquipmentControlFieldList.push(obj)
                    }
                })
                this.loading = true
                let res = await updateTrialExtralConfig(param, data)
                this.loading = false
                if (res.IsSuccess) {
                    this.$refs.ResearchForm.initPage()
                    if (!data.NotShowFieldList.includes('IsFollowStudyParameters')) this.getTrialDocumentList()
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.ImageManual {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;

    .config,
    .preview {
        width: 65%;
        height: 100%;
        overflow-y: auto;
    }

    .config {
        width: 35%;
        border-right: 1px solid #EBEEF5;
    }

    ::v-deep .el-checkbox__label {
        white-space: normal;

        i {}
    }
}
</style>
