<script setup>
import { ficcManageInterface,customInterence,classifyTelList} from "@/api/api"
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox, ElImageViewer } from 'element-plus'

import { parseData } from '@/utils/parseData'
import { useRouter } from "vue-router"

const router = useRouter()


let formData = reactive({
    firstTypeVal: "",
    childTypeVal: "",
    ActivityTypeName:'',//活动类别名称
    time:[],
    ActivityName:'',//活动标题
    Speaker:'',
    MainlandTel:'400-810-8228',
    HongKongTel:'+852-30051355',//香港
    TaiwanTel:'',
    AmericaTel:'',
    SingaporeTel:'65 6307-7689',//新加坡
    ReportLink:'',//报告链接
    ReportName:'',//报告名字
    ReportId:'',//报告id
    IsNewReport:0,//是否关联的是新报告 0否 1是
    ParticipationCode:'',//拨号密码
    Audios:[],//音频
    Poster:[],//海报
    LinkParticipants:"",//参会链接
    City:'',//城市
    Address:'',//详细地址
    LimitPeopleNum:'',//限制人数
    Permission:'',//选择的参会权限
})
const formRules = reactive({
    firstTypeVal:[{required: true, message: "请选择活动类型", trigger: "change"}],
    childTypeVal:[{required: true, message: "请选择活动类别", trigger: "change"}],
    time:[{required: true, message: "请选择活动时间", trigger: "change"}],
})
let typeList = ref([])
let childTypeList = ref([])
let speakerList = ref([])

let showSelectReport = ref(false)//显示选择报告弹窗
let selectReportTtype = ref('')
let reportTypeList = ref([
    /* {name:"双周报",val:"new_two_week"},
    {name:"月报",val:"month"},
    {name:"数据点评",val:"other"},
    {name:'周报',val:'new_week'},
    {name:"晨报",val:"day"}, */
])
let reportList = ref([])
let searchReportVal = ref('')//搜索报告的关键词

let cityArr = ref(['上海','北京','杭州','深圳'])
let PermissionList = ref([])//权限数据

let preImgList = ref([])
let showPreImg = ref(false)
let uploadApi = import.meta.env.VITE_APP_API_ROOT+'/resource/image/upload'

//是否显示手动输入活动类别
let showActivityTypeName = computed(()=>{
    let flag=false
    if(formData.childTypeVal==39
        ||formData.childTypeVal==41
        ||formData.firstTypeVal==4){
        flag=true
    }

    return flag
})
let showUploadPoster = computed(()=>{//显示上传活动海报
    let flag=false
    if(formData.firstTypeVal!=1){
        flag=true
    }

    return flag
})
let showSelectReportUrl = computed(()=>{//显示选择报告链接
    let flag=false
    if(formData.firstTypeVal!=2){
        flag=true 
    }

    return flag 
})
let showAddressOrLimitPeople = computed(()=>{//显示地址或着参会限制人数
    let flag=false

    if(formData.firstTypeVal==3||formData.firstTypeVal==4) flag=true
    return flag 
})
let showPermission = computed(()=>{//显示选择参会权限
    let flag=false

    if(formData.firstTypeVal==3) flag=true
    return flag 

})
let showSelectSpeaker = computed(()=>{//显示选择主讲人
    let flag=false
    if(formData.firstTypeVal==1||(formData.firstTypeVal==3&&formData.childTypeVal!=41)) flag=true
    return flag 
})
let speakerAvatar = computed(()=>{
    if(formData.Speaker){
        let img=formData.Speaker.map(item=>{
            let str=''
            speakerList.value.forEach(_item=>{
                if(_item.SpeakerName==item){
                    str=_item.SpeakerHeadPic
                }
            })
            return str
        })
        return img
    }
})

//获取活动类型
async function getTypeList() {
    const res = await ficcManageInterface.activityTypeList();
    if (res.Ret === 200) {
        typeList.value = res.Data || [];
        formData.firstTypeVal=res.Data[0].ActivityTypeId
        childTypeList.value=res.Data[0].ChildList
        formData.childTypeVal=childTypeList.value[0].ActivityTypeId
        formData.ActivityName=childTypeList.value[0].ActivityTypeName+'电话会'
    }
}
getTypeList()

// 获取主讲人列表
async function getSpeakerList(){
    const res=await ficcManageInterface.activitySpeakerList({
        PageSize:10000,
        CurrentIndex:1,
    })
    if(res.Ret===200){
        speakerList.value=res.Data.List||[]
    }
}
getSpeakerList()

// 获取基本权限列表
async function getPermissionList(){
    const res=await customInterence.authList({CompanyType:'ficc'})
    if(res.Ret===200){
        let newArr = [];
        res.Data.List.length&&res.Data.List.forEach(item => {
            let obj = {
                checkAll:false,
                isIndeterminate:false,
                ...item,
                CheckList:[]
            }
            newArr.push(obj)
        })
        PermissionList.value = newArr;
    }
}
getPermissionList()

async function getTelList(){
    const res = await classifyTelList()
    if(res.Ret===200){
        const data = res.Data||[]
        //其他电话会报告
        reportTypeList.value = data.map(item=>{
            return {name:item.ClassifyName,val:'tel_'+item.Id}
        })
        //晨报和周报
        reportTypeList.value = reportTypeList.value.concat([{name:'晨报',val:'day'},{name:'周报',val:'week'}])
        selectReportTtype.value = reportTypeList.value[0].val
    }
}
getTelList()

function seleceSpeakerChange(e){
    console.log(e);
}

//预览图片
function handlePreImg(file){
    preImgList.value=[file.response.Data.ResourceUrl]
    showPreImg.value=true
}

function closePreImg(){
    showPreImg.value=false
    preImgList.value=[]
}

// 活动类型切换
function firstTypeChange() {
    formData.childTypeVal = "";
    typeList.value.forEach((item) => {
        if (item.ActivityTypeId == formData.firstTypeVal) {
            childTypeList.value = item.ChildList||[];
            formData.childTypeVal=childTypeList.value?.[0].ActivityTypeId||''
        }
    });
    initFormData()
}

// 活动类别切换
function childTypeChange(){
    initFormData()
}

// 重置表单
function initFormData(){
    const {firstTypeVal,childTypeVal} = formData
    Object.assign(formData,{
        firstTypeVal:firstTypeVal,
        childTypeVal:childTypeVal,
        ActivityTypeName:'',//活动类别名称
        time:[],
        ActivityName:'',//活动标题
        Speaker:'',
        MainlandTel:'400-810-8228',
        HongKongTel:'+852-30051355',
        TaiwanTel:'',
        AmericaTel:'',
        SingaporeTel:'65 6307-7689',
        ReportLink:'',//报告链接
        ReportName:'',//报告名字
        ReportId:'',//报告id
        IsNewReport:0,
        ParticipationCode:'',//拨号密码
        Audios:[],//音频
        Poster:[],//海报
        LinkParticipants:"",//参会链接
        City:'',//城市
        Address:'',//详细地址
        LimitPeopleNum:'',//限制人数
        Permission:'',//选择的参会权限
    })
    // 分析师电话会初始化活动标题
    if(formData.firstTypeVal==1){
        childTypeList.value.forEach(item=>{
            if(item.ActivityTypeId==formData.childTypeVal){
                formData.ActivityName=item.ActivityTypeName+'电话会'
            }
        })
    }
}

// 点击弹出选择报告
function handleShowSelectReport(){
    showSelectReport.value=true
    getReportList()
}

// 报告类别切换
function handleReportTypeChange(e){
    searchReportVal.value=''
    selectReportTtype.value=e
    getReportList()
}

// 关键词搜索报告
function handleSearchReportList(){
    getReportList()
}

// 获取报告列表
async function getReportList(){
    let reportType='',telClassifyId=0
    //如果是其他电话会,拆分ReportType和ClassifyId
    if(selectReportTtype.value.includes('_')){
    const arr = selectReportTtype.value.split('_')
    reportType = arr[0]
    telClassifyId = Number(arr[1])
    }
    const res=await ficcManageInterface.activityReportList({
        Keyword:searchReportVal.value,
        ReportType:reportType.length?reportType:selectReportTtype.value,
        ClassifyId:reportType.length?telClassifyId:0,
        CurrentIndex: 1,
        PageSize: 5,
    })
    if(res.Ret===200){
        reportList.value=res.Data.List
    }
}

// 保存选择的报告
function handleSaveSelectReport(){
    reportList.value.forEach(item=>{
        if(item.ResearchReportId==formData.ReportId){
            formData.ReportName=item.ResearchReportName
            formData.ReportLink=item.LinkUrl
            // 是否是新后台的报告
            if(selectReportTtype.value=='day'){
                formData.IsNewReport=0
            }else{
                formData.IsNewReport=1
            }
        }
    })
    showSelectReport.value=false
}

/* 选择全选或取消全选 */
function handleCheckAll(item) {
    // 取到所有的子菜单id
    let ids = item.Items.map(item =>{
        return item.ChartPermissionId
    })
    item.CheckList = item.checkAll ? ids : [];	
    item.isIndeterminate = false;
}

/* 复选框組选中时 */
function handleChecked(item) {
    let len = item.CheckList.length;
    item.checkAll = len === item.Items.length;
    item.isIndeterminate = len > 0 && len < item.Items.length;
}

// 海报上传成功回调
function handleUploadPosterSuccess(response, file, fileList){
    formData.Poster=fileList.map(item=>{
        if(typeof item.response === 'string'){
            item.response=parseData(item.response)
        }
        return {name:item.response.Data.ResourceName,...item}
    })
}

// 删除上传的海报
function handlePosterRemove(file,fileList){
    formData.Poster=fileList
}

// 音频上传成功回调
function handleUploadAudioSuccess(response, file, fileList){
    formData.Audios=fileList.map(item=>{
        return {name:item.response.Data.ResourceName,...item}
    })
}

// 删除上传的音频
function handleAudioRemove(file,fileList){
    formData.Audios=fileList
}

// 提交
let formRef = ref(null)
function handleSubmit(e){
    if(e==='cancel'){
        router.go(-1)
        return
    }
    formRef.value?.validate(async (valid)=>{
        if(valid){

            let params={
                ActivityName:formData.ActivityName,
                ActivityTypeId:formData.childTypeVal,
                ActivityTypeName:formData.ActivityTypeName,
                Address:formData.Address,
                AmericaTel:formData.AmericaTel,
                City:formData.City,
                EndTime:formData.time[1],
                HongKongTel:formData.HongKongTel,
                IsLimitPeople:formData.LimitPeopleNum?1:0,//是否限制人数 1是，0否
                LimitPeopleNum:Number(formData.LimitPeopleNum),
                LinkParticipants:formData.LinkParticipants,
                MainlandTel:formData.MainlandTel,
                ParticipationCode:formData.ParticipationCode,
                PermissionIdList:[],//选择的权限
                PosterList:[],//海报数据
                PublishStatus:e==='save'?0:1,//不发布（保存）：0； 发布：1
                Remarks:'',
                ReportLink:formData.ReportLink,//报告链接
                ReportName:formData.ReportName,//报告标题
                ReportId:formData.ReportId||0,//报告id
                IsNewReport:formData.IsNewReport,
                SingaporeTel:formData.SingaporeTel,
                Speaker:formData.Speaker.join(','),
                SpeakerBackgroundPic:'',
                SpeakerHeadPic:'',
                StartTime:formData.time[0],
                TaiwanTel:formData.TaiwanTel
            }

            if(showSelectSpeaker.value){//如果是选择的主讲人 则找出对应的背景图和头像
                let SpeakerBackgroundPicArr=[]
                let SpeakerHeadPicArr=[]
                formData.Speaker.forEach(item=>{
                    speakerList.value.forEach(_item=>{
                        if(_item.SpeakerName===item){
                            SpeakerBackgroundPicArr.push(_item.SpeakerBackgroundPic)
                            SpeakerHeadPicArr.push(_item.SpeakerHeadPic)
                        }
                    })
                })
                params.SpeakerBackgroundPic=SpeakerBackgroundPicArr.join(',')
                params.SpeakerHeadPic=SpeakerHeadPicArr.join(',')
            }

            if(showPermission.value){// 选择的权限
                PermissionList.value.forEach(item=>{
                    params.PermissionIdList.push(...item.CheckList)
                })
            }

            if(showUploadPoster.value){//上传的海报
                params.PosterList=formData.Poster.map(item=>{
                    return {Name:item.name,Url:item.response.Data.ResourceUrl}
                })
            }

            if(!showActivityTypeName.value){//不是手动输入的活动类别
                childTypeList.value.forEach(item=>{
                    if(item.ActivityTypeId==params.ActivityTypeId){
                        params.ActivityTypeName=item.ActivityTypeName
                    }
                })
            }
            
            // 校验
            if(showActivityTypeName.value&&!params.ActivityTypeName){
                ElMessage.warning('请填写活动类别')
                return
            }
            if(!params.StartTime||!params.EndTime){
                ElMessage.warning('请选择活动时间')
                return
            }
            if(!params.ActivityName){
                ElMessage.warning('请填写活动标题')
                return
            }
            if(!params.Speaker){
                if(showSelectSpeaker.value){
                    ElMessage.warning('请选择主讲人')
                }else{
                    if(formData.firstTypeVal==2||formData.firstTypeVal==4){
                        ElMessage.warning('请填写主讲嘉宾')
                    }else{
                        ElMessage.warning('请填写主讲人')
                    }
                }
                return
            }
            if(showUploadPoster.value&&params.PublishStatus==1){
                if(params.PosterList.length==0){
                    ElMessage.warning('请上传活动海报')
                    return
                }
            }
            if(showAddressOrLimitPeople.value&&(!params.City||!params.Address)){
                ElMessage.warning('请填写活动地址')
                return
            }
            if(showAddressOrLimitPeople.value&&!params.LimitPeopleNum){
                ElMessage.warning('参会人数必须大于0')
                return
            }
            // 校验时间
            if((new Date(params.EndTime).getTime()-new Date(params.StartTime).getTime())<1000*60*30){
                ElMessage.warning('活动时长不得小于半小时')
                return 
            }
            if(showPermission.value&&params.PermissionIdList.length<=0){
                ElMessage.warning('请选择参会权限')
                return 
            }

            // console.log(params);
            const res=await ficcManageInterface.activityAdd(params)
            if(res.Ret===200){
                if(e==='save'){
                    ElMessage.success('保存成功')
                }else{
                    ElMessage.success('发布成功')
                }
                setTimeout(() => {
                    router.go(-1)
                }, 1000);
            }
        }else{
            ElMessage.warning('请完善表单项')
        }
    })
}
</script>
<template>
    <div class="ficc-add-activity-wrap">
        <el-form ref="formRef" :model="formData" :rules="formRules">
            <el-form-item label="活动类型" label-width="100px" style="display:inline-block;margin-right:20px" prop="firstTypeVal">
                <el-select
                    v-model="formData.firstTypeVal"
                    placeholder="请选择活动类型"
                    @change="firstTypeChange"
                >
                    <el-option
                        v-for="item in typeList"
                        :key="item.ActivityTypeId"
                        :label="item.ActivityTypeName"
                        :value="item.ActivityTypeId"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动类别" label-width="100px" style="display:inline-block;margin-right:20px" prop="childTypeVal">
                <el-select
                    v-model="formData.childTypeVal"
                    no-data-text="请先选择活动类型"
                    placeholder="请选择活动类别"
                    @change="childTypeChange"
                >
                    <el-option
                        v-for="item in childTypeList"
                        :key="item.ActivityTypeId"
                        :label="item.ActivityTypeName"
                        :value="item.ActivityTypeId"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间" label-width="100px" style="display:inline-block" prop="time">
                <el-date-picker
                    v-model="formData.time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="活动开始时间"
                    end-placeholder="活动结束时间"
                    :default-time="[new Date(2000,1,1,15,30,0),new Date(200,1,1,16,0,0)]"
                    value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <template v-if="formData.firstTypeVal&&formData.childTypeVal">
            <el-form-item label="活动类别" label-width="105px" prop="ActivityTypeName" v-if="showActivityTypeName">
                <el-input placeholder="请输入活动类别" v-model="formData.ActivityTypeName"></el-input>
            </el-form-item>
            <el-form-item label="活动标题" label-width="105px" prop="ActivityName">
                <el-input placeholder="请输入活动标题" v-model="formData.ActivityName"></el-input>
            </el-form-item>
            <el-form-item :label="formData.firstTypeVal==2||formData.firstTypeVal==4?'主讲嘉宾':'主讲人'" label-width="105px" prop="Speaker">
                <template v-if="showSelectSpeaker">
                    <el-select 
                        v-model="formData.Speaker" 
                        placeholder="请选择主讲人" 
                        style="width:100%"
                        multiple
                        filterable>
                        <el-option
                            v-for="item in speakerList"
                            :key="item.SpeakerId"
                            :label="item.SpeakerName"
                            :value="item.SpeakerName"
                        ></el-option>
                    </el-select>
                    <el-image 
                        v-for="item in speakerAvatar"
                        :key="item"
                        style="width: 80px; height: 80px;margin-top:10px"
                        :src="item" 
                        :preview-src-list="[item]">
                    </el-image>
                </template>
                
                <el-input :placeholder="formData.firstTypeVal==2||formData.firstTypeVal==4?'请输入主讲嘉宾':'请输入主讲人'" v-model="formData.Speaker" v-else></el-input>
            </el-form-item>

            <el-form-item label="参会地址" label-width="105px" prop="address" v-if="showAddressOrLimitPeople">
                <div style="display:flex;justify-content: space-between;width:100%;">
                    <el-select
                        v-model="formData.City"
                        placeholder="请选择城市"
                        style="width:15%">
                        <el-option 
                            v-for="item in cityArr" 
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                    <el-input style="width:84%;" placeholder="请输入详细地址" v-model="formData.Address"></el-input>
                </div>
                
            </el-form-item>
            <el-form-item label="参会人数" label-width="105px" prop="LimitPeopleNum" v-if="showAddressOrLimitPeople">
                <el-input v-model="formData.LimitPeopleNum" placeholder="请输入线下参会人数限制"></el-input>
            </el-form-item>
            <el-form-item prop="Permission" v-if="showPermission">
                <p>请选择参会权限（拥有以下任一勾选的权限，才可参会）：</p>
                <ul class="menu_lists">
					<li v-for="item in PermissionList" :key="item.ClassifyName" class="menu_item">
						<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAll(item)" style="margin-right:30px;font-weight:bold;min-width:90px;">{{item.ClassifyName+':'}}</el-checkbox>
						<el-checkbox-group  v-model="item.CheckList" @change="handleChecked(item)">
							<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item">{{list.PermissionName}}</el-checkbox>
						</el-checkbox-group>
					</li>
				</ul>
            </el-form-item>
            <template v-if="formData.firstTypeVal!=3">
            <el-form-item label="大陆拨入号" label-width="105px" prop="MainlandTel">
                <el-input placeholder="请输入大陆拨入号" v-model="formData.MainlandTel"></el-input>
            </el-form-item>
            <el-form-item label="香港拨入号" label-width="105px" prop="HongKongTel">
                <el-input placeholder="请输入香港拨入号" v-model="formData.HongKongTel"></el-input>
            </el-form-item>
            <el-form-item label="台湾拨入号" label-width="105px" prop="TaiwanTel">
                <el-input placeholder="请输入台湾拨入号" v-model="formData.TaiwanTel"></el-input>
            </el-form-item>
            <el-form-item label="新加坡拨入号" label-width="105px" prop="SingaporeTel">
                <el-input placeholder="请输入新加坡拨入号" v-model="formData.SingaporeTel"></el-input>
            </el-form-item>
            <el-form-item label="美国拨入号" label-width="105px" prop="AmericaTel">
                <el-input placeholder="请输入美国拨入号" v-model="formData.AmericaTel"></el-input>
            </el-form-item>
            <el-form-item label="拨入密码" label-width="105px" prop="ParticipationCode">
                <el-input placeholder="请输入拨入密码" type="number" v-model="formData.ParticipationCode"></el-input>
            </el-form-item>
            </template>
            <el-form-item label="参会链接" label-width="105px" prop="LinkParticipants" v-if="formData.firstTypeVal!=1">
                <el-input placeholder="请输入参会链接" v-model="formData.LinkParticipants"></el-input>
            </el-form-item>

            <el-form-item label="报告链接" label-width="105px" prop="ReportLinkUrl" v-if="showSelectReportUrl">
                <el-input placeholder="请选择报告链接" v-model="formData.ReportLink" readonly style="width:500px;margin-right:20px"></el-input>
                <el-button type="primary" @click="handleShowSelectReport">选择报告</el-button>
            </el-form-item>

            <el-form-item label="活动海报" label-width="105px" prop="poster" v-if="showUploadPoster">
                <el-upload
                class="ficc-upload-wrap"
                :action="uploadApi"
                :on-remove="handlePosterRemove"
                :on-success="handleUploadPosterSuccess"
                accept="image/*"
                :on-preview="handlePreImg"
                multiple
                :file-list="formData.Poster">
                    <el-button type="primary">上传活动海报</el-button>
                </el-upload>
            </el-form-item>
            
            <div style="text-align:center;margin:30px 0">
                <el-button type="primary" style="width:120px" @click="handleSubmit('save')">保存</el-button>
                <el-button type="primary" style="width:120px" @click="handleSubmit('publish')">发布</el-button>
                <el-button type="primary" plain style="width:120px" @click="handleSubmit('cancel')">取消</el-button>
            </div>
            </template>

        </el-form>

        <!-- 选择报告弹窗 -->
        <el-dialog  
            :append-to-body="true" 
            v-model="showSelectReport" 
            width="50vw" 
            title="选择报告"
            center
        >
            <div class="ficc-activity-selectreport-wrap">
                <div class="left-btn-box">
                    <el-button 
                        v-for="item in reportTypeList"
                        :key="item.val"
                        :type="selectReportTtype==item.val?'primary':''" 
                        @click="handleReportTypeChange(item.val)">{{item.name}}</el-button>
                </div>
                <div class="right-box">
                    <el-input v-model="searchReportVal" @input="handleSearchReportList" placeholder="标题关键字搜索" style="width:100%"></el-input>
                    <el-table :data="reportList" border style="margin-top:20px">
                        <el-table-column align="center" label="报告标题">
                            <template #default="scope">
                                <div style="text-align:left">
                                    <el-radio 
                                        v-model="formData.ReportId" 
                                        :label="scope.row.ResearchReportId"
                                    ><span style="white-space: normal;">{{ scope.row.ResearchReportName }}</span></el-radio>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="创建时间">
                            <template #default="scope">
                                {{scope.row.CreatedTime}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align:center;margin:30px 0">
                        <el-button type="primary" @click="handleSaveSelectReport">保存</el-button>
                        <el-button type="primary" plain @click="showSelectReport=false">取消</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 图片预览 -->
		<el-image-viewer 
		v-if="showPreImg" 
        @close="closePreImg" 
		:url-list="preImgList" />
    </div>
</template>
<style lang="scss" scoped>
.ficc-add-activity-wrap {
    div {
        box-sizing: border-box;
    }
    min-height: 80vh;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 30px;
    .menu_lists {
		padding: 40px 18px;
		border: 1px dashed #AAB4CC;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 40px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 30px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
    :deep(.ficc-upload-wrap){
        display: flex;
        .el-upload-list{
            margin-left: 30px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            flex: 1;
            .el-upload-list__item{
                min-width: 200px;
                max-width: 300px;
                margin-right: 10px;
                &:first-child{
                    margin-top: 5px;
                }
            }
        }
    }
}
.ficc-activity-selectreport-wrap{
    display: flex;
    .left-btn-box{
        .el-button{
            background-color:#ECF5FF;
            border: 1px solid #B3D8FF;
            color:#409EFF;
            display: block;
            margin-left: 0;
            margin-bottom: 20px;
            width: 90px;
            white-space: normal;
            padding:0;
        }
        .el-button--primary{
            background-color:#409EFF;
            border:none;
            color: #FFFFFF;
        }
    }
    .right-box{
        flex: 1;
        margin-left: 30px;
        .el-radio{
            display: flex;
        }
    }
}
</style>
