<template>
  <div class="add-manager-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="add-content screenSet" id="screenSet">
			
			<div class="discuss-opt">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="讨论主题" required>
						<el-col :span="8">
						  <el-input v-model="form.subject" size="mini" type="textarea" :maxLength="maxTopic"></el-input>
						</el-col>
						
					</el-form-item>
					<el-form-item label="分类" required>
						<el-col :span="8">
						  <el-select size="mini" v-model="form.deriverName" placeholder="请选择">
								<el-option
									v-for="item in derivers"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-col>
						
					</el-form-item>
					
					<el-form-item label="内容发布控制">
						<div>
							<span class="label-name">话题</span>
							<el-radio v-model="form.ht" label="1" >允许</el-radio>
							<el-radio v-model="form.ht" label="0" >不允许</el-radio>
						</div>
						<!-- <div>
							<span class="label-name">评论</span>
							<el-radio v-model="form.pl" label="1" >允许</el-radio>
							<el-radio v-model="form.pl" label="0" >不允许</el-radio>
						</div> -->
						<div>
							<span class="label-name">回复</span>
							<el-radio v-model="form.displayReplyBtn" :label="1" >允许</el-radio>
							<el-radio v-model="form.displayReplyBtn" :label="2" >不允许</el-radio>
							<span class="label-name">前端展示数量:</span>
							<el-input-number v-model="form.replyShowNum" controls-position="right" :min="0"></el-input-number>
							<el-checkbox v-model="form.replyOfficial" style="margin-left: 20px">置顶官方回复</el-checkbox>
						</div>
						<div>
							<span class="label-name">点赞</span>
							<el-radio v-model="form.displayLikeBtn" :label="1" >允许</el-radio>
							<el-radio v-model="form.displayLikeBtn" :label="2" >不允许</el-radio>
						</div>
					</el-form-item>
					<el-form-item label="审核规则" required>
						<div>
							<span class="label-name">文字</span>
							<el-radio v-model="form.wz" label="2" disabled>先审后显示</el-radio>
							<el-radio v-model="form.wz" label="4" disabled>后审先显示</el-radio>
						</div>
						<div>
							<span class="label-name">图片</span>
							<el-radio v-model="form.tp" label="8" disabled>先审后显示</el-radio>
							<el-radio v-model="form.tp" label="16" disabled>后审先显示</el-radio>
						</div>
						
					</el-form-item>
					<el-form-item label="开放客群" required>
						<el-checkbox label="注册用户" v-model="form.isZC"></el-checkbox>
						<el-checkbox label="认证用户" v-model="form.isRZ"></el-checkbox>
					</el-form-item>
					<el-form-item label="发布按钮文案" required>
						<el-row>
							<el-col :span="6">
								<div>
									<span class="label-name label-f">话题发布</span>
									<el-input v-model="form.topicBtnText" size="mini" style="width: 100px;"  :maxLength="maxBtn"></el-input>
								</div>
							</el-col>
							<el-col :span="10">
								<div>
									<span class="label-name label-w">输入界面title文案</span>
									<el-input v-model="form.inputTitle" size="mini" style="width: 100px;" :maxLength="5"></el-input>
								</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6">
								<div>
									<span class="label-name label-f">评论发布</span>
									<el-input v-model="form.commentBtnText" size="mini" style="width: 100px;" :maxLength="maxBtn"></el-input>
								</div>
							</el-col>
							<el-col :span="12">
								<div>
									<span class="label-name label-w">输入界面提示文案</span>
									<el-input v-model="form.inputReminder" size="mini" style="width: 260px;"  :maxLength="15"></el-input>
								</div>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="底Bar显示控制">
						<el-radio v-model="form.displayBar" :label="1">评论+点赞</el-radio>
						<el-radio v-model="form.displayBar" :label="2">仅评论</el-radio>
						<el-radio v-model="form.displayBar" :label="3">无</el-radio>
					</el-form-item>
					<el-form-item label="列表排序控制">
						<el-radio v-model="form.displayListSort" :label="1">综合排序</el-radio>
						<el-radio v-model="form.displayListSort" :label="2">按最新发布时间</el-radio>
						<el-radio v-model="form.displayListSort" :label="3">按最高点赞数</el-radio>
					</el-form-item>
					<el-form-item label="话题列表页标题文案"  label-width="140px">
						<div>
							<el-input v-model="form.commentListDetails" size="mini" style="width: 100px;"  :maxLength="maxBtn"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="话题详情页话题文案"  label-width="140px">
						<div>
							<el-input v-model="form.commentDetails" size="mini" style="width: 100px;"  :maxLength="maxBtn"></el-input>
						</div>
					</el-form-item>
					<el-form-item label="是否仅显示评论区" label-width="110px">
						<el-radio v-model="form.displayOnlyComment" :label="1">是</el-radio>
						<el-radio v-model="form.displayOnlyComment" :label="2">否</el-radio>
					</el-form-item>
					<el-form-item label="备注">
						<el-col :span="8">
						  <el-input v-model="form.remark" size="mini" type="textarea" :maxLength="maxTopic"></el-input>
						</el-col>
					</el-form-item>
				</el-form>
				<div class="btn-box pdrt20">
					<el-button type="primary" size="small" class="button-green" @click="save">保存</el-button>
					<el-button size="small" class="button-white" @click="goBack">返回</el-button>
				</div>
			</div>
      
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { returnData } from "../mock";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    
    return {
			curmbFirst:'讨论组件',
			curmbSecond:'新建',
				derivers:[
				{
					value:'直播',
					label:'直播'
				},
				{
					value:'发现',
					label:'发现'
				},
				{
					value:'课程',
					label:'课程'
				},
				{
					value:'积木',
					label:'积木'
				},
			],
			maxBtn:4,
			form:{
				subject:'',
				ht:'1',
				wz:'4',
				tp:'16',
				user:'1',
				isZC:false,
				isRZ:false,
				zc:4,
				rz:8,
				topicBtnText:'发布话题',
				commentBtnText:'发布评论',
				commentDetails:'全部评论',
				commentListDetails: '热门话题',
				displayTopicBtn:true,//是否显示发布话题按钮
				// displayCommentBtn:true,//是否显示评论按钮
				displayReplyBtn: 1,//是否显示回复按钮
				displayLikeBtn: 1,//是否显示点赞按钮
				remark:'',
				deriverName:'积木',
				replyShowNum: 5,
				replyOfficial: false,
				inputTitle: '话题发布',
				inputReminder: '',
				displayBar: 1,
				displayListSort: 1,
				displayOnlyComment: 2
			},
			maxTopic:60,
			id:0,
    };
  },
  computed: {
    ...mapGetters(["_token", "idType"])
  },
  created() {
		this.id = this.$route.query.id
		if(this.id){
			this.curmbSecond = '编辑'
			this.getDissById(this.id)
		}
   
    
  },
  // 挂载到Dom完成时
  mounted: function() {
    
  },
  methods: {
		
		//返回
		goBack(){
			this.$router.back(-1)
		},
		
		showError(str){
			this.$message({
			  message: str,
			  type: 'warning'
			});

		},
		
		//保存讨论
		save(){
			let visibility = 0,
					auditRules = 0,_this = this;
			if(this.form.isRZ){
				visibility = 8
			}
			if(this.form.isZC){
				visibility = 4
			}
			if(this.form.isRZ && this.form.isZC){
				visibility = 12
			}
			
			if(this.form.subject == ''){
				console.log(this.form.subject)
				this.showError('请输入讨论主题')
				return;
		
			}
			
			if(visibility == 0){
				this.showError('请选择开发客群');
				return;
			}

			if(this.form.topicBtnText == ''){
				this.showError('请输入话题发布按钮文字');
				return;
			}
			if(this.form.commentBtnText == ''){
				this.showError('请输入评论发布按钮文字');
				return;
			}
			if(this.form.inputTitle == ''){
				this.showError('请输入输入界面title文案');
				return;
			}
			
			auditRules = Number(this.form.wz) + Number(this.form.tp)

			
			let parm = {
				"auditrules": auditRules,
				"commentbtntext": this.form.commentBtnText,
				"commentDetails": this.form.commentDetails,
				'commentListDetails': this.form.commentListDetails,
				//"deleteflag": 0,
				//"derivedid": 0,
				"category": this.form.deriverName,
				// "displaycommentbtn": this.form.pl == 1 ? true : false,
				"displaytopicbtn": this.form.ht == 1 ? true : false,
				"displayReplyBtn": this.form.displayReplyBtn,
				"displayLikeBtn": this.form.displayLikeBtn,
				"replyShowNum": this.form.replyShowNum,
				"replyOfficial": this.form.replyOfficial ? 1 : 2,
				"inputTitle": this.form.inputTitle,
				"inputReminder": this.form.inputReminder,
				"displayBar": this.form.displayBar,
				"displayListSort": this.form.displayListSort,
				"displayOnlyComment": this.form.displayOnlyComment,
				//"id": 0,
				"subject":this.form.subject,
				"topicbtntext": _this.form.topicBtnText,
				"visibility": visibility,
				"remark":this.form.remark
			}
			if(this.id){
	
				parm.id = Number(this.id)
				this.PUT('/interaction/discuss/',parm).then((res) => {
				   // closeLoading(vm)
				    if( res.code == '000000' ) {
				        this.$message({
				          message: '保存成功！',
				          type: 'success'
				        });
								setTimeout(()=>{
									this.goBack()
								},1500)
				    }
				})
			}else{
				this.POST('/interaction/discuss/',parm).then((res) => {
				   // closeLoading(vm)
				    if( res.code == '000000' ) {
				        this.$message({
				          message: '保存成功！',
				          type: 'success'
				        });
								setTimeout(()=>{
									this.goBack()
								},1500)
				    }
				})
			}
			
		},
		
   
		//获取讨论组件详细
		getDissById(id){
			
			 this.GET('/interaction/discuss/'+id).then((res) => {
			   // closeLoading(vm)
			    if( res.code == '000000' ) {
						
							this.id = res.data.id
							this.form.subject = res.data.subject
							this.form.deriverName = res.data.category
							// 发布按钮文案
			        this.form.topicBtnText = res.data.topicbtntext == null ? '' : res.data.topicbtntext
							this.form.commentBtnText = res.data.commentbtntext
							this.form.inputTitle = res.data.inputTitle || '话题发布'
							this.form.inputReminder = res.data.inputReminder
							// title文案
							this.form.commentDetails = res.data.commentDetails
							this.form.commentListDetails = res.data.commentListDetails
							// 备注
							this.form.remark = res.data.remark
							
							//开放客群
							if(res.data.visibility == 14 || res.data.visibility == 12){
									this.form.isRZ = true
									this.form.isZC = true
							}else if(res.data.visibility == 6){
									this.form.isRZ = false
									this.form.isZC = true
							}else if(res.data.visibility == 10){
									this.form.isRZ = true
									this.form.isZC = false
							}
							
							//审核规则
							if(res.data.auditrules == 18){
								this.form.wz = "2"
								this.form.tp = "16"
							}else if(res.data.auditrules == 10){
								this.form.wz = "2"
								this.form.tp = "8"
							}else if(res.data.auditrules == 12){
								this.form.wz = "4"
								this.form.tp = "8"
							}else if(res.data.auditrules == 20){
								this.form.wz = "4"
								this.form.tp = "16"
							}
							
							//内容发布控制
							this.form.ht = res.data.displaytopicbtn ? "1" : "0"
							// this.form.pl = res.data.displaycommentbtn ? "1" : "0"
							this.form.displayReplyBtn = res.data.displayReplyBtn
							this.form.displayLikeBtn = res.data.displayLikeBtn
							this.form.replyShowNum = res.data.replyShowNum
							this.form.replyOfficial = res.data.replyOfficial == 1 ? true : false

							// 底部bar  列表排序   显示评论区
 							this.form.displayBar = res.data.displayBar
							this.form.displayListSort = res.data.displayListSort
							this.form.displayOnlyComment = res.data.displayOnlyComment
			    }
			})
		}
  }
};
</script>
<style lang="scss">
	.discuss-opt{
		padding:20px;
		.btn-box{
			text-align: center
		}
		.label-name{
			font-size: 12px;
			color:#606266;
			padding-right:10px;
			display: inline-block;
		
			
		}
		.label-f{
				width: 80px;
		}
		.label-w {
			width: 110px
		}
		.pdrt20{
			padding:20px  0;
		}
		.el-radio__label,.el-checkbox__label{
			font-size: 12px;
		}

	}
	
.add-manager-wrap {
  .add-content {
    background: #fff;
  }
  .rim {
    border: 1px solid #dddddd;
  }
  .step-content {
    overflow: hidden;
    height: 60px;
    margin-top: 66px;
    padding-top: 15px;
    border-bottom: 1px solid #fff;
    .is-text {
      display: none;
    }
    .el-steps--simple {
      background: #fff;
    }
    .button-green {
      color: #ffffff;
      background: #449284;
      border-color: #bfdad5;
      border-radius: 2px;
    }
    .button-white {
      color: #606266;
      background: #ffffff;
      border-color: #ecedf1;
      border-radius: 2px;
    }
    .step-num {
      display: block;
      font-size: 12px;
      border: 2px solid #b8babe;
      border-radius: 50%;
      width: 25px;
      height: 20px;
      line-height: 15px;
      text-align: center;
      color: #b8babe;
    }
    .is-finish {
      color: #c0c4cc;
    }
    .on-step {
      color: #747476;
      border-color: #747476;
    }
  }
  .first-step {
    margin-top: 20px;
    .bg-uploader {
      img {
        float: left;
      }
      .bg-img {
        width: 84px;
        height: 100px;
      }
      .bg-video {
        float: left;
        width: 100px;
        height: 100px;
      }
      .limit-text {
        float: left;
        margin-left: 10px;
        margin-top: -10px;
        p {
          font-size: 12px;
          color: #999;
        }
      }
    }
    .el-upload__tip {
      position: absolute;
      top: -6px;
      left: 130px;
    }
    .choose-button {
      background: #fff;
      color: #409eff;
      border: 1px solid #409eff;
    }
  }
  .second-step {
    margin: 10px 0 0 20px;
    //隐藏树展开
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
    .el-tree-node__expand-icon {
      display: none;
    }
    .el-table__header-wrapper {
      .el-checkbox__inner {
        //display: none;
        //visibility: hidden;
      }
    }
    .department {
      margin-top: 20px;
      border: 1px solid #dddddd;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .el-tabs__active-bar {
      display: none;
    }
    #tab-first,
    #tab-second,
    #tab-third {
      padding-right: 0px;
    }
    #tab-first::after,
    #tab-second::after,
    #tab-third::after {
      color: #c7cbd2;
      margin-left: 20px;
      content: "•";
    }
    .el-tag {
      margin: 0 10px 10px 0;
      border: 1.3px solid #48a8fe;
      color: #1e92fe;
      background-color: #e7f6fe;
      .el-icon-close {
        width: 13px;
        height: 13px;
        line-height: 13px;
        font-size: 12px;
        background-color: #0486fe;
        border-radius: 50%;
        color: #d4edfe;
      }
    }
  }
  .third-step {
    margin: 30px 0 0px 30px;
    padding-bottom: 30px;
  }
}
</style>