dev/dcp-web-gate/src_old/views/ResourceSharing/ResourceSharingResultsIssue.vue

<template>
    <div class="autoBox box">
        <div class="crumbs">
            <div style="overflow: hidden">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'resourceSharing' }" class="pointer">{{$t('common.ResourceSharing')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.resourceWantRelease')}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="content">
                <div class="addLanguage">
                    <i class="el-icon-orange" style="font-size: 30px;line-height: 50px;color: #E6A23C;vertical-align: middle;"></i>
                    <span style="font-size: 18px;line-height: 50px;margin-left: 20px;vertical-align: middle;">{{$t('common.resourceLanguageVersion')}}</span>
                    <i class="el-icon-plus" style="font-size: 30px;font-weight: 900;margin-left: 20px;line-height: 50px; color: #E6A23C;vertical-align: middle;"@click="addTabDialog(languageTabsValue)"></i>
                </div>
                <div v-show="screen==0">
                    <div class="issue">
                        <el-tabs v-model="languageTabsValue" type="card" closable @tab-remove="removeTab">
                            <el-tab-pane
                                    v-for="(item, index) in languageList"
                                    :key="item.name"
                                    :label="$t(item.label)"
                                    :name="item.name"
                            >
                                <div style="width: 100%;padding: 0 150px;box-sizing: border-box">
                                    <el-form ref="resultType" :model="resultForm.public" label-width="140px" >
                                        <!--资源类型  研究成果-->
                                        <el-form-item :label="$t('common.resourceTheResourceType')" required>
                                            <el-select style="width: 320px;" v-model="resultForm.public.resourceTypeSelectValue1" :placeholder="$t('common.resource')" @change="resourceType">
                                                <el-option
                                                        v-for="item in resultForm.public.resourceTypeSelect"
                                                        :label="$t(item.label)"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="resultForm.public.resourceTypeSelectValue2" :placeholder="$t('common.resourcePleaseSelectTheSecondaryType')" style="width: 320px;float: right;">
                                                <el-option
                                                        v-for="item in resultForm.public.resourceTypeSelectOption"
                                                        :label="item.label"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                    <el-form ref="resultForm" :model="resultForm[item.value]" label-width="140px" :rules="resultFormRules">
                                        <!--成果封面-->
                                        <el-form-item :label="$t('common.resourceResultsTheCover')">
                                            <el-upload
                                                    class="upload-demo"
                                                    action="/api/file/upload/attachment?module=BaseResearchResultInfoForm&attachmentBusinessType=base_research_result_info_cover"
                                                    :before-upload="beforeUploadCover"
                                                    :on-remove="(file, fileList) => {onRemove(file, fileList, 0,'coverFileMap')}"
                                                    :on-preview="(file, fileList) => {onPreview(file, fileList, 0,'coverFileMap')}"
                                                    list-type="picture"
                                                    :on-success="handleAvatarSuccess.bind(this,0,'coverFileMap')"
                                                    :limit="1"
                                                    :headers="myHeaders"
                                                    :file-list="fileList">
                                                <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
                                                <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceUploadJPGPNG')}}，{{$t('common.resourceFilesCannotExceed10Mb')}}，{{$t('common.resourceUploadOne')}}</div>
                                            </el-upload>
                                        </el-form-item>
                                        <!--名称-->
                                        <el-form-item :label="$t('common.resourceName')" prop="name">
                                            <el-input v-model="resultForm[item.value].name"
                                                      :placeholder="$t('common.resourcePleaseEnterTheName')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--所属单位-->
                                        <el-form-item :label="$t('common.resourceSubordinateUnits')" prop="affiliatedUnitName">
                                            <el-input v-model="resultForm[item.value].affiliatedUnitName"
                                                      :placeholder="$t('common.resourcePleaseEnterUnit')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--国家-->
                                        <el-form-item :label="$t('common.resourceCountries')"  prop="resourceCountrySelectValue2">
                                            <el-select style="width: 320px;" v-model="resultForm[item.value].resourceCountrySelectValue1" :placeholder="$t('common.resourcePleaseSelectContinent')" @change="resourceCountry">
                                                <el-option
                                                        v-for="item in resultForm[item.value].resourceCountrySelect"
                                                        :label="item.label"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="resultForm[item.value].resourceCountrySelectValue2" :placeholder="$t('common.resourcePleaseSelectCountry')"  style="width: 320px;float: right;">
                                                <el-option
                                                        v-for="item in resultForm[item.value].resourceCountrySelectValue1.data"
                                                        :label="item.label"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <!--联系人-->
                                        <el-form-item :label="$t('common.resourceTheContact')">
                                            <el-input v-model="resultForm[item.value].contactsName"
                                                      :placeholder="$t('common.resourcePleaseEnterTheContactName')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--联系电话-->
                                        <el-form-item :label="$t('common.resourceContactPhoneNumber')">
                                            <el-input v-model="resultForm[item.value].contactsNumber"
                                                      :placeholder="$t('common.resourcePleaseEnterYourContactNumber')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--摘要-->
                                        <el-form-item :label="$t('common.resourceDetailsAbstract')" prop="researchResultAbstract">
                                            <el-input
                                                    type="textarea"
                                                    :placeholder="$t('common.resourcePleaseEnterSummary')"
                                                    v-model="resultForm[item.value].researchResultAbstract"
                                                    maxlength="500"
                                                    show-word-limit
                                                    rows="6"
                                            >
                                            </el-input>
                                        </el-form-item>
                                        <!--目录-->
                                        <el-form-item :label="$t('common.resourceDetailsDirectory')" required>
                                            <el-upload
                                                    class="upload-demo"
                                                    action="/api/file/upload/attachment?module=BaseResearchResultInfoForm&attachmentBusinessType=base_research_result_info_catalog"
                                                    :before-upload="beforeUploadCatalog"
                                                    :on-remove="(file, fileList) => {onRemove(file, fileList, 0,'catalogFileMap')}"
                                                    :on-preview="(file, fileList) => {onPreview(file, fileList, 0,'catalogFileMap')}"
                                                    list-type="picture"
                                                    :on-success="handleAvatarSuccess.bind(this,0,'catalogFileMap')"
                                                    :limit="1"
                                                    :headers="myHeaders"
                                                    :file-list="fileList">
                                                <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
                                                <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceUploadJPGPNG')}}，{{$t('common.resourceFilesCannotExceed10Mb')}}，{{$t('common.resourceUploadOne')}}</div>
                                            </el-upload>
                                        </el-form-item>
                                        <!--附件-->
                                        <el-form-item :label="$t('common.resourceTheAttachment')" required>
                                            <el-upload
                                                    class="upload-demo"
                                                    action="/api/file/upload/attachment?module=BaseResearchResultInfoForm&attachmentBusinessType=base_research_result_info_file"
                                                    :before-upload="beforeUploadFile"
                                                    :on-remove="(file, fileList) => {onRemove(file, fileList, 0,'fileMap')}"
                                                    :on-preview="(file, fileList) => {onPreview(file, fileList, 0,'fileMap')}"
                                                    :on-success="handleAvatarSuccess.bind(this,0,'fileMap')"
                                                    :limit="1"
                                                    :headers="myHeaders"
                                                    :file-list="fileList">
                                                <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
                                                <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceUploadPDF')}}，{{$t('common.resourceFilesCannotExceed50Mb')}}</div>
                                            </el-upload>
                                        </el-form-item>
                                        <el-form-item style="text-align: center;">
                                            <el-button style="margin-right: 50px;" @click="toResource">{{$t('common.resourceCancel')}}</el-button>
                                            <el-button type="primary" @click="onSubmitResults('resultForm')">{{$t('common.resourceRelease')}}</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div v-show="screen==1">
                    <div class="issue">
                        <el-tabs v-model="languageTabsValue" type="card" closable @tab-remove="removeTab">
                            <el-tab-pane
                                    v-for="(item, index) in languageList"
                                    :key="item.name"
                                    :label="$t(item.label)"
                                    :name="item.name"
                            >
                                <div style="width: 100%;padding: 0 150px;box-sizing: border-box">
                                    <el-form ref="resourceType" :model="resultForm.public" label-width="140px" >
                                        <!--资源类型  调研资源-->
                                        <el-form-item :label="$t('common.resourceTheResourceType')" required>
                                        <el-select style="width: 320px;" v-model="resourceForm.public.resourceTypeSelectValue1" :placeholder="$t('common.resource')" @change="resourceType">
                                                <el-option
                                                        v-for="item in resourceForm.public.resourceTypeSelect"
                                                        :label="$t(item.label)"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="resourceForm.public.resourceTypeSelectValue2" :placeholder="$t('common.resourcePleaseSelectTheSecondaryType')" style="width: 320px;float: right;">
                                                <el-option
                                                        v-for="item in resourceForm.public.resourceTypeSelectOption"
                                                        :label="item.label"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                    <el-form ref="resourceForm" :model="resourceForm[item.value]"  label-width="140px"  :rules="resourceFormRules">
                                        <!--资源媒体-->
                                        <el-form-item :label="$t('common.resourceMediaResources')" >
                                            <el-select style="width: 100%;" v-model="resourceForm[item.value].resourceMediaSelectValue" :placeholder="$t('common.resourceThePicture')" @change="resourceType">
                                                <el-option
                                                        v-for="item in resourceForm[item.value].resourceMediaSelect"
                                                        :label="$t(item.label)"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                            <el-upload
                                                    v-show="resourceForm[item.value].resourceMediaSelectValue.value=='图片'||resourceForm[item.value].resourceMediaSelectValue.value=='图片+视频'"
                                                    class="upload-demo"
                                                    action="/api/file/upload/attachment?module=BaseResearchResourcesInfoForm&attachmentBusinessType=base_research_resource_info_file"
                                                    :before-upload="beforeUploadCover"
                                                    :on-remove="(file, fileList) => {onRemove(file, fileList, 1,'mediaFileMap')}"
                                                    :on-preview="(file, fileList) => {onPreview(file, fileList, 1,'mediaFileMap')}"
                                                    :on-success="handleAvatarSuccess.bind(this,1,'mediaFileMap')"
                                                    :limit="8"
                                                    :headers="myHeaders"
                                                    :file-list="fileList">
                                                <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
                                                <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceUploadJPGPNG')}}，{{$t('common.resourceFilesCannotExceed')}}10MB，{{$t('common.resourceUploadEight')}}</div>
                                            </el-upload>
                                            <!--视频-->
                                            <el-upload
                                                    v-show="resourceForm[item.value].resourceMediaSelectValue.value=='视频'||resourceForm[item.value].resourceMediaSelectValue.value=='图片+视频'"
                                                    class="upload-demo"
                                                    action="/api/resourceshare/baseResearchResourcesInfos/uploadVideo"
                                                    :before-upload="beforeUploadVideo"
                                                    :on-remove="(file, fileList) => {onPreview(file, fileList, 1,'videoFileMap')}"
                                                    :on-preview="(file, fileList) => {onPreview(file, fileList, 1,'videoFileMap')}"
                                                    :on-success="handleAvatarSuccessVideo.bind(this,1,'videoFileMap')"
                                                    :limit="1"
                                                    :headers="myHeaders"
                                                    :file-list="fileList"
                                                    :data="video"
                                                    name="layuiVideo">
                                                <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
                                                <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceUploadMp4')}}，{{$t('common.resourceFilesCannotExceed50Mb')}}，{{$t('common.resourceUploadOneVideo')}}</div>
                                            </el-upload>
                                        </el-form-item>
                                        <!--名称-->
                                        <el-form-item :label="$t('common.resourceName')" prop="name"
                                                      :rules="[{ required: true, message: $i18n.locale=='zh'?'请输入名称':'Please enter the name', trigger: 'blur' }]">
                                            <el-input v-model="resourceForm[item.value].name"
                                                      :placeholder="$t('common.resourcePleaseEnterTheName')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--所属单位-->
                                        <el-form-item :label="$t('common.resourceSubordinateUnits')" prop="affiliatedUnitName"
                                                      :rules="[{ required: true, message: $i18n.locale=='zh'?'请输入所属单位':'Please enter your affiliation', trigger: 'blur' }]">
                                            <el-input v-model="resourceForm[item.value].affiliatedUnitName"
                                                      :placeholder="$t('common.resourcePleaseEnterUnit')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--地址-->
                                        <el-form-item :label="$t('common.resourceAddress')" prop="address"
                                                      :rules="[{ required: true, message: $i18n.locale=='zh'?'请输入地址':'Please enter the address', trigger: 'blur' }]">
                                            <el-input v-model="resourceForm[item.value].address"
                                                      :placeholder="$t('common.resourcePleaseEnterUnit')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--国家-->
                                        <el-form-item :label="$t('common.resourceCountries')" prop="resourceCountrySelectValue2">
                                            <el-select style="width: 320px;" v-model="resourceForm[item.value].resourceCountrySelectValue1" :placeholder="$t('common.resourcePleaseSelectContinent')" @change="resourceCountry">
                                                <el-option
                                                        v-for="item in resourceForm[item.value].resourceCountrySelect"
                                                        :label="item.label"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="resourceForm[item.value].resourceCountrySelectValue2" :placeholder="$t('common.resourcePleaseSelectCountry')"  style="width: 320px;float: right;">
                                                <el-option
                                                        v-for="item in resourceForm[item.value].resourceCountrySelectValue1.data"
                                                        :label="item.label"
                                                        :value="item">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <!--对接方式-->
                                        <el-form-item :label="$t('common.resourceDockingWay')">
                                            <el-radio-group v-model="resourceForm.public.radioList">
                                                <el-radio :label="$t('common.resourceDockingOfTheUnit')"></el-radio>
                                                <el-radio :label="$t('common.resourceCooperationOrganizationDocking')"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <!--联系人-->
                                        <el-form-item :label="$t('common.resourceTheContact')">
                                            <el-input v-model="resourceForm[item.value].contactsName"
                                                      :placeholder="$t('common.resourcePleaseEnterTheContactName')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--联系电话-->
                                        <el-form-item :label="$t('common.resourceContactPhoneNumber')">
                                            <el-input v-model="resourceForm[item.value].contactsNumber"
                                                      :placeholder="$t('common.resourcePleaseEnterYourContactNumber')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--邮箱-->
                                        <el-form-item :label="$t('common.resourceEmail')">
                                            <el-input v-model="resourceForm[item.value].contactsEmail"
                                                      :placeholder="$t('common.resourcePleaseEnterYourContactNumber')"
                                            ></el-input>
                                        </el-form-item>
                                        <!--详情介绍-->
                                        <el-form-item :label="$t('common.resourceDetailsAreIntroduced')" required>
                                            <div style="width: 100%;border: 1px solid rgba(204, 204, 204, 1);">
                                                <div style="width: 80px;height: 400px;float: left;text-align: center;">
                                                    <span style="display: inline-block;margin-top: 150px">{{$t('common.resourceResourcesIsIntroduced')}}</span>
                                                </div>
                                                <div style="height: 100%;float: left;overflow: hidden;width: calc(100% - 81px);position: relative;">
                                                    <layui-inline-ue
                                                            label=""
                                                            :cssStyle="{'width':'100%','height':'100%'}"
                                                            @input="activityPreviewUe1"
                                                            :value="resourceForm.activityPreviewUe1"
                                                            ref="contentUe">
                                                    </layui-inline-ue>
                                                </div>
                                                <div style="clear: both"></div>
                                            </div>
                                            <div style="width: 100%;border: 1px solid rgba(204, 204, 204, 1);margin-top: 80px;">
                                                <div style="width: 80px;height: 400px;float: left;text-align: center;">
                                                    <span style="display: inline-block;margin-top: 150px">{{$t('common.resourceMattersNeedingAttention')}}</span>
                                                </div>
                                                <div style="height: 100%;float: left;overflow: hidden;width: calc(100% - 81px);position: relative;">
                                                    <layui-inline-ue
                                                            label=""
                                                            :cssStyle="{'width':'100%','height':'100%'}"
                                                            @input="activityPreviewUe2"
                                                            :value="resourceForm.activityPreviewUe2"
                                                            ref="contentUe">
                                                    </layui-inline-ue>
                                                </div>
                                                <div style="clear: both"></div>
                                            </div>
                                            <!--<div    v-for="(item,index) in "
                                                    style="width: 100%;height: 200px;border: 1px solid rgba(204, 204, 204, 1);"
                                                    :style="{marginTop: index==0?'0':'20px'}"
                                            >
                                                <div style="width: 80px;height: 200px;float: left;border-right: 1px solid rgba(204, 204, 204, 1);line-height: 100%;text-align: center;">
                                                    <span style="line-height: 200px">注意事项</span>
                                                </div>
                                                <div style="height: 100%;float: left;overflow: hidden;width: calc(50% - 81px);">

                                                </div>
                                                <div style="clear: both"></div>
                                            </div>-->
                                        </el-form-item>
                                        <!--附件-->
                                        <el-form-item :label="$t('common.resourceTheAttachment')">
                                            <el-upload
                                                    class="upload-demo"
                                                    action="/api/file/upload/attachment?module=BaseResearchResourcesInfoForm&attachmentBusinessType=base_research_resource_info_file"
                                                    :before-upload="beforeUploadFile"
                                                    :on-remove="(file, fileList) => {onPreview(file, fileList, 1,'fileMap')}"
                                                    :on-preview="(file, fileList) => {onPreview(file, fileList, 1,'fileMap')}"
                                                    :on-success="handleAvatarSuccess.bind(this,1,'fileMap')"
                                                    :limit="1"
                                                    :headers="myHeaders"
                                                    :file-list="fileList">
                                                <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
                                                <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceUploadPDF')}}，{{$t('common.resourceFilesCannotExceed50Mb')}}</div>
                                            </el-upload>
                                        </el-form-item>
                                        <el-form-item style="text-align: center;">
                                            <el-button style="margin-right: 50px;" @click="toResource">{{$t('common.resourceCancel')}}</el-button>
                                            <el-button type="primary" @click="onSubmitResource('resourceForm')">{{$t('common.resourceRelease')}}</el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
        <!--添加语言版本-->
        <el-dialog
                :title="$t('common.resourceLanguageVersion')"
                :visible.sync="addLanguageDialog"
                width="30%">
            <div style="width: 100%;">
                <el-select v-model="addLanguageValue" style="width: 70%" :placeholder="$t('common.resourcePleaseSelect')">
                    <el-option

                            v-for="(item,index) in addLanguageOptions"
                            :label="$t(item.label)"
                            :value="item"
                            v-show="!item.added">
                    </el-option>
                </el-select>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="languageClose">{{$t('common.cancel')}}</el-button>
                <el-button type="primary" @click="addTab">{{$t('common.submit')}}</el-button>
            </span>
        </el-dialog>
        <!--预览-->
        <el-dialog
                :visible.sync="dialogVisible"
                width="60%"
                height="80%"
                :before-close="beforeClose">
            <div>
                <!--                <img :src="'api/file/pub/'+ dialogVisibleImg" alt="">-->
                <img :src="'api/file/pub/'+ dialogVisibleImg" alt="" style="width: 100%" v-show="dialogVisibleImg!=''">
                <video :src="'api/file/pub/'+ dialogVisibleVideo" style="width: 100%" v-show="dialogVisibleVideo!=''"></video>
                <iframe :src="'api/file/pub/'+ dialogVisiblePdf" frameborder="0" v-show="dialogVisiblePdf!=''" style="width: 100%;height: 800px;"></iframe>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import {getDicts} from '@/api/dict';
    import { getToken ,resetToken} from '@/utils/auth'

    import LayuiInlineUe from '@/components/LayuiInlineUe'

    import { getTreeByLanguagePortal } from "@/api/operation/baseCityInformationDict";
    import { saveOrUpdateBaseResearchResultInfos } from "@/api/research/baseResearchResultEntity";
    import { saveOrUpdateBaseResearchResourcesInfos } from "@/api/research/resource/baseResearchResourcesEntity";

    export default {
        name:"ResourceSharingResultsIssue",
        extends: Base,
        components:{ LayuiInlineUe },
        data(){
            return{
                // 发布资源切换
                screen:0,
                // 上传视频附属data
                video:{dir:'media'},
                // 上传文件预览
                dialogVisible:false,
                dialogVisibleImg:'',
                dialogVisibleVideo:'',
                dialogVisiblePdf:'',
                //表单头信息
                myHeaders: {Authorization: ('Bearer ' +getToken())},
                fileList:[],
                // 已添加语言版本
                languageTabsValue: '1',
                languageList:[],
                tabIndex: 0,
                // 可添加语言版本
                addLanguageDialog:false,
                addLanguageValue: '',
                addLanguageOptions: [
                    {
                        label: "common.Chinese",
                        name: '1',
                        value: 'ZH',
                        added: false,
                    },
                    {
                        label: 'common.English',
                        name: '2',
                        value: 'EN',
                        added: false,
                    },
                ],
                // 语言字典列表
                languageDataList: [],
                // 表单数据对象
                resultForm:{
                    public:{
                        resourceTypeSelectValue1:'',
                        resourceTypeSelectValue2:'',
                        resourceTypeSelectOption:[],
                        resourceTypeSelect:[
                            {
                                label:'common.resource',
                                value:'研究成果',
                            },
                            {
                                label:'common.researchResource',
                                value:'调研资源',
                            },
                        ],

                        fileMap: new Map(),
                        coverFileMap: new Map(),
                        catalogFileMap: new Map(),
                    },
                    template:{
                        language:"EN",
                        reserveOne:0, // 资源类型
                        researchResultType:'',
                        name:'',
                        affiliatedUnitName:'',
                        country:'',//国家
                        continent:'',//大洲
                        contactsName:'',
                        contactsNumber:'',
                        researchResultAbstract:'',

                        resourceCountrySelectValue1:'',
                        resourceCountrySelectValue2:'',
                        resourceCountrySelect:[],

                        fileMap: '',
                        coverFileMap: '',
                        catalogFileMap: '',
                    },
                },
                resourceForm:{
                    public:{
                        resourceTypeSelectValue1:'',
                        resourceTypeSelectValue2:'',
                        resourceTypeSelectOption:[],
                        resourceTypeSelect:[
                            {
                                label:'common.resource',
                                value:'研究成果',
                            },
                            {
                                label:'common.researchResource',
                                value:'调研资源',
                            },
                        ],

                        radio: '1',
                        radioList:[],

                        mediaFileMap: new Map(),
                        videoFileMap: new Map(),
                        fileMap: new Map(),
                    },
                    template:{
                        language:"EN",
                        reserveOne:1, // 资源类型
                        researchResourcesType:'',
                        name:'',
                        address:'',
                        affiliatedUnitName:'',
                        country:'',//国家
                        continent:'',//大洲
                        contactsName:'',
                        contactsNumber:'',
                        contactsEmail: '',
                        researchResultAbstract:'',
                        dockingMode:'',

                        resourceMediaSelectValue:'',
                        resourceMediaSelect:[
                            {
                                label:'common.resourceResearchResourceImage',
                                value:'图片',
                            },
                            {
                                label:'common.resourceResearchResourceVideo',
                                value:'视频',
                            },
                            {
                                label:'common.resourceResearchResourceImageAndVideo',
                                value:'图片+视频',
                            },
                        ],

                        resourceCountrySelectValue1:'',
                        resourceCountrySelectValue2:'',
                        resourceCountrySelect:[],

                        mediaFileMap: '',
                        videoFileMap: '',
                        fileMap: '',
                    },
                },
            }
        },
        mounted() {
            this.initData();
        },
        watch:{
            '$i18n.locale'(){
                this.initData();
                // this.forceUpdate()
            },
            'screen'(){
                this.$refs.resultForm[0].resetFields()
                this.$refs.resourceForm[0].resetFields()
            }
        },
        computed:{
            resultFormRules(){
                return{
                    // resultTheResourceType: [
                    //     { required: true, message: this.$i18n.locale=='zh'?'请选择资源类型':'Select the resource type', trigger: 'change' },
                    // ],
                    name: [
                        { required: true, message: this.$i18n.locale=='zh'?'请输入名称':'Please enter the name', trigger: 'blur' },
                    ],
                    affiliatedUnitName: [
                        { required: true, message: this.$i18n.locale=='zh'?'请输入所属单位':'Please enter your affiliation', trigger: 'blur' },
                    ],
                    resourceCountrySelectValue2: [
                        { required: true, message: this.$i18n.locale=='zh'?'请选择国家':'Please select country', trigger: 'change' },
                    ],
                    researchResultAbstract: [
                        { required: true, message: this.$i18n.locale=='zh'?'请输入摘要':'Please enter summary', trigger: 'blur' },
                    ],
                    // resultDetailsDirectory: [
                    //     { required: true, message: this.$i18n.locale=='zh'?'请上传目录':'Please upload the directory', trigger: 'blur' },
                    // ],
                    // resultTheAttachment: [
                    //     { required: true, message: this.$i18n.locale=='zh'?'请上传附件':'Please upload the attachment.', trigger: 'blur' },
                    // ],
                }
            },
            resourceFormRules(){
                return{
                    // resourceTheResourceType: [
                    //     { required: true, message: this.$i18n.locale=='zh'?'请输入活动名称':'Select the resource type', trigger: 'blur' },
                    // ],
                    name: [
                        { required: true, message: this.$i18n.locale=='zh'?'请输入名称':'Please enter the name', trigger: 'blur' },
                    ],
                    affiliatedUnitName: [
                        { required: true, message: this.$i18n.locale=='zh'?'请输入所属单位':'Please enter your affiliation', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: this.$i18n.locale=='zh'?'请输入地址':'Please enter the address', trigger: 'blur' },
                    ],
                    resourceCountrySelectValue2: [
                        { required: true, message: this.$i18n.locale=='zh'?'请选择国家':'Please select country', trigger: 'change' },
                    ],
                    resourceDetailsAreIntroduced: [
                        { required: true, message: this.$i18n.locale=='zh'?'请输入详情介绍':'Please enter details', trigger: 'blur' },
                    ],
                }
            },
        },
        methods:{
            async initData(){
                await this.getData();
                let flag = false
                this.languageList.forEach((i)=>{
                    if(i.value=='ZH'){
                        flag = true;
                    }
                })
                if(flag==false){
                    this.addLanguageValue = {
                        label: "common.Chinese",
                        name: '1',
                        value: 'ZH',
                        added: false,
                    };
                    this.addTab();
                }
            },
            // 获取数据
            async getData(){
                const that = this;
                that.resultForm.public.resourceCountrySelectValue1 = '';
                that.resultForm.public.resourceCountrySelectValue2 = '';
                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                    await getDicts(
                        "RESEARCH_RESULT_TYPE_DICT,RESEARCH_RESOURCE_TYPE_DICT,DOCKING_MODE_DICTf"
                    ).then(result => {
                        if (result.data) {
                            that.resultForm.public.resourceTypeSelectOption = result.data[0];
                            that.resourceForm.public.resourceTypeSelectOption = result.data[1];
                            that.resourceForm.public.radioList = result.data[2];
                        }
                    })
                    await getTreeByLanguagePortal('ZH').then(result => {
                        if (result.data) {
                            let values = Object.values(result.data);
                            that.resultForm.template.resourceCountrySelect = values;
                            that.resourceForm.template.resourceCountrySelect = values;
                        }
                    })
                }else if (this.$i18n.locale.toUpperCase() == 'EN'){
                    await getDicts(
                        "RESEARCH_RESULT_TYPE_DICT_EN,RESEARCH_RESOURCE_TYPE_DICT_EN,DOCKING_MODE_DICT_EN"
                    ).then(result => {
                        if (result.data) {
                            that.resultForm.public.resourceTypeSelectOption = result.data[0];
                            that.resourceForm.public.resourceTypeSelectOption = result.data[1];
                            that.resourceForm.public.radioList = result.data[2];
                        }
                    })
                    await getTreeByLanguagePortal('EN').then(result => {
                        if (result.data) {
                            let values = Object.values(result.data);
                            that.resultForm.template.resourceCountrySelect = values;
                            that.resourceForm.template.resourceCountrySelect = values;
                        }
                    })
                }
                await getDicts(
                    "LANGUAGE_DICT"
                ).then(result => {
                    if (result.data) {
                        that.languageDataList = result.data[0] || [];
                    }
                })
            },
            // 添加语言版本
            addTabDialog(targetName) {
                const that = this;
                that.addLanguageDialog = true;
            },
            languageClose(){
                const that = this;
                that.addLanguageDialog = false;
                that.addLanguageValue = "";
            },
            addTab(targetName) {
                const that = this;
                if(that.addLanguageValue){
                    let newTabName = ++this.tabIndex + '';
                    that.languageList.push({
                        label: that.addLanguageValue.label,
                        name: that.addLanguageValue.name,
                        value: that.addLanguageValue.value,
                    });
                    that.addLanguageOptions.forEach((i)=>{
                        if(i.value == that.addLanguageValue.value){
                            i.added = true;
                        }
                    });
                    let resultForm = JSON.parse(JSON.stringify(that.resultForm.template));
                    let resourceForm = JSON.parse(JSON.stringify(that.resourceForm.template));
                    that.$set(that.resultForm,that.addLanguageValue.value,resultForm)
                    that.$set(that.resourceForm,that.addLanguageValue.value,resourceForm)
                    that.addLanguageValue = "";
                    that.addLanguageDialog = false;
                    that.languageTabsValue = newTabName;
                }else{
                    that.languageClose()
                }
            },
            removeTab(targetName) {
                //****
            },
            // 发布资源切换
            resourceType(data){
                let that = this;
                if (data.value === 'Research results' || data.value === '研究成果'){
                    if(that.screen == 1){
                        that.screen = 0;
                        that.resultForm.public.resourceTypeSelectValue1 = {
                            label:'common.resource',
                            value:'研究成果',
                        };
                        that.resourceForm.public.resourceTypeSelectValue1 = '';
                    }
                }else{
                    if(that.screen == 0){
                        that.screen = 1;
                        that.resultForm.public.resourceTypeSelectValue1 = '';
                        that.resourceForm.public.resourceTypeSelectValue1 = {
                            label:'common.researchResource',
                            value:'调研资源',
                        };
                    }
                }
            },
            //返回首页
            toResource(){
                this.toView('resourceSharing')
            },
            toView(router, json) {
                this.$router.push({ name: router, params: {key:json} });
            },

            // 上传文件验证
            beforeUploadCover(file) {
                var FileExt = file.name.replace(/.+\./, "");
                if (['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1) {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            type: 'warning',
                            message: '请上传jpg,png的图片！'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: 'Please upload the picture of jpg, png!'
                        });
                    }
                    return false;
                }
                this.isLt2k = file.size / 1024 / 1024 < 10 ? '1' : '0';
                if (this.isLt2k === '0') {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            message: '上传文件大小不能超过10M!',
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: 'Upload file size cannot exceed 10M!',
                            type: 'error'
                        });
                    }
                    return false;
                }
            },
            beforeUploadCatalog(file) {
                var FileExt = file.name.replace(/.+\./, "");
                if (['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1) {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            type: 'warning',
                            message: '请上传jpg,png的图片！'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: 'Please upload the picture of jpg, png!'
                        });
                    }
                    return false;
                }
                this.isLt2k = file.size / 1024 / 1024 < 10 ? '1' : '0';
                if (this.isLt2k === '0') {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            message: '上传文件大小不能超过10M!',
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: 'Upload file size cannot exceed 10M!',
                            type: 'error'
                        });
                    }
                    return false;
                }
            },
            beforeUploadFile(file) {
                var FileExt = file.name.replace(/.+\./, "");
                if (['pdf'].indexOf(FileExt.toLowerCase()) === -1) {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            type: 'warning',
                            message: '请上传pdf的附件！'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: 'Please upload the attachment of PDF!'
                        });
                    }
                    return false;
                }
                this.isLt2k = file.size / 1024 / 1024 < 50 ? '1' : '0';
                if (this.isLt2k === '0') {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            message: '上传文件大小不能超过50M!',
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: 'Upload file size cannot exceed 50M!',
                            type: 'error'
                        });
                    }
                    return false;
                }
            },
            beforeUploadVideo(file) {
                const isLt200M = file.size / 1024 / 1024  < 50;
                if (['video/mp4'].indexOf(file.type) == -1) {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            type: 'warning',
                            message: '请上传mp4的视频！'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: 'Please upload the Video of MP4!'
                        });
                    }
                    return false;
                }
                if (!isLt200M) {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            message: '上传文件大小不能超过200M!',
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: 'Upload file size cannot exceed 200M!',
                            type: 'error'
                        });
                    }
                    return false;
                }
            },

            onRemove(file,fileList,status,ele) {
                let parameter = this.languageList[this.languageTabsValue-1].value
                if(status==0){
                    // this.resultForm.public[ele].delete(this.languageList[this.languageTabsValue-1].value)
                    this.resultForm[parameter][ele] = '';
                }else if(status==1){
                    // this.resourceForm.public[ele].delete(this.languageList[this.languageTabsValue-1].value)
                    this.resourceForm[parameter][ele] = '';
                }
            },
            handleAvatarSuccess(status,ele,res,file){
                let parameter = this.languageList[this.languageTabsValue-1].value
                if(status==0){
                    // this.resultForm.public[ele].set(this.languageList[this.languageTabsValue-1].value,res.data.attachmentId)
                    this.resultForm[parameter][ele] = res.data.attachmentId
                }else if(status==1){
                    // this.resourceForm.public[ele].set(this.languageList[this.languageTabsValue-1].value,res.data.attachmentId)
                    this.resourceForm[parameter][ele] = res.data.attachmentId
                }
            },
            handleAvatarSuccessVideo(status,ele,res,file){
                // this.resourceForm.public[ele].set(this.languageList[this.languageTabsValue-1].value,res.url);
                let parameter = this.languageList[this.languageTabsValue-1].value
                this.resourceForm[parameter][ele] = res.url
            },

            onPreview(file,fileList,status,ele){
                console.log(ele)
                console.log(file)
                this.dialogVisible = true;
                if(ele=='coverFileMap'||ele=='mediaFileMap'){
                    this.dialogVisibleImg = file.response.data.path;
                }else if(ele=='catalogFileMap'){
                    this.dialogVisibleImg = file.response.data.path;
                }else if(ele=='fileMap'){
                    this.dialogVisiblePdf = file.response.data.path;
                }else if(ele=='videoFileMap'){
                    this.dialogVisibleVideo = file.response.data.path;
                }
            },
            beforeClose(done){
                this.dialogVisibleImg = '';
                this.dialogVisibleVideo = '';
                this.dialogVisiblePdf = '';
                done()
            },

            forceUpdate(e){
                this.$forceUpdate();
            },

            //提交表单
            onSubmitResults(formName) {
                const that = this;

                that.$refs[formName][0].validate((valid) => {
                    if (valid) {
                        //选择器
                        let resultForm = {
                            language:'',
                            reserveOne:0, // 资源类型
                            researchResultType:'',
                            name:'',
                            affiliatedUnitName:'',
                            country:'',//国家
                            continent:'',//大洲
                            contactsName:'',
                            contactsNumber:'',
                            researchResultAbstract:'',
                        }
                        let data = []
                        that.languageList.forEach((i)=>{
                            resultForm.language = i.value;
                            resultForm.researchResultType = that.resultForm.public.resourceTypeSelectValue2.value;
                            resultForm.continent = that.resultForm[i.value].resourceCountrySelectValue1.value;
                            resultForm.country = that.resultForm[i.value].resourceCountrySelectValue2.value;
                            data.push(resultForm)
                            if(that.resultForm[i.value].fileMap){
                                this.resultForm.public.fileMap.set(i.value,that.resultForm[i.value].fileMap)
                            }
                            if(that.resultForm[i.value].coverFileMap){
                                this.resultForm.public.coverFileMap.set(i.value,that.resultForm[i.value].coverFileMap)
                            }
                            if(that.resultForm[i.value].catalogFileMap){
                                this.resultForm.public.catalogFileMap.set(i.value,that.resultForm[i.value].catalogFileMap)
                            }
                        });
                        let token = getToken();
                        this.submitHandler((token) => {
                            saveOrUpdateBaseResearchResultInfos(
                                JSON.stringify(data),
                                JSON.stringify(that.resultForm.public.fileMap),
                                JSON.stringify(that.resultForm.public.coverFileMap),
                                JSON.stringify(that.resultForm.public.catalogFileMap),
                                token
                            ).then(result => {
                                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                                    this.$message({
                                        message: '发布成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: 'Release Success',
                                        type: 'success'
                                    });
                                }
                                this.toResource()
                            }).catch((error) => {
                                this.resetToken();
                                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                                    this.$message({
                                        message: '发布失败',
                                        type: 'error'
                                    });
                                } else {
                                    this.$message({
                                        message: 'Release Error',
                                        type: 'error'
                                    });
                                }
                                this.toResource()
                            });
                        });
                    } else {
                        if (this.$i18n.locale.toUpperCase() == 'ZH') {
                            this.$message({
                                message: '必填项未填！',
                                type: 'error'
                            });
                        } else {
                            this.$message({
                                message: 'The required fields are not filled in!',
                                type: 'error'
                            });
                        }
                    }
                });
            },
            onSubmitResource(formName){
                const that = this;
                that.$refs[formName][0].validate((valid) => {
                    if (valid) {
                        //选择器
                        let resourceForm = {
                            language:'',
                            reserveOne:1, // 资源类型
                            researchResourcesType:'',
                            name:'',
                            address:'',
                            affiliatedUnitName:'',
                            country:'',//国家
                            continent:'',//大洲
                            contactsName:'',
                            contactsNumber:'',
                            contactsEmail: '',
                            researchResultAbstract:'',
                            dockingMode:'',
                        }
                        let data = []
                        that.languageList.forEach((i)=>{
                            resourceForm.language = i.value;
                            resourceForm.researchResourcesType = that.resourceForm.public.resourceTypeSelectValue2.value;
                            resourceForm.continent = that.resourceForm[i.value].resourceCountrySelectValue1.value;
                            resourceForm.country = that.resourceForm[i.value].resourceCountrySelectValue2.value;
                            if(that.resourceForm.public.radioList.length!=0&&that.resourceForm.public.radioList.length!=undefined){
                                if(that.resourceForm.public.radio==that.resourceForm.public.radioList[0].label){
                                    that.resourceForm[i.value].dockingMode = that.resourceForm.public.radioList[0].value
                                }else if(that.resourceForm.public.radio==that.resourceForm.public.radioList[1].label){
                                    that.resourceForm[i.value].dockingMode = that.resourceForm.public.radioList[1].value
                                }
                            }
                            data.push(resourceForm)
                            if(that.resourceForm[i.value].mediaFileMap){
                                this.resourceForm.public.mediaFileMap.set(i.value,that.resourceForm[i.value].mediaFileMap)
                            }
                            if(that.resourceForm[i.value].videoFileMap){
                                this.resourceForm.public.videoFileMap.set(i.value,that.resourceForm[i.value].videoFileMap)
                            }
                            if(that.resourceForm[i.value].fileMap){
                                this.resourceForm.public.fileMap.set(i.value,that.resourceForm[i.value].fileMap)
                            }
                        });

                        let token = getToken();
                        this.submitHandler((token) => {
                            saveOrUpdateBaseResearchResourcesInfos(
                                JSON.stringify(data),
                                JSON.stringify(that.resourceForm.public.fileMap),
                                JSON.stringify(that.resourceForm.public.mediaFileMap),
                                JSON.stringify(that.resourceForm.public.videoFileMap),
                                token
                            ).then(result => {
                                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                                    this.$message({
                                        message: '发布成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: 'Release Success!',
                                        type: 'success'
                                    });
                                }
                                this.toResource()
                            }).catch((error) => {
                                this.resetToken();
                                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                                    this.$message({
                                        message: '发布失败',
                                        type: 'error'
                                    });
                                } else {
                                    this.$message({
                                        message: 'Release Error',
                                        type: 'error'
                                    });
                                }
                                this.toResource()
                            });
                        });
                    } else {
                        if (this.$i18n.locale.toUpperCase() == 'ZH') {
                            this.$message({
                                message: '必填项未填！',
                                type: 'error'
                            });
                        } else {
                            this.$message({
                                message: 'The required fields are not filled in!',
                                type: 'error'
                            });
                        }
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin:0 20px;
    }
    .content{
        width: 100%;
        padding: 20px 10px;
        box-sizing: border-box;
    }
    .content .addLanguage{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #666666;
    }
    .content .issue{
        margin-top: 15px;
    }
</style>