<template>
    <div class="eta-base-config">
        <div class="nav-type-box">
            <span :class="[sectionType===1?'active':'']" @click="sectionType=1">通用设置</span>
            <span :class="[sectionType===2?'active':'']" @click="sectionType=2">资源库</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 type="primary" :plain="partType===1?false:true" @click="partType=1" :style="{width:'120px',border:'none',color:partType==1?'#fff':'#333'}">登录设置</el-button>
                <el-button type="primary" :plain="partType===2?false:true" @click="partType=2" :style="{width:'120px',border:'none',color:partType==2?'#fff':'#333'}">研报设置</el-button>
                <el-button type="primary" :plain="partType===3?false:true" v-if="isShowPPT||isShowEnPPT" @click="partType=3" :style="{width:'120px',border:'none',color:partType==3?'#fff':'#333'}">PPT配置</el-button>
                <div class="btn-wrap" style="text-align: center;float:right">
                    <el-button type="primary" plain style="width:120px;" @click="cancel">取消</el-button>
                    <el-button type="primary"  style="margin-left:20px;width:120px;" @click="saveBaseConfig">保存</el-button>
                </div>
            </div>
            <!-- 登录设置模块 -->
            <div class="part" v-show="partType===1">
                <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="邮件模板" prop="LoginEmailTemplateSubject" >
                        <div class="form-item-type-two">
                            <el-input type="text" v-model="formData.LoginEmailTemplateSubject" placeholder="请输入邮件标题" >
                                <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>
                        </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=""/>
                    </el-form-item>
                </div>
            </div>
            <!-- 研报设置 -->
            <div class="part" v-show="partType===2">
                <div class="side">
                    <el-form-item label="公司名称" prop="CompanyName">
                        <el-input type="text" v-model="formData.CompanyName" placeholder="请输入公司名称" />
                        <ConfigAnnotation picHintText="" picName="CompanyName" @showImage="previewImage"/>
                    </el-form-item>
                    <el-form-item label="公司水印" 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: 100px;display:flex;gap:0 20px">
                            <el-checkbox-group v-if="isShowYBChart"
                                v-model="checkList" >
                                <el-checkbox label="研报图表"></el-checkbox>
                            </el-checkbox-group>
                            <div>
                                <el-checkbox label="研报分享" v-model="formData.WatermarkReport"></el-checkbox>
                                <el-tooltip 
                                    effect="dark" 
                                    content="研报详情分享页水印,水印内容为分享人用户名称+手机号(无手机号时为邮箱地址)" 
                                    placement="top"
                                >
                                    <i class="el-icon-warning"></i>
                                </el-tooltip>
                            </div>
                            
                        </div>
                        <ConfigAnnotation picName="CompanyWatermark" @showImage="previewImage"/>
                    </el-form-item>
                    <el-form-item label="免责声明" 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="" picName="Disclaimer" @showImage="previewImage"/>
                    </el-form-item>
                    <div v-if="isShowXunFei">
                        <!-- 科大讯飞 -->
                        <div style="width:100%;">
                            <span style="color:#606266;">科大讯飞服务</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="请输入APPID" />
                            </el-form-item>
                            <el-form-item label="APIKey" prop="XfApiKey">
                                <el-input type="text" v-model="formData.XfApiKey" placeholder="请输入APIKey" />
                            </el-form-item>
                            <el-form-item label="APISecret" prop="XfApiSecret">
                                <el-input type="text" v-model="formData.XfApiSecret" placeholder="请输入APISecret" />
                            </el-form-item>
                            <el-form-item label="vcn(voice_name)" prop="XfVcn">
                                <el-input type="text" v-model="formData.XfVcn" placeholder="请输入voice_name" />
                            </el-form-item>
                        </template>
                    </div>
                    <!-- 研报审批 -->
                    <div v-if="isShowApprove">
                        <div style="width:100%;margin-bottom: 20px;">
                            <span style="color:#606266;">研报审批</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">ETA内部审批</el-radio>
                                    <el-radio label="other">
                                        <span>第三方审批</span>
                                        <el-tooltip effect="dark" placement="top" content="中文研报(智能研报/研报列表)通过API接口对接第三方审批系统" >
                                            <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="中文研报分享抬头" prop="H5ShareName">
                        <el-input type="text" v-model="formData.H5ShareName" placeholder="请输入中文研报分享抬头" />
                    </el-form-item>
                    <el-form-item label="英文研报分享抬头" prop="H5ShareEnName">
                        <el-input type="text" v-model="formData.H5ShareEnName" placeholder="请输入英文研报分享抬头" />
                    </el-form-item>
                    <el-form-item label="关联公众号" prop="WxAppId">
                        <el-input type="text" v-model.trim="formData.WxAppId" placeholder="请输入AppID" />
                    </el-form-item>
                    <el-form-item prop="WxAppSecret">
                        <el-input type="text" v-model.trim="formData.WxAppSecret" placeholder="请输入AppSecret" />
                    </el-form-item>
                    <el-form-item prop="WxId">
                        <el-input type="text" v-model.trim="formData.WxId" placeholder="请输入原始Id" />
                    </el-form-item>
                    <div class="input-hint">注：关联公众号填写时，AppID、AppSecret原始ID均需填写。</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">中文PPT</el-radio-button>
                    <el-radio-button label="en">英文PPT</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="PPT封面图" 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="上传格式：png、jpg，最多上传三张，建议图片比例：10:7"/>
                    </el-form-item>
                    <el-form-item label="PPT背景图" prop="CnPptBackgroundImg">
                        <ImgUpload 
                            :imgUrl="formData.CnPptBackgroundImg"
                            @showImage="showImage"
                            @upload="(file)=>handleUploadImage(file,'CnPptBackgroundImg')"
                            @remove="deleteFormImg('CnPptBackgroundImg')"
                            />
                        <ConfigAnnotation picName="pptBgPic" @showImage="previewImage"
                            picHintText="上传格式：png、jpg，建议图片比例：10:7"/>
                    </el-form-item>
                    <el-form-item label="PPT封底图" prop="CnPptBottomImg">
                        <ImgUpload 
                            :imgUrl="formData.CnPptBottomImg"
                            @showImage="showImage"
                            @upload="(file)=>handleUploadImage(file,'CnPptBottomImg')"
                            @remove="deleteFormImg('CnPptBottomImg')"
                            />
                        <ConfigAnnotation picName="pptBackPic" @showImage="previewImage"
                            picHintText="上传格式：png、jpg，建议图片比例：10:7"/>
                    </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="PPT封面图" 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="上传格式：png、jpg，最多上传三张，建议图片比例：10:7"/>
                    </el-form-item>
                    <el-form-item label="PPT背景图" prop="EnPptBackgroundImg">
                        <ImgUpload 
                            :imgUrl="formData.EnPptBackgroundImg"
                            @showImage="showImage"
                            @upload="(file)=>handleUploadImage(file,'EnPptBackgroundImg')"
                            @remove="deleteFormImg('EnPptBackgroundImg')"
                            />
                        <ConfigAnnotation picName="pptBgPic" @showImage="previewImage"
                            picHintText="上传格式：png、jpg，建议图片比例：10:7"/>
                    </el-form-item>
                    <el-form-item label="PPT封底图" prop="EnPptBottomImg">
                        <ImgUpload 
                            :imgUrl="formData.EnPptBottomImg"
                            @showImage="showImage"
                            @upload="(file)=>handleUploadImage(file,'EnPptBottomImg')"
                            @remove="deleteFormImg('EnPptBottomImg')"
                            />
                        <ConfigAnnotation picName="pptBackPic" @showImage="previewImage"
                            picHintText="上传格式：png、jpg，建议图片比例：10:7"/>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        
        </template>
        <!-- 资源库 -->
        <smartReportImgSet v-if="sectionType==2"/>

        <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:'',

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

                CnPptCoverImgs:[],//ppt封面列表
                CnPptBackgroundImg:'',//ppt背景图
                CnPptBottomImg:'',//ppt封底图
                EnPptCoverImgs:[],//英文ppt封面列表
                EnPptBackgroundImg:'',//英文ppt背景图
                EnPptBottomImg:'',//英文ppt封底图

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

                IsReportApprove:false,//是否开启研报审批
                ReportApproveType:'eta',//研报审批选项

            },//表单预设值
            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}],
            },//表单校验
            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')],
            },
            /* loading */
            configLoading:null,

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

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


        };
    },
    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
            )
        }
    },
    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.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 
                        this.$message.success('保存成功，请稍后到对应页面/项目查看')
                    })
                }
            })
        },
        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;
    .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;
        }
    }
    .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;
                }
            }
            .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%;
                }
            }
        }
    }
}
</style>
