<style lang="scss" scoped>
.preview {
  .aname{
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 16px;
  }
  .ainfo{
    display: flex;
    margin-bottom: 10px;
    p{
      width: 60%;
      margin-left: 15px;
      line-height: 26px;
    }
  }
  b{
    color: #333;
  }
  div{
    line-height: 26px;
    margin-bottom: 10px;
  }
}
.content .title {
    height: 32px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 25px;
}
.el-form{
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    .el-select,.el-range-editor--small.el-input__inner{
        width:100%;
    }
}
/deep/.el-tabs__header{
    margin:0;
    .el-tabs__active-bar{
        height:0px;
    }
    .el-tabs__item{
        width: 160px;
        height: 40px;
        text-align: center;
        border-radius: 8px 8px 0px 0px;
        color:#333333;
        background: #ECECEC;
        margin-right:10px;
    }
    .el-tabs__item.is-active{
        background: #3895FE;
        
        color:#ffffff;
        
    }
}
.el-button{
    width:120px;
    height:36px;
}
// 上传

/deep/.avatar-uploader .el-upload {
    width: 148px;
    height: 148px;
    line-height: 148px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .avatar{
        width: 100%;
        height: 100%;
    }
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 68px;
    height: 68px;
    line-height: 68px;
    text-align: center;
}
.avatar {
    width: 68px;
    height: 68px;
    display: block;
}
/deep/.speaker_avatar .el-upload{
    width: 80px;
    height: 80px;
    line-height: 80px;
}
.hotel_imgs {
    /deep/.el-upload--picture-card{
    width:79px;
    height: 79px;
    line-height: 79px;
    }   
}

</style>
<template>
    <section>
        <p><span>活动管理></span>新增活动</p>
        <div class="content" v-loading='loading' element-loading-background="rgba(0, 0, 0, 0)">
            <!-- <div class="title">新增会议</div> -->
            <el-form size="small" label-width="140px" class='over_y' ref="form" :model="form" :rules="rules">
              <el-form-item label="发布单位：" prop='journal_id' >
                    <el-select :disabled='disabled' placeholder="请选择发布单位" v-model="form.journal_id" filterable>
                        <el-option
                            v-for="(item, index) in journalList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动名称："  prop='name' >
                    <el-input
                        placeholder="请输入活动名称"
                        v-model="form.name"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="主办方：">
                            <el-input
                                placeholder="请输入主办方"
                                v-model="form.the_host"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="承办方：">
                            <el-input
                                placeholder="请输入承办方"
                                v-model="form.to_undertake"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item label="会议时间：" prop='time'>
                            <el-date-picker
                                v-model="form.time"
                                type="daterange" value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="城市：" prop='citys' >
                            <el-cascader style="width:100%;"
                                v-model="form.citys" :props='props'
                                :options="cityList"
                                @change="handleChangeCity">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    
                    <el-col :span="24" >
                        <el-form-item label="地址" prop='address' >
                            <el-input placeholder="请输入详细地址" v-model="form.address"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-form-item label='活动简介：'>
                    <el-input type='textarea' v-model="form.desc" :rows="3" placeholder="请输入活动介绍"></el-input>
                </el-form-item>
                <el-row>
                  
                    <el-col :span="8">
                        <el-form-item label='是否热门：'>
                            <el-switch
                                v-model="form.is_hot"
                                active-text="热门"
                                inactive-text="不热门">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label='是否推荐：'>
                            <el-switch
                                v-model="form.is_recommend"
                                active-text="推荐"
                                inactive-text="不推荐">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if='!old'>
                        <el-form-item label='是否可报名：'>
                            <el-switch
                                v-model="form.is_signup"
                                active-text="是"
                                inactive-text="否">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label='封面图：'  prop='img' >
                    <el-upload
                        class="avatar-uploader"
                        action="/api/admin/uploadfile"
                        :show-file-list="false"
                        :on-progress='handleAvatarProgress'
                        :on-success="handleAvatarSuccess">
                        <img v-if="form.img"   :src="form.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span style='font-size:12px;color:#999999;'>建议图片尺寸比例为：210*160,单张图片小于10M,格式要求jpg,jpeg,png</span>
                </el-form-item>
                <el-form-item label=''>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="活动详情" name="first">
                            <fuEditor :value='form.content' ref="editor"></fuEditor>
                        </el-tab-pane>
                        <el-tab-pane label="主讲人" name="second">
                            <section style="height:544px;padding:10px 0px;border:1px solid #ccc;">
                                <div v-for='(item,index) in form.speaker' :key='index' class='speaker'>  
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="主讲人姓名">
                                            <el-input placeholder="请输入主讲人姓名" v-model="item.name"></el-input>
                                        </el-form-item>
                                        <el-form-item label="主讲人简介">
                                            <el-input type="textarea" placeholder="请输入主讲人简介" v-model="item.intruduce"></el-input>
                                        </el-form-item>
                                    </el-col>
                                  
                                    <el-col :span="8">
                                        <el-form-item label="主讲人头像">
                                            <el-upload
                                                class="avatar-uploader speaker_avatar"
                                                action="/api/admin/uploadfile"
                                                :show-file-list="false"
                                                :on-progress='handleAvatarProgress'
                                                :on-success="(res,file)=>{handleAvatarSuccess1(index,res,file)}">
                                                <img v-if="item.img" :src="item.img" class="avatar">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                    
                                    <el-col :span="4">
                                        <el-button v-if='index==0' size="mini" type="primary" plain @click='addSpeaker' icon="el-icon-plus">添加主讲人</el-button>
                                        <el-button v-else type="danger" size="mini" plain @click='clearSpeaker(index)'>删除</el-button>
                                    </el-col>
                                </el-row>
                                </div>
                            </section>
                        </el-tab-pane>
                    </el-tabs>
                </el-form-item>
                <el-form-item style="position:fixed;bottom:20px;right:60px;">
                    <el-button type="primary" @click="view">预览</el-button>
                    <el-button @click="save" type='success'>发布</el-button>
                    <!-- <el-button type='default'>保存并新增</el-button> -->
                    <!-- <el-button v-if='id' type="danger" plain>删除</el-button> -->
                     <el-button type='info' plain @click="$router.go(-1)">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog
        title=""
        :visible.sync="open"
        width="414px">
        <div class="preview">
            <p class="aname">{{form.name}}</p>
            <div class="ainfo">
            <img width="100" :src="form.img" alt="">
            <p>
                发布单位：{{journal_name}} <br>
                主办方：{{form.the_host}} <br>
                承办方：{{form.to_undertake}} <br>
                活动时间：{{form.begin_time}} 
            </p>
            </div>
            <b>活动简介</b>
            <div class="adesc">{{form.desc}}</div>
            <b>活动内容</b>
            <div v-html="form.content"></div>
        </div>
        </el-dialog>
    </section>
</template>
<script>
import fuEditor from '../../components/fuEditor'
export default {
    components: {
        fuEditor,
    },
    data() {
        return {
            open:false,
            signup_fields:[
                    { name: "姓名", id: "name" },
                    { name: "性别", id: "sex" },
                    { name: "年龄", id: "age" },
                    { name: "职务", id: "job" },
                    { name: "职称", id: "title" },
                    { name: "公司", id: "company" },
                    { name: "电话", id: "phone" },
                    { name: "邮箱", id: "email" }
            ],
            form: {
                is_signup:0,
                is_popular:0,
                is_recommend:0,
                citys:[],
                signup_fields:[],
                speaker:[
                    {name:'',intruduce:''}
                ],
                img:'',
                journal_id:''
            },
            optionList: [
                { name: "成都交通", id: "1" },
                { name: "成都交通", id: "1" },
            ],
            
            journalList:[],
            cityList:[],
            activeName:'first',
            imageUrl:"",
            props:{
                value:'name'
            },
            loading:false,
            journal_name:'',
            rules: {
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
                journal_id: [
                { required: true, message: "请选择发布单位", trigger: "change" },
                ],
                time: [
                { required: true, message: "请选择会议时间", trigger: "blur" },
                ],
                citys: [
                { required: true, message: "请选择城市", trigger: "change" },
                ],
                address: [{ required: true, message: "请输入地址", trigger: "blur" }],
                img: [{ required: true, message: "请上传封面图", trigger: "blur" }],
            },
            old:0,  //是否为回顾
            disabled:false
        };
    },
    methods: {
        /**预览 */
        view(){
            var content=this.$refs.editor.getEditor()
            this.form.content=content;
            let journal=this.journalList.filter(item=>item.id == this.form.journal_id)
            if(journal.length>0){
                this.journal_name=journal[0].name
            }
            this.open=true;
        },
        save(){
            var content=this.$refs.editor.getEditor()
            var form=this.form;
            form.content=content;
            form.city=form.citys.join(' ');
            if(form.time){
                form.begin_time=form.time[0]
                form.end_time=form.time[1]
            }
            let type = this.$route.query.type;
            form.type = type?type:0;
            // form.organizer_name=this.organizerList.filter(item=>item.id==form.organizer_id)[0].name
            this.$refs["form"].validate((valid) => {
                
                if (valid) {
                    if(this.id){
                        this.$api.updateActivity(form).then(res=>{
                            if(res.data.code == 0){
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                                this.$router.go(-1)
                                
                            }else{
                                this.$message({
                                    message: res.data.message,
                                    type: 'error'
                                })
                            }
                        })
                    }else{
                        this.$api.addActivity(form).then(res=>{
                            if(res.data.code == 0){
                                this.$message({
                                    message: '发布成功',
                                    type: 'success'
                                })
                                this.$router.go(-1)
                            }else{
                                this.$message({
                                    message: res.data.message,
                                    type: 'error'
                                })
                            }
                        })
                    }
                }
            })
        },
        //封面
        handleAvatarProgress(){
        this.loading=true
        },
        handleAvatarSuccess(res, file) {
            this.$set(this.form,'img',file.response.data)
            this.loading=false
        },
        //主讲人
        handleAvatarSuccess1(index,res, file) {
            var speaker=this.form.speaker[index];
            this.$set(speaker,'img',file.response.data)
            this.$set(this.form.speaker,index,speaker)
            this.loading=false
        },
        beforeAvatarUpload(){

        },
        handleClick(){

        },
        addSpeaker(){
            this.form.speaker.push({name:'',intruduce:''})
        },
        clearSpeaker(index){
            this.form.speaker.splice(index,1)
        },
        addHotelType(){
            this.form.hotel.type.push({})
        },
        handleChangeCity(value){
            // console.log(value,222222222)
        },
        gopage(size) {
            if (size) {
                this.form.page_size = size;
            }
            this.form.page = this.$refs.pageButton.page;
            this.getData();
        },
        getPermissions() {
            this.$api.getUserPermissions().then((res) => {
                this.data = res.data.data;
            });
        },
        getData() {
            this.$api.searchJournalList().then((res) => {
                this.journalList = res.data.data;
            });
            this.$api.getCityList().then((res) => {
                this.cityList = res.data.data;
            });
        },
    },
    created() {
        this.getData()
        if(this.$route.path.indexOf('old')>=0){
            this.old=1
        }
        if(this.$route.query.jid){
            this.form.journal_id=Number(this.$route.query.jid)
            this.disabled=true
        }
        if(this.$route.query.id){
            this.id=this.$route.query.id;
            this.$api.getActivity({id:this.id}).then(res=>{
                if(res.data.code != 0){
                    this.$message({
                            message: res.data.message,
                            type: 'error'
                    })
                    return
                }
                this.form=res.data.data
                this.form.is_popular=Boolean(this.form.is_popular)
                this.form.is_recommend=Boolean(this.form.is_recommend)
                this.form.is_signup=Boolean(this.form.is_signup)
                this.form.citys=this.form.city.split(' ')
                this.form.time=[this.form.begin_time,this.form.end_time]
                if(!this.form.speaker){
                    this.form.speaker=[{}]
                }
            })
        }
    },
};
</script>
