eta_front/src/views/system_manage/etaBaseConfig.vue

<template>
    <div class="eta-base-config">
        <div class="nav-type-box">
            <span :class="[sectionType===1?'active':'']" @click="sectionType=1">{{$t('SystemManage.BaseConfig.tab01')}}</span>
            <span :class="[sectionType===2?'active':'']" @click="sectionType=2" v-if="isShowSource">{{$t('SystemManage.BaseConfig.tab02')}}</span>
        </div>
        <!-- 通用设置 -->
        <template v-if="sectionType==1">
        <el-form  
            :model="formData" 
            :rules="rules" 
            label-position="top" 
            class="base-config-form"
            label-width="120px" 
            ref="baseConfigForm"
        >
            <div class="part-type-box" style="margin-bottom:40px">
                <el-button v-if="isShowLoginConfig" type="primary" :plain="partType===1?false:true" @click="partType=1" :style="{border:'none',color:partType==1?'#fff':'#333'}">{{$t('SystemManage.BaseConfig.sub_tab01')}}</el-button>
                <el-button type="primary" :plain="partType===2?false:true" @click="partType=2" :style="{border:'none',color:partType==2?'#fff':'#333'}">{{$t('SystemManage.BaseConfig.sub_tab02')}}</el-button>
                <el-button type="primary" :plain="partType===3?false:true" v-if="isShowPPT||isShowEnPPT" @click="partType=3" :style="{border:'none',color:partType==3?'#fff':'#333'}">{{$t('SystemManage.BaseConfig.sub_tab03')}}</el-button>
                <div class="btn-wrap" style="text-align: center;float:right">
                    <el-button type="primary" plain style="width:120px;" @click="cancel">{{$t('Dialog.cancel_btn')}}</el-button>
                    <el-button type="primary"  style="margin-left:20px;width:120px;" @click="saveBaseConfig">{{$t('Dialog.confirm_save_btn')}}</el-button>
                </div>
            </div>
            <div class="scroll-cont">
                <!-- 登录设置模块 -->
                <div class="part" v-show="partType===1&&isShowLoginConfig">
                    <div class="side">
                        <!-- <el-form-item label="国内短信模板" prop="LoginSmsTpId" >
                            <div class="form-item-type-two sms-type">
                                <el-input type="text" v-model.trim="formData.LoginSmsTpId" placeholder="请输入国内短信模板ID" style="width: calc(50% - 10px);">
                                    <template slot="suffix">
                                        <el-tooltip content="登陆系统或找回密码或验证身份" placement="top">
                                            <div class="input-suffix">
                                                <img src="~@/assets/img/icons/warn-circle-gray.png" />
                                            </div>
                                        </el-tooltip>
                                    </template>
                                </el-input>
                                <el-input type="text" v-model.trim="formData.SmsJhgnAppKey" placeholder="请输入国内短信模板appkey" style="width: calc(50% - 10px);" />
                            </div>
                        </el-form-item>
                        <el-form-item label="国外短信模板" prop="LoginSmsGjTpId" >
                            <div class="form-item-type-two sms-type">
                                <el-input type="text" v-model.trim="formData.LoginSmsGjTpId" placeholder="请输入国外短信模板ID" style="width: calc(50% - 10px);">
                                    <template slot="suffix">
                                        <el-tooltip content="登陆系统或找回密码或验证身份" placement="top">
                                            <div class="input-suffix">
                                                <img src="~@/assets/img/icons/warn-circle-gray.png" />
                                            </div>
                                        </el-tooltip>
                                    </template>
                                </el-input>
                                <el-input type="text" v-model.trim="formData.SmsJhgjAppKey" placeholder="请输入国外短信模板appkey" style="width: calc(50% - 10px);" />
                            </div>
                        </el-form-item> -->
                        <el-form-item :label="$t('SystemManage.BaseConfig.email_tem')" prop="LoginEmailTemplateSubject" >
                            <div class="form-item-type-two">
                                <el-input type="text" v-model="formData.LoginEmailTemplateSubject" :placeholder="$t('SystemManage.BaseConfig.email_placeholder')" >
                                    <template slot="suffix">
                                            <el-tooltip :content="$t('SystemManage.BaseConfig.email_tips')" placement="top">
                                        <div class="input-suffix">
                                            <img src="~@/assets/img/icons/warn-circle-gray.png" />
                                        </div>
                                    </el-tooltip>
                                    </template>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item prop="LoginEmailTemplateContent" >
                            <froala id="email-content-editor"
                                ref="emailContentEditor" 
                                tag="textarea" 
                                :config="{...disclaimerConfig,...emailEditorConfig}" v-model="formData.LoginEmailTemplateContent">
                            </froala>
                            <ConfigAnnotation picName="emailContentTemplate" @showImage="previewImage" picHintText="" :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                        </el-form-item>
                    </div>
                    <div class="side">
                        <el-form-item :label="$t('SystemManage.BaseConfig.login_info')" prop="ICPLicense">
                            <el-input type="text" v-model="formData.ICPLicense" :placeholder="$t('SystemManage.BaseConfig.login_info_pld')" />
                            <ConfigAnnotation picHintText="" picName="ICPLicense" @showImage="previewImage"/>
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.login_title')" prop="ETATitle">
                            <el-input type="text" v-model="formData.ETATitle" placeholder="$t('SystemManage.BaseConfig.login_title_pld')" />
                            <ConfigAnnotation picHintText="" picName="ETATitle" @showImage="previewImage"/>
                        </el-form-item>
                        <!-- <el-form-item :label="login_name" prop="TabName">
                            <el-input type="text" v-model="formData.TabName" placeholder="$t('SystemManage.BaseConfig.login_name_pld')" />
                            <ConfigAnnotation picHintText="" picName="TabName" @showImage="previewImage"/>
                        </el-form-item> -->
                        <div class="inline-form-item-box" v-if="permissionBtn.isShowBtn('baseConfigPermission','etaBaseConfig_login_websiteName_pc') ||
                            permissionBtn.isShowBtn('baseConfigPermission','etaBaseConfig_login_websiteName_mobile')">
                            <div class="line-form-item-name">{{$t('SystemManage.BaseConfig.website_name')}}</div>
                            <div class="line-form-item">
                                <el-form-item :label="$t('SystemManage.BaseConfig.pc')" prop="TabName"
                                v-permission="permissionBtn.baseConfigPermission.etaBaseConfig_login_websiteName_pc">
                                    <el-input type="text" v-model="formData.TabName" :placeholder="$t('SystemManage.BaseConfig.pc_website_title_Tip')" />
                                    <ConfigAnnotation picHintText="" picName="TabName" @showImage="previewImage"
                                     :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                                </el-form-item>
                                <el-form-item :label="$t('SystemManage.BaseConfig.mobile')" prop="TabNameMobile"
                                v-permission="permissionBtn.baseConfigPermission.etaBaseConfig_login_websiteName_mobile">
                                    <el-input type="text" v-model="formData.TabNameMobile" :placeholder="$t('SystemManage.BaseConfig.mobile_website_title_Tip')" />
                                    <ConfigAnnotation picHintText="" picName="TabNameMobile" @showImage="previewImage"
                                     :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div class="side">
                        <div class="inline-form-item-box"  v-if="permissionBtn.isShowBtn('baseConfigPermission','etaBaseConfig_login_systemLogo_pc') ||
                            permissionBtn.isShowBtn('baseConfigPermission','etaBaseConfig_login_systemLogo_mobile')">
                            <div class="line-form-item-name">{{ $t('SystemManage.BaseConfig.system_logo') }}</div>
                            <div class="line-form-item-name" style="line-height: 30px;" v-permission="permissionBtn.baseConfigPermission.etaBaseConfig_login_systemLogo_pc">{{ $t('SystemManage.BaseConfig.pc') }}</div>
                            <div class="line-form-item" v-permission="permissionBtn.baseConfigPermission.etaBaseConfig_login_systemLogo_pc">
                                <el-form-item :label="`${$t('SystemManage.BaseConfig.chinese_version')}（${$t('SystemManage.BaseConfig.recommended_ratio')}）`" prop="LogoCN">
                                    <ImgUpload 
                                    id="logo-image"
                                    :imgUrl="formData.LogoCN"
                                    :text="$t('SystemManage.BaseConfig.upload_image_tip')"
                                    @showImage="showImage"
                                    @upload="(file)=>handleUploadImage(file,'LogoCN')"
                                    @remove="deleteFormImg('LogoCN')"
                                    />
                                    <ConfigAnnotation picHintText="" picName="LogoCN" @showImage="previewImage" :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                                </el-form-item>
                                <el-form-item :label="`${$t('SystemManage.BaseConfig.english_version')}（${$t('SystemManage.BaseConfig.recommended_ratio')}）`" prop="LogoEN">
                                    <ImgUpload 
                                        id="logo-image"
                                        :imgUrl="formData.LogoEN"
                                        :text="$t('SystemManage.BaseConfig.upload_image_tip')"
                                        @showImage="showImage"
                                        @upload="(file)=>handleUploadImage(file,'LogoEN')"
                                        @remove="deleteFormImg('LogoEN')"
                                    />
                                    <ConfigAnnotation picHintText="" picName="LogoEN" @showImage="previewImage" :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                                </el-form-item>
                            </div>
                            <div class="line-form-item" v-permission="permissionBtn.baseConfigPermission.etaBaseConfig_login_systemLogo_mobile">
                                <el-form-item :label="$t('SystemManage.BaseConfig.mobile')" prop="LogoMobile" style="width: 50%;">
                                    <ImgUpload 
                                    id="logo-image"
                                    :imgUrl="formData.LogoMobile"
                                    :text="$t('SystemManage.BaseConfig.upload_image_tip')"
                                    @showImage="showImage"
                                    @upload="(file)=>handleUploadImage(file,'LogoMobile')"
                                    @remove="deleteFormImg('LogoMobile')"
                                    />
                                    <ConfigAnnotation picHintText="" picName="LogoMobile" @showImage="previewImage" :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                                </el-form-item>
                                <div style="width: 50%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 研报设置 -->
                <div class="part" v-show="partType===2">
                    <div class="side">
                        <el-form-item :label="$t('SystemManage.BaseConfig.company_name')" prop="CompanyName">
                            <el-input type="text" v-model="formData.CompanyName" :placeholder="$t('SystemManage.BaseConfig.company_name_placeholder')" />
                            <ConfigAnnotation picHintText="" :buttonText="$t('SystemManage.BaseConfig.view_example_text')" picName="CompanyName" @showImage="previewImage"/>
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.compay_mark')" prop="CompanyWatermark" class="watermark">
                            <ImgUpload 
                                :imgUrl="formData.CompanyWatermark"
                                @showImage="showImage"
                                @upload="(file)=>handleUploadImage(file,'CompanyWatermark')"
                                @remove="deleteFormImg('CompanyWatermark')"
                                />
                            <!-- 后面可能会有新的选项 -->
                            <div style="position: absolute;top: -40px;left: 140px;display:flex;gap:0 20px">
                                <el-checkbox-group v-if="isShowYBChart"
                                    v-model="checkList" >
                                    <el-checkbox label="研报图表">{{$t('SystemManage.BaseConfig.report_chart')}}</el-checkbox>
                                </el-checkbox-group>
                                <div v-if="isShowYBShare">
                                    <el-checkbox label="研报分享" v-model="formData.WatermarkReport">{{$t('SystemManage.BaseConfig.report_share')}}</el-checkbox>
                                    <el-tooltip 
                                        effect="dark" 
                                        :content="$t('SystemManage.BaseConfig.report_share_tips')" 
                                        placement="top"
                                    >
                                        <i class="el-icon-warning"></i>
                                    </el-tooltip>
                                </div>
                                
                            </div>
                            <ConfigAnnotation :picHintText="$t('SystemManage.BaseConfig.upload_format')" :buttonText="$t('SystemManage.BaseConfig.view_example_text')" picName="CompanyWatermark" @showImage="previewImage"/>
                        </el-form-item>

                        <el-form-item>
                            <template slot="label">
                                <span><!-- 研报表格字体 -->{{$t('SystemManage.BaseConfig.report_sheet_size')}}</span>
                                <el-tooltip class="item" effect="dark" :content="ReportSheetTip" placement="top-start">
                                    <i class="el-icon-warning"/>
                                </el-tooltip>
                            </template>
                            <div class="flex-wrap">
                                <div v-for="item in reportFromType" :key="item.type">
                                    <label>{{item.label}}</label>
                                    <el-select v-model="formData.SmartReportSheetSize" style="width:80px;" v-if="item.type==='smartReport'">
                                        <el-option 
                                            v-for="size in sizeOptions" 
                                            :key="size.val"
                                            :label="size.label"
                                            :value="size.val"
                                        />
                                    </el-select>
                                    <el-select v-model="formData.ReportSheetSize" style="width:80px;" v-else-if="item.type==='report'">
                                        <el-option 
                                            v-for="size in sizeOptions" 
                                            :key="size.val"
                                            :label="size.label"
                                            :value="size.val"
                                        />
                                    </el-select>
                                    <el-select v-model="formData.EnReportSheetSize" style="width:80px;" v-else-if="item.type==='enReport'">
                                        <el-option 
                                            v-for="size in sizeOptions" 
                                            :key="size.val"
                                            :label="size.label"
                                            :value="size.val"
                                        />
                                    </el-select>
                                </div>

                            </div>
                        </el-form-item>

                        <div v-if="isShowXunFei">
                            <!-- 科大讯飞 -->
                            <div style="width:100%;">
                                <span style="color:#606266;">{{$t('SystemManage.BaseConfig.iFLYTEK_service')}}</span> 
                                <el-switch v-model="Iflytek"></el-switch>
                            </div>
                            <template v-if="Iflytek">
                                <el-form-item label="APPID" prop="XfAppid">
                                    <el-input type="text" v-model="formData.XfAppid" :placeholder="$t('SystemManage.BaseConfig.please_enter')+'APPID'" />
                                </el-form-item>
                                <el-form-item label="APIKey" prop="XfApiKey">
                                    <el-input type="text" v-model="formData.XfApiKey" :placeholder="$t('SystemManage.BaseConfig.please_enter')+'APIKey'" />
                                </el-form-item>
                                <el-form-item label="APISecret" prop="XfApiSecret">
                                    <el-input type="text" v-model="formData.XfApiSecret" :placeholder="$t('SystemManage.BaseConfig.please_enter')+'APISecret'" />
                                </el-form-item>
                                <el-form-item label="vcn(voice_name)" prop="XfVcn">
                                    <el-input type="text" v-model="formData.XfVcn" :placeholder="$t('SystemManage.BaseConfig.please_enter')+'voice_name'" />
                                </el-form-item>
                            </template>
                        </div>
                        <!-- 研报审批 -->
                        <div v-if="isShowApprove">
                            <div style="width:100%;margin-bottom: 20px;">
                                <span style="color:#606266;">{{$t('SystemManage.BaseConfig.report_approval')}}</span> 
                                <el-switch v-model="approve"></el-switch>
                            </div>
                            <div class="side" v-if="approve">
                                <el-form-item label="" prop="ReportApproveType">
                                    <el-radio-group v-model="formData.ReportApproveType">
                                        <el-radio label="eta">{{$t('SystemManage.BaseConfig.internal_approval')}}</el-radio>
                                        <el-radio label="other">
                                            <span>{{$t('SystemManage.BaseConfig.third_approval')}}</span>
                                            <el-tooltip effect="dark" placement="top" :content="$t('SystemManage.BaseConfig.third_approval_tips')" >
                                                <span class="hint-text">
                                                    <i class="el-icon-warning-outline"></i>
                                                </span>
                                            </el-tooltip>
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div class="side">
                        <el-form-item :label="$t('SystemManage.BaseConfig.disclaimer')" prop="Disclaimer" class="disclaimer">
                            <div class="rich-editor-wrap">
                                <froala :id="`disclaimer-editor`"
                                    :ref="`disclaimerEditor`" 
                                    :tag="'textarea'" 
                                    :config="disclaimerConfig" v-model="formData.Disclaimer">
                                </froala>
                            </div>
                            <ConfigAnnotation picHintText="" :buttonText="$t('SystemManage.BaseConfig.view_example_text')" picName="Disclaimer" @showImage="previewImage"/>
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.report_share_title_zh')" prop="H5ShareName">
                            <el-input type="text" v-model="formData.H5ShareName" :placeholder="$t('SystemManage.BaseConfig.report_share_title_zh_placeholder')" />
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.report_share_title_en')" prop="H5ShareEnName" v-if="isShowReportEnShare">
                            <el-input type="text" v-model="formData.H5ShareEnName" :placeholder="$t('SystemManage.BaseConfig.report_share_title_en_placeholder')" />
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.connect_wx')" prop="WxAppId">
                            <el-input type="text" v-model.trim="formData.WxAppId" :placeholder="$t('SystemManage.BaseConfig.please_enter')+'AppID'" />
                        </el-form-item>
                        <el-form-item prop="WxAppSecret">
                            <el-input type="text" v-model.trim="formData.WxAppSecret" :placeholder="$t('SystemManage.BaseConfig.please_enter')+'AppSecret'" />
                        </el-form-item>
                        <el-form-item prop="WxId">
                            <el-input type="text" v-model.trim="formData.WxId" :placeholder="$t('SystemManage.BaseConfig.wx_original_id')" />
                        </el-form-item>
                        <div class="input-hint">{{$t('SystemManage.BaseConfig.wx_original_tips')}}</div>
                        <el-form-item  prop="H5ReportShareImg">
                            <ImgUpload 
                                :imgUrl="formData.H5ReportShareImg"
                                @showImage="showImage"
                                @upload="(file)=>handleUploadImage(file,'H5ReportShareImg')"
                                @remove="deleteFormImg('H5ReportShareImg')"
                                />
                            <!-- <ConfigAnnotation picName="OfficialAccountsLogoPic" @showImage="previewImage"
                                picHintText=""/> -->
                        </el-form-item>
                    </div>
                </div>
                <!-- PPT配置 -->
                <div class="part" v-if="isShowPPT||isShowEnPPT" v-show="partType===3">
                    <el-radio-group v-model="pptLang" style="margin-bottom: 22px;">
                        <el-radio-button label="cn">{{$t('SystemManage.BaseConfig.ppt_zh')}}</el-radio-button>
                        <el-radio-button label="en" v-permission="permissionBtn.enPPTPermission.pptEn_visible">{{$t('SystemManage.BaseConfig.ppt_en')}}</el-radio-button>
                    </el-radio-group>
                    <div v-if="isShowPPT" v-show="pptLang === 'cn'" class="ppt-form-item-wrap">
                        <!-- <div class="inner-input-wrap">
                            <el-form-item label="公司名称" prop="PptCompanyName" class="inline-form-item">
                                <el-input type="text" v-model="formData.PptCompanyName"></el-input>
                            </el-form-item>
                            <el-form-item label="团队名称" prop="PptTeamName" class="inline-form-item">
                                <el-input type="text" v-model="formData.PptTeamName"></el-input>
                            </el-form-item>
                            <el-form-item label="字体颜色" prop="PptFontColor" class="inline-form-item">
                                <el-input type="color" style="width:64px;" v-model="formData.PptFontColor"></el-input>
                            </el-form-item>
                        </div> -->
                        
                        <el-form-item :label="$t('SystemManage.BaseConfig.ppt_type01')" prop="CnPptCoverImgs" style="min-width:400px;">
                            <div class="input-line" style="display:flex;">
                                <ImgUpload 
                                    :imgUrl="formData.CnPptCoverImgs.length===3?formData.CnPptCoverImgs[2]:''"
                                    @showImage="(arr)=>{showImageOrder({list:formData.CnPptCoverImgs,item:arr[0]})}"
                                    @upload="(file)=>handleUploadImage(file,'CnPptCoverImgs')"
                                    @remove="deleteFormImg('CnPptCoverImgs',formData.CnPptCoverImgs.length-1)"
                                    />
                                <ImgThumbnail 
                                    :imgList="formData.CnPptCoverImgs.length===3?formData.CnPptCoverImgs.slice(0,2):formData.CnPptCoverImgs"
                                    @showImage="({item})=>{showImageOrder({list:formData.CnPptCoverImgs,item})}"
                                    @deleteImg="(index)=>{deleteFormImg('CnPptCoverImgs',index)}"/>
                            </div>
                            <ConfigAnnotation picName="pptCoverList" @showImage="previewImage"
                                :picHintText="$t('SystemManage.BaseConfig.ppt_tip01')"
                                :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.ppt_type02')" prop="CnPptBackgroundImg">
                            <ImgUpload 
                                :imgUrl="formData.CnPptBackgroundImg"
                                @showImage="showImage"
                                @upload="(file)=>handleUploadImage(file,'CnPptBackgroundImg')"
                                @remove="deleteFormImg('CnPptBackgroundImg')"
                                />
                            <ConfigAnnotation picName="pptBgPic" @showImage="previewImage"
                                :picHintText="$t('SystemManage.BaseConfig.ppt_tip02')"
                                :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.ppt_type03')" prop="CnPptBottomImg">
                            <ImgUpload 
                                :imgUrl="formData.CnPptBottomImg"
                                @showImage="showImage"
                                @upload="(file)=>handleUploadImage(file,'CnPptBottomImg')"
                                @remove="deleteFormImg('CnPptBottomImg')"
                                />
                            <ConfigAnnotation picName="pptBackPic" @showImage="previewImage"
                                :picHintText="$t('SystemManage.BaseConfig.ppt_tip03')"
                                :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                        </el-form-item>
                        <el-form-item label="PPT表格" prop="CnPptSheetSize">
                            <template slot="label">
                                <span>
                                    <!-- PPT表格 -->{{$t('SystemManage.BaseConfig.ppt_sheet')}}
                                    <el-tooltip class="item" effect="dark" :content="pptSheetTip" placement="top-start">
                                        <i class="el-icon-warning"/>
                                    </el-tooltip>
                                </span>
                            </template>
                            <el-select v-model="formData.CnPptSheetSize" style="width:120px;">
                                <el-option 
                                    v-for="size in sizeOptions" 
                                    :key="size.val"
                                    :label="size.label"
                                    :value="size.val"
                                />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div v-if="isShowEnPPT" v-show="pptLang === 'en'" class="ppt-form-item-wrap">
                        <!-- <div class="inner-input-wrap">
                            <el-form-item label="公司名称" prop="PptCompanyNameEn" class="inline-form-item">
                                <el-input type="text" v-model="formData.PptCompanyNameEn"></el-input>
                            </el-form-item>
                            <el-form-item label="团队名称" prop="PptTeamNameEn" class="inline-form-item">
                                <el-input type="text" v-model="formData.PptTeamNameEn"></el-input>
                            </el-form-item>
                            <el-form-item label="字体颜色" prop="PptFontColorEn" class="inline-form-item">
                                <el-input type="color" style="width:64px;" v-model="formData.PptFontColorEn"></el-input>
                            </el-form-item>
                        </div> -->
                        <el-form-item :label="$t('SystemManage.BaseConfig.ppt_type01')" prop="EnPptCoverImgs" style="min-width:400px;">
                            <div class="input-line" style="display:flex;">
                                <ImgUpload 
                                    :imgUrl="formData.EnPptCoverImgs.length===3?formData.EnPptCoverImgs[2]:''"
                                    @showImage="(arr)=>{showImageOrder({list:formData.EnPptCoverImgs,item:arr[0]})}"
                                    @upload="(file)=>handleUploadImage(file,'EnPptCoverImgs')"
                                    @remove="deleteFormImg('EnPptCoverImgs',formData.EnPptCoverImgs.length-1)"
                                    />
                                <ImgThumbnail 
                                    :imgList="formData.EnPptCoverImgs.length===3?formData.EnPptCoverImgs.slice(0,2):formData.EnPptCoverImgs"
                                    @showImage="({item})=>{showImageOrder({list:formData.EnPptCoverImgs,item})}"
                                    @deleteImg="(index)=>{deleteFormImg('EnPptCoverImgs',index)}"/>
                            </div>
                            <ConfigAnnotation picName="pptCoverList" @showImage="previewImage"
                                :picHintText="$t('SystemManage.BaseConfig.ppt_tip01')"
                                :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.ppt_type02')" prop="EnPptBackgroundImg">
                            <ImgUpload 
                                :imgUrl="formData.EnPptBackgroundImg"
                                @showImage="showImage"
                                @upload="(file)=>handleUploadImage(file,'EnPptBackgroundImg')"
                                @remove="deleteFormImg('EnPptBackgroundImg')"
                                />
                            <ConfigAnnotation picName="pptBgPic" @showImage="previewImage"
                                :picHintText="$t('SystemManage.BaseConfig.ppt_tip02')"
                                :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                        </el-form-item>
                        <el-form-item :label="$t('SystemManage.BaseConfig.ppt_type03')" prop="EnPptBottomImg">
                            <ImgUpload 
                                :imgUrl="formData.EnPptBottomImg"
                                @showImage="showImage"
                                @upload="(file)=>handleUploadImage(file,'EnPptBottomImg')"
                                @remove="deleteFormImg('EnPptBottomImg')"
                                />
                            <ConfigAnnotation picName="pptBackPic" @showImage="previewImage"
                                :picHintText="$t('SystemManage.BaseConfig.ppt_tip03')"
                                :buttonText="$t('SystemManage.BaseConfig.view_example_text')"/>
                        </el-form-item>
                        <el-form-item label="PPT表格" prop="CnPptSheetSize">
                            <template slot="label">
                                <span>
                                    <!-- PPT表格 -->{{$t('SystemManage.BaseConfig.ppt_sheet')}}
                                    <el-tooltip class="item" effect="dark" :content="pptSheetTip" placement="top-start">
                                        <i class="el-icon-warning"/>
                                    </el-tooltip>
                                </span>
                            </template>
                            <el-select v-model="formData.EnPptSheetSize" style="width:120px;">
                                <el-option 
                                    v-for="size in sizeOptions" 
                                    :key="size.val"
                                    :label="size.label"
                                    :value="size.val"
                                />
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-form>
        
        </template>
        <template v-if="sectionType==2&&isShowSource">
            <div class="smart-report-title">{{$t('SystemManage.BaseConfig.smart_layout_resource_library')}}</div>
            <!-- 资源库 -->
            <smartReportImgSet />
        </template>


        <el-image-viewer 
            v-if="showViewer" 
            :on-close="()=>{this.picShowList=[];this.showViewer = false}" 
            :url-list="picShowList" />
    </div>
</template>

<script>
import ImgThumbnail from './components/imgThumbnail.vue';
import ImgUpload from './components/imgUpload.vue';
import ConfigAnnotation from './components/configAnnotation.vue';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import smartReportImgSet from './components/smartReportImgSet.vue'

import {bannerupload} from '@/api/api.js';
import {etaBaseConfigInterence} from '@/api/modules/etaBaseConfigApi.js';
export default {
    components: { ConfigAnnotation , ElImageViewer , ImgThumbnail , ImgUpload,smartReportImgSet},
    data() {
        let ListValidator = (rule,value,callback)=>{
            if(!value.length){
                return callback(new Error('请至少选择一张封面图'))
            }else{
                return callback()
            }
        }
        return {
            /* base config */
            checkList:[],//水印应用
            Iflytek:false,//是否启用科大讯飞服务
            approve:false,//是否开启研报审批
            formData: {
                Disclaimer: '',//免责声明
                CompanyName:'',//公司名称
                CompanyWatermark:'',//公司水印
                WatermarkChart:0,//是否在研报图表中使用水印 0否 1是
                LoginSmsTpId:'',//国内短信模板Id
                SmsJhgnAppKey:'',//国内短信模板appKey
                LoginSmsGjTpId:'',// 国际短信模板Id
                SmsJhgjAppKey:'',//国内短信模板appKey
                LoginEmailTemplateSubject:'', // 邮件标题
                LoginEmailTemplateContent:'', // 邮件内容
                H5ShareName:'', // 中文研报分享标题
                H5ShareEnName:'', // 英文研报分享标题
                WxAppId:'',
                WxAppSecret:'',
                WxId:'',
                H5ReportShareImg:'',
                SmartReportSheetSize: '12',//智能研报表格字号
                ReportSheetSize: '12',//研报表格字号
                EnReportSheetSize: '12',//英文研报表格字号

                UseXf:0,//是否启用科大讯飞服务 0否 1是
                XfAppid:'',
                XfApiKey:'',
                XfApiSecret:'',
                XfVcn:'',

                CnPptCoverImgs:[],//ppt封面列表
                CnPptBackgroundImg:'',//ppt背景图
                CnPptBottomImg:'',//ppt封底图
                EnPptCoverImgs:[],//英文ppt封面列表
                EnPptBackgroundImg:'',//英文ppt背景图
                EnPptBottomImg:'',//英文ppt封底图
                CnPptSheetSize: '12',//中文ppt表格字号
                EnPptSheetSize: '12',//英文ppt表格字号

                WatermarkReport:false,//研报分享水印

                IsReportApprove:false,//是否开启研报审批
                ReportApproveType:'eta',//研报审批选项
                ICPLicense:'', //备案信息
                ETATitle:'', //登录页标题
                TabName:'',//网页名称-PC端
                TabNameMobile:'',//网页名称-移动端
                LogoCN:'',//logo-中文版
                LogoEN:'',//logo-英文版 
                LogoMobile:'',//logo-移动端登录页
            },//表单预设值
            rules: {
                Disclaimer:[{ required: true, message: '请输入免责声明', trigger: 'blur' }],
                CompanyName:[{ required: true, message: '请输入公司名称', trigger: 'blur' }],
                LoginSmsTpId:[{ required: true, message: '请输入国内短信模板ID', trigger: 'blur' },
                            {
                                validator:(rules,value,callback)=>{
                                    if(!this.formData.SmsJhgnAppKey){
                                        callback(new Error("请输入国内短信模板appkey"))
                                    }else{
                                        callback()
                                    }
                                },
                                trigger: 'blur'
                            }],
                LoginEmailTemplateSubject:[{ required: true, message: '请输入邮件标题', trigger: 'blur' }],
                LoginEmailTemplateContent:[{ required: true, message: '请输入邮件内容', trigger: 'blur' }],
                H5ShareName:[{ required: true, message: '请输入中文研报分享标题', trigger: 'blur' }],
                H5ShareEnName:[{ required: true, message: '请输入英文研报分享标题', trigger: 'blur' }],
                //CompanyWatermark:[{ required: true, message: '请选择水印图片', trigger: 'blur' }],
                CnPptBackgroundImg:[{ required: true, message: '请选择中文PPT背景图', trigger: 'blur' }],
                EnPptBackgroundImg:[{ required: true, message: '请选择英文PPT背景图', trigger: 'blur' }],
                XfAppid:[{ required: true, message: '请输入APPID', trigger: 'blur' }],
                XfApiKey:[{ required: true, message: '请输入APIKey', trigger: 'blur' }],
                XfApiSecret:[{ required: true, message: '请输入APISecret', trigger: 'blur' }],
                XfVcn:[{ required: true, message: '请输入voice_name', trigger: 'blur' }],
                CnPptCoverImgs:[{ required: true, validator:ListValidator}],
                EnPptCoverImgs:[{ required: true, validator:ListValidator}],
                ETATitle:[{ required: true, message: '请输入登录页标题', trigger: 'blur' }],
                TabName:[{ required: true, message: '请输入PC端网页名称', trigger: 'blur' }],
                TabNameMobile:[{ required: true, message: '请输入移动端网页名称', trigger: 'blur' }],
                LogoCN:[{ required: true, message: '请上传系统中文版Logo', trigger: 'blur' }],
                LogoEN:[{ required: true, message: '请上传系统英文版Logo', trigger: 'blur' }],
                LogoMobile:[{ required: true, message: '请上传系统移动端Logo', trigger: 'blur' }],
            },//表单校验
            disclaimerConfig:{
                toolbarButtons:[
                    'textColor',
                    'bold',
                    'italic',
                    'underline',
                    'fontFamily',
                    'fontSize',
                    'align',
                    'outdent',
                    'indent',
                    'specialCharacters',
                    'insertHR',
                    'selectAll',
                    'clearFormatting',
                    'undo',
                    'redo',
                ],
                height:300,
                fontSizeDefaultSelection: "16",
                quickInsertEnabled: false,
                pasteAllowedStyleProps: ['font-family', 'font-size', 'color'],
                language: "zh_cn",
                placeholderText:'请输入免责声明',
                wordPasteKeepFormatting:false,
                pastePlain:true,
                wordPasteModal:false,
                pluginsEnabled:['colors'],//定义可用插件
            },//富文本编辑器配置项
            emailEditorConfig:{
                placeholderText:'请输入邮件内容',
            },
            /* ppt config */
            pptLang:'cn',//切换中英文表单 
            CnPptCoverImgs:[],//中文封面列表
            EnPptCoverImgs:[],//英文封面列表

            /* image preview */
            showViewer:false,//控制图片预览组件展示
            picShowList:[],//ElImageViewer组件展示图片的列表
            picShowMap:{ //查看示意图需要展示的图片 支持多张
                'Disclaimer':[
                    require('@/assets/img/eta_base_config/disclaimer_1.jpg'),
                    require('@/assets/img/eta_base_config/disclaimer_2.jpg'),
                ],
                'CompanyName':[require('@/assets/img/eta_base_config/company_1.jpg')],
                'CompanyWatermark':[require('@/assets/img/eta_base_config/mark_1.jpg')],
                'pptCoverList':[require('@/assets/img/eta_base_config/ppt_cover.jpg')],
                'pptBgPic':[require('@/assets/img/eta_base_config/ppt_bgpic.jpg')],
                'pptBackPic':[require('@/assets/img/eta_base_config/ppt_back.jpg')],
                'emailContentTemplate':[require('@/assets/img/eta_base_config/email_content_template.png')],
                'ICPLicense':[require('@/assets/img/eta_base_config/record_information.jpg')],
                'ETATitle':[require('@/assets/img/eta_base_config/ETA_title.png')],
                'TabName':[require('@/assets/img/eta_base_config/website_title.png')],
                'TabNameMobile':[require('@/assets/img/eta_base_config/ETA_mobile_title.png')],
                'LogoCN':[require('@/assets/img/eta_base_config/Logo_ch.png')],
                'LogoEN':[require('@/assets/img/eta_base_config/Logo_en.png')],
                'LogoMobile':[require('@/assets/img/eta_base_config/ETA_mobile_logo.png')],  
            },
            /* loading */
            configLoading:null,

            partType:1,//1登陆设置 2研报设置 3PPT配置

            sectionType:1,//1通用设置 2资源库

            reportFromType: [
                // { type:'smartReport',label: /* '智能研报' */ this.$t('SystemManage.BaseConfig.report_type1') },
                { type:'report',label: /* '研报列表' */this.$t('SystemManage.BaseConfig.report_type2') },
                { type:'enReport',label: /* '英文研报' */this.$t('SystemManage.BaseConfig.report_type3') },
            ],
            pptSheetTip: /* `设置共享表格、时间序列表格、混合表格插入PPT的表格字号` */this.$t('SystemManage.BaseConfig.ppt_sheet_tip'),
            ReportSheetTip: /* `设置共享表格、时间序列表格、混合表格插入研报的表格字号` */this.$t('SystemManage.BaseConfig.report_sheet_tip'),
            sizeOptions: [
                { label:'5',val:'5' },
                { label:'6',val:'6' },
                { label:'7',val:'7' },
                { label:'8',val:'8' },
                { label:'9',val:'9' },
                { label:'10',val:'10' },
                { label:'11',val:'11' },
                { label:'12',val:'12' },
                { label:'13',val:'13' },
                { label:'14',val:'14' },
                { label:'15',val:'15' },
                { label:'16',val:'16' },
                { label:'17',val:'17' },
                { label:'18',val:'18' },
            ]


        };
    },
    computed:{
        //是否显示科大讯飞相关的表单项
        isShowXunFei(){
            return this.permissionBtn.checkPermissionBtn(
                    this.permissionBtn.baseConfigPermission.etaBaseConfig_xunfei
                )
        },
        //是否显示研报审批相关表单项
        isShowApprove(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_approve
            )
        },
        //是否显示中文PPT相关的表单项
        isShowPPT(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_ppt
            )
        },
        //是否显示英文PPT相关的表单项
        isShowEnPPT(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_pptEn
            )
        },
        //是否显示公司水印旁的研报图表,目前只有一个选项,当选项多的时候,不要再单个单个判断
        isShowYBChart(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_watermark_ybChart
            )
        },
        // 是否有登录设置
        isShowLoginConfig(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_login
            )
        },
        isShowYBShare(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_watermark_ybShare
            )
        },
        isShowSource(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_source_see
            )
        },

        isShowReportEnShare(){
            return this.permissionBtn.checkPermissionBtn(
                this.permissionBtn.baseConfigPermission.etaBaseConfig_watermark_ybEnShare
            )
        },
    },
    watch: {
        'isShowLoginConfig':{
            handler(){
                if(!this.isShowLoginConfig&&this.partType==1){
                    this.partType=2
                }
            },
            immediate:true
        }
    },
    methods: {
        handleUploadImage(file,key){
            /* console.log('type',key)
            console.log('file',file) */
            //如果是封面图
            if(['CnPptCoverImgs','EnPptCoverImgs'].includes(key)&&this.formData[key].length===3){
                this.$message.warning('封面图最多只能上传三张')
                return
            }
            //图片大小和格式限制
            const {size,type} = file.file
            const sizeLimit = key==='CompanyWatermark'?50*1024:500*1024
            if(!['image/png','image/jpeg'].includes(type)){
                this.$message.warning('仅支持png、jpg格式的图片')
                return
            }
            if(size>sizeLimit){
                this.$message.warning(`${key==='CompanyWatermark'?'水印图大小不能超过50kb':'ppt配图大小不能超过500kb'}`)
                return
            }
            
            let form = new FormData();
            form.append('file',file.file);
            bannerupload(form).then(res=>{
                console.log(res);
                if(res.Ret!==200) return 
                if(['CnPptCoverImgs','EnPptCoverImgs'].includes(key)){
                    this.formData[key].push(res.Data.ResourceUrl)
                }else{
                    this.$set(this.formData,key,res.Data.ResourceUrl)
                    // this.formData[key] = res.Data.ResourceUrl
                }
                console.log(this.formData);
            })
        },
        previewImage(picName){
            this.picShowList = this.picShowMap[picName]||[]
            this.picShowList.length&&(this.showViewer = true)
        },
        deleteFormImg(key,index){
            if(['CnPptCoverImgs','EnPptCoverImgs'].includes(key)){
                this.formData[key].splice(index,1)
            }else{
                this.formData[key] = ''
            }
        },
        showImage(imgList){
            this.picShowList = imgList||[]
            this.picShowList.length&&(this.showViewer = true)
        },
        showImageOrder({list,item}){
            //改变list的顺序,当前点击的为第一个
            const index = list.findIndex(img=>img===item)
            this.picShowList = [...list.slice(index),...list.slice(0,index)]
            this.picShowList.length&&(this.showViewer = true)
        },
        getBaseConfig(){
            this.configLoading = this.$loading({
                lock: true,
                target: '.eta-base-config',
                text: '正在获取基本配置...',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.8)',
            });
            //获取WatermarkChart的值，赋值checkList
            //获取UseXf的值，赋值Iflytek
            //获取IsReportApprove的值,赋值approve
            etaBaseConfigInterence.getBaseConfig().then(res=>{
                if(res.Ret!==200) return 
                const {WatermarkChart='',UseXf='',IsReportApprove='',CnPptCoverImgs='',EnPptCoverImgs=''} = res.Data
                this.checkList = WatermarkChart==='true'?['研报图表']:[]
                this.Iflytek = UseXf==='true'?true:false
                this.approve = IsReportApprove==='true'?true:false
                if(res.Data){
                    // this.$set(this,'formData',res.Data)
                    this.formData = {...this.formData,...res.Data}
                    this.formData.CnPptCoverImgs = CnPptCoverImgs.length?CnPptCoverImgs.split(','):[]
                    this.formData.EnPptCoverImgs = EnPptCoverImgs.length?EnPptCoverImgs.split(','):[]
                    this.formData.WatermarkReport=res.Data.WatermarkReport==='true'?true:false
                    this.formData.LogoCN = res.Data.LogoCN || require('@/assets/img/login_logo.png')
                    this.formData.LogoEN = res.Data.LogoEN || require('@/assets/img/en/logo.png')
                    this.formData.LogoMobile = res.Data.LogoMobile || require('@/assets/img/logo_mobile.png')
                }
                this.configLoading&&this.configLoading.close()
            })
        },
        saveBaseConfig(){
            //rules验证
            this.$refs.baseConfigForm.validate((valid,obj)=>{
                console.log('valid',valid)
                console.log('obj',obj)
                //如果是中英文ppt没填写，切换标签栏
                const keys = Object.keys(obj)
                const cnProps = ['CnPptCoverImgs','CnPptBackgroundImg','CnPptBottomImg']
                const enProps = ['EnPptCoverImgs','EnPptBackgroundImg','EnPptBottomImg']
                for(let i = 0;i < keys.length;i++){
                    if(cnProps.includes(keys[i])){
                        this.pptLang = 'cn'
                        break
                    }
                    if(enProps.includes(keys[i])){
                        this.pptLang = 'en'
                        break
                    }
                }
                if(valid){
                    if(this.formData.WxAppId || this.formData.WxAppSecret || this.formData.WxId){
                        // 只要有一个填，其他必填
                        if(!this.formData.WxAppId){
                            this.$message.warning('AppID 不能为空')
                            return 
                        }else if(!this.formData.WxAppSecret){
                            this.$message.warning('AppSecret 不能为空')
                            return 
                        }else if(!this.formData.WxId){
                            this.$message.warning('原始Id 不能为空')
                            return 
                        }
                    }
                    //froala 在非本地环境会有版权标识，在表单验证前去掉
                    this.formData.Disclaimer = this.formData.Disclaimer.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
                    this.formData.LoginEmailTemplateContent = this.formData.LoginEmailTemplateContent.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
                    this.formData.WatermarkChart = ''+(this.checkList.includes('研报图表')?true:false)
                    this.formData.UseXf = ''+(this.Iflytek?true:false)
                    this.formData.IsReportApprove = ''+(this.approve?true:false)
                    const CnPptCoverImgs = this.formData.CnPptCoverImgs.join(',')
                    const EnPptCoverImgs = this.formData.EnPptCoverImgs.join(',')
                    //通过验证后,提交数据前
                    //根据isShowXunFei,isShowPPTisShowEnPPT这三个计算属性将对应的表单项隐藏
                    etaBaseConfigInterence.saveBaseConfig({
                        ...this.formData,
                        ...{
                            CnPptCoverImgs,
                            EnPptCoverImgs,
                            WatermarkReport:this.formData.WatermarkReport?'true':'false'
                        }
                    }).then(res=>{
                        if(res.Ret!==200) return 
                        // 设置logo
                        this.$store.commit('SET_BASE_INFO',
                            {logoCh:this.formData.LogoCN,logoEn:this.formData.LogoEN}
                        )
                        this.$message.success(this.$t('SystemManage.BaseConfig.tip_msg01')||'保存成功，请稍后到对应页面/项目查看')
                    })
                }
            })
        },
        cancel(){
            //取消就恢复原样
            this.getBaseConfig()
        }
    },
    mounted(){
        this.getBaseConfig()
    }
};
</script>

<style lang="scss">
.eta-base-config{
    .el-form-item{
        .el-form-item__content{line-height: normal;}
    }
    .inline-form-item{
        display: flex;
        align-items: center;
        label{
            height: 40px;
            margin-right: 10px;
            white-space: nowrap;
        }
        .el-form-item__content{
            flex-grow: 1;
        }
    }
    .el-input__inner[type="color"]{
        height: 32px;
        padding: 0;
        border: none;
    }
    .fr-wrapper{
        height: 220px!important;
        .fr-element{
            min-height: 220px!important;
        }
    }
    .el-input--suffix .el-input__inner{
        padding-right:34px ;
    }
    .el-radio-button__inner{
        width: 150px;
    }
    
}
</style>
<style scoped lang="scss">
.eta-base-config{
    box-sizing: border-box;
    // padding:30px;
    border-radius: 4px;
    background-color: #fff;
    .scroll-cont {
        height: calc(100vh - 310px);
        overflow-y: auto;
    }
    .nav-type-box{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #E7E7E7;
        span{
            display: block;
            height: 100%;
            line-height: 32px;
            padding: 8px;
            cursor: pointer;
            margin-right: 10px;
            color: rgba($color: #000000, $alpha: 0.6);
        }
        .active{
            color: #0052D9;
            border-bottom: 2px solid #0052D9;
        }
    }
    .smart-report-title{
        padding: 20px 30px 0;
        font-size: 16px;
        line-height: 22px;
        color: #333333;
    }
    .base-config-form{
        padding: 30px;
        .el-form-item{
            width:100%;
        }
        .part{
            padding-bottom: 30px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .side{
                width:45%;
                .form-item-type-two{
                    .input-suffix{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        padding-right: 6px;
                        img{
                            height: 16px;
                            cursor: pointer;
                        }
                    }
                }
                .sms-type{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .input-hint{
                    color: #999999;
                    font-size: 14px;
                    line-height: 20px;
                    margin-bottom: 10px;
                    margin-top: -3px;
                }
                .inline-form-item-box{
                    .line-form-item-name{
                        color: #606266;
                        font-size: 14px;
                        line-height: 40px;
                    }
                    .line-form-item{
                        display: flex;
                        gap: 40px;
                    }
                }
            }
            .ppt-form-item-wrap{
                width:100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .inner-input-wrap{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin: 20px 0;
                    >.el-form-item{
                        width:30%;
                    }
                }
                >.el-form-item{
                    width:30%;
                }
            }
        }
        .flex-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
    }
}
</style>
<style lang="scss">
#logo-image{
    .el-upload{
        width: 100%;
        height: 86px;
        .upload-mask{
            line-height: 86px;
        }
    }
    .upload-box{
        width: 100%;
        height: 100%;
    }
}
</style>