<style>
.postPublishing {
  width: 100%;
  height: 100%;
  background: #FFF;
 
}
.postPublishing .box{
	padding: 0 15px;
}
.postPublishing .box-item{
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #E2E2E2;
	display: flex;
	align-items: center;
}
.postPublishing .pubox{
	width: 100%;
	
	padding:0 15px;
}
.postPublishing .pubox-top{
	width: 100%;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: #111;
}
::-webkit-scrollbar{
 
   display:none;
 
}
.postPublishing .foritem{
	height: 30px;
	font-size: 12px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	border-radius: 15px;
	margin-right: 25px;
	margin-bottom: 15px;
}
.postPublishing .flex-row{
	display: flex;align-items: center;
}
.postPublishing .slot-btn{
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: rgb(244, 245, 246);
	border-radius: 10rpx;
	margin-left: 5px;
}
.postPublishing .slot-btn .mian-title {
	font-size: 28rpx;
	color: #888;
	font-weight: 600;
	margin: 10rpx 0;
}
.postPublishing .release{
	width: 100%;
	height: 45px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #FFFFFF;
	margin: 30px 0;
}
.ht-box{
		padding:0 15px;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}
.continue{
	width: 100%;height: 35px;display: flex;align-items: center;justify-content: center;font-size: 12px;
}
.box-top{
	width: 100%;
	height: 180px;
	border-radius: 15px;
	overflow: hidden;
	position: relative;
	background: #F5F5F5;
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.box-top-z{
	width: 100%;
	height: 100%;
	border-radius: 15px;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

<template>
  <view class="postPublishing" :style="{ height: contentHeight }">
    <view class="box">
		<view class="box-top" @click="scimg()">
			<image :src="addMsg.ImageList[0]" style="width: 100%;height: 100%;" mode="aspectFill"></image>
			<view class="box-top-z" :style="{'background':addMsg.ImageList.length>0?'rgba(17, 17, 17, 0.2)':'transparent'}">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/blind_xj.png" style="width: 40px;height: auto;" mode="widthFix"></image>
			</view>
			
		</view>
		<view class="box-item" style="justify-content: space-between;" @click="show=true">
			<text style="font-size:12px;color: #666666;">选择分类</text>
			<view class="flex-row" >
				<text style="margin-right: 5px;font-size:12px;color: #999999" v-if="addMsg.ForumId==0">选择合适的贴吧</text>
				<text style="margin-right: 5px;font-size:12px;color: #111111" v-if="addMsg.ForumId>0">{{ForumName}}</text>
				<u-icon name="arrow" color="#A5A4AC" size="30" ></u-icon>
			</view>
		</view>
		<view class="box-item" style="justify-content: space-between;"  >
			<text style="font-size:12px;color: #666666;">主题</text>
			<view class="flex-row">
				<input type="text" v-model="addMsg.ActivityTitle" :min='0' placeholder="活动标题" style="font-size: 12px;text-align: right;">
			</view>
		</view>
		<view class="box-item" style="justify-content: space-between;height: 70px;"  >
			<text style="font-size:12px;color: #666666;">标签</text>
			<div>
				<view class="flex-row" style="justify-content: flex-end;margin-bottom: 5px;">
					<u-tag :text="x" mode="dark" :bg-color="mainColor" size='mini' style='margin-left: 5px;' v-for="(x, i) in addMsg.LabelList" :key="i" closeable @close="tagClick(i)"/>
				</view>
				<view class="flex-row"  style="justify-content: flex-end;">
					<input type="text" v-model="labeldemo" :min='0' :maxlength="5" placeholder="活动标签" style="font-size: 12px;text-align: right;margin-right: 5px;">
					<text style="color: #999999;font-size: 10px;">
						{{labeldemo.length}}/5
					</text>
					
					<u-button @click="addlable" size='mini' style='margin-left: 5px;'>添加</u-button>
				</view>
			</div>
			
		</view>
		<view class="box-item" style="justify-content: space-between;" >
			<text style="font-size:12px;color: #666666;">是否开启报名</text>
			<view class="flex-row">
				<u-radio-group v-model="addMsg.IsOpenEnroll" >
					<u-radio 
						shape="circle"
						v-for="(item, index) in kqlist" :key="index" 
						:name="item.id"
						:active-color="mainColor"
						icon-size='34'
						label-size='24'
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="box-item" style="justify-content: space-between;" v-if="addMsg.IsOpenEnroll==1" @click="showtime = true,defaulttime= addMsg.Deadline,timetype=1">
			<text style="font-size:12px;color: #666666;">报名截止日期</text>
			<view class="flex-row">
				<text style="margin-right: 5px;font-size:12px;color: #999999" v-if="addMsg.Deadline==''">请选择时间</text>
				<text style="margin-right: 5px;font-size:12px;color: #111111" v-else>{{addMsg.Deadline}}</text>
				<u-icon name="arrow" color="#A5A4AC" size="30" ></u-icon>
			</view>
		</view>
		<view class="box-item" style="justify-content: space-between;"  @click="showtime = true,defaulttime= addMsg.StartTime,timetype=2">
			<text style="font-size:12px;color: #666666;">活动开始时间</text>
			<view class="flex-row">
				<text style="margin-right: 5px;font-size:12px;color: #999999" v-if="addMsg.StartTime==''">请选择活动开始时间</text>
				<text style="margin-right: 5px;font-size:12px;color: #111111" v-else>{{addMsg.StartTime}}</text>
				<u-icon name="arrow" color="#A5A4AC" size="30" ></u-icon>
			</view>
		</view>
		<view class="box-item" style="justify-content: space-between;"  @click="showtime = true,defaulttime= addMsg.EndTime,timetype=3">
			<text style="font-size:12px;color: #666666;">活动结束时间</text>
			<view class="flex-row">
				<text style="margin-right: 5px;font-size:12px;color: #999999" v-if="addMsg.EndTime==''">请选择活动结束时间</text>
				<text style="margin-right: 5px;font-size:12px;color: #111111" v-else>{{addMsg.EndTime}}</text>
				<u-icon name="arrow" color="#A5A4AC" size="30" ></u-icon>
			</view>
		</view>
		
		<view class="box-item" style="justify-content: space-between;" v-if="addMsg.IsOpenEnroll==1">
			<text style="font-size:12px;color: #666666;">是否区分性别</text>
			<view class="flex-row">
				<u-radio-group v-model="addMsg.Distinguish" >
					<u-radio 
						shape="circle"
						v-for="(item, index) in qufenlist" :key="index" 
						:name="item.id"
						:active-color="mainColor"
						icon-size='34'
						label-size='24'
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="box-item" style="justify-content: space-between;" v-if="addMsg.IsOpenEnroll==1" >
			<text style="font-size:12px;color: #666666;">{{addMsg.Distinguish==0?'男数量':'总人数'}}</text>
			<view class="flex-row">
				<input type="number" v-model="addMsg.ManNum" :min='0' placeholder="男性数量" style="font-size: 12px;text-align: right;margin-right: 5px;">
				人
			</view>
		</view>
		<view class="box-item" style="justify-content: space-between;" v-if="addMsg.IsOpenEnroll==1 && addMsg.Distinguish==0" >
			<text style="font-size:12px;color: #666666;">女数量</text>
			<view class="flex-row">
				<input type="number" v-model="addMsg.WoManNum" :min='0' placeholder="女性数量" style="font-size: 12px;text-align: right;margin-right: 5px;">
				人
			</view>
		</view>
		
		<view class="box-item" style="justify-content: space-between;"  @click="getAddress()">
			<text style="font-size:12px;color: #666666;">活动位置</text>
			<view class="flex-row">
				<u-icon name="location" :color="mainColor" size="30" ></u-icon>
				<text style="max-width: calc(100vw - 70px - 40px);white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin-right: 5px;">{{addMsg.LocationName!=''?addMsg.LocationName:'无'}}</text>
				<u-icon name="arrow" color="#A5A4AC" size="30" ></u-icon>
			</view>
		</view>
		<!-- <view class="box-item">
			<input type="text" v-model="addMsg.ActivityTitle" placeholder="请将标题写在这里~" style="width: 100%;">
		</view> -->
		<view style="height: 135px;width: 100%;padding: 15px 0;" @click="gorichText">
			<view v-html='addMsg.Content' v-if="addMsg.Content!=''" style="width: 100%;height: 100px;overflow: hidden;"></view>
			<view v-else style="color: #999999;font-size: 14px;">详情描述</view>
			<view v-if="addMsg.Content.length>0" class="continue" :style="{color:mainColor}">
				继续编辑
			</view>
		</view>
	<!-- 	<view style="width: 100%;margin-top: 15px;">
			<u-upload :action="action" :file-list="fileList" @on-remove="onRemove1"  :custom-btn="true"
			 @on-success="uploadSuccessHandler">
				<view slot="addBtn" class="slot-btn">
					<u-icon name="photograph" size="40" color="#888"></u-icon>
					<view class="mian-title">上传图片</view>
				</view>
			</u-upload>
		</view> -->
		<view class="release" :ripple="true"  @click="disbth==false?releasebtn():''" :style="{background:mainColor}">
			发布
		</view>
		
	</view>
	<u-popup v-model="show" mode="bottom" border-radius="20">
		<view class="pubox" >
			<view class="pubox-top">
				<view></view>
				<text >选择吧</text>
				<u-icon name="cross" color="#555" size="40" @click='show=false'></u-icon>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;margin-top: 10px;">
				<view style="font-size: 20px;color: #111111;font-weight: 400;	">选择你感兴趣的贴吧</view>
				<view style="font-size: 13px;color: #999999;margin: 10px 0;">贴吧只能选择一个，发布前可更改</view>
			</view>
			
			<scroll-view scroll-y="true" style="max-height: calc(100vh * 0.7 - 65px);padding-bottom: 20px;min-height:calc(100vh * 0.4 - 65px) ;">
				<view class="ht-box">
					<view v-for="(x,y) in forumList" :key="y" class="foritem" @click="select(x)" :style="{color:x.Id == addMsg.ForumId?'#FFF':'#666666',background:x.Id == addMsg.ForumId?mainColor:'#F9F9F9'}">
						{{x.Name}}
					</view>
				</view>
			</scroll-view>
		</view>
	</u-popup>
	<u-picker v-model="showtime" mode="time" @confirm='confirm' :params="params" :default-time='defaulttime'></u-picker>
	<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
  </view>
</template>

<script>
import auth from "@/components/auth/index.vue";
export default {
  components: {
    auth,
  },
  data() {
    return {
      pageTitle: "发布帖子",
      showAuth:false,
	  show:false,
	  u:{},
	  disbth:false,
	  fileList:[],
      list: [],
      mainColor: "",
      contentHeight: 0,
	  forumList:[],
	  showtime:false,
	  addMsg:{
		  Id:0,
		  ForumId:0,
		  ActivityTitle:'',
		  Content:'',
		  ImageList:[],
		  Deadline:'',
		  LabelList:[],
		  IsOpenEnroll:1,//1 是开启 2 是不开启
		  Distinguish:0,//0是区分,1不区分
		  StartTime:'',
		  EndTime:'',
		  ManNum:'0',
		  WoManNum:'0',
		  LonLat:'',
		  LocationName:'',
	  },
	  labeldemo:'',
	  params: {
		year: true,
		month: true,
		day: true,
		hour: true,
		minute: true,
		second: false
	},
	  kqlist:[{id:1,name:'开启'},{id:2,name:'不开启'}],
	  qufenlist:[{id:0,name:'区分'},{id:1,name:'不区分'}],
	  ForumName:'',
	  action: this.host2 + "/api/File/UploadTencent",
	  timetype:0,
	  defaulttime:'',
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
  },
  mounted() {
    let currentPages = getCurrentPages();
    let u = "/" + currentPages[currentPages.length - 1].route;
    let pages = wx.getStorageSync("basedata")
      ? wx.getStorageSync("basedata").bar_title
      : [];
    pages.forEach((x) => {
      if (x.value == u) {
        this.pageTitle = x.new_name ? x.new_name : x.name;
      }
    });
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
	let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId : 1;
	this.action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
  },
  onLoad: function (option) {    
	 if(option && option.ForumId){
		 this.addMsg.ForumId= option.ForumId
	 }
	 if(option && option.Id){
		 this.getActivityInfo(option.Id)
	 }
    this.u = uni.getStorageSync("mall_UserInfo");
    if (!this.u) {
      this.u = {
    	nickName: "未登录",
    	avatarUrl: ""
      };
      this.showAuth = true;
    }	else{
		this.GetForumList()
    }
	
  },
  methods: {
	addlable(){
		if(this.addMsg.LabelList.length>2){
			uni.showToast({
				title: '标签最多3个',
				icon: 'none',
				duration: 2500
			})
		}else{
			if(this.labeldemo == ''){
				uni.showToast({
					title: '请输入标签内容',
					icon: 'none',
					duration: 2500
				})
			}else{
				this.addMsg.LabelList.push(this.labeldemo)
				this.labeldemo = '';
			}
			
		}
	  
	},
	getActivityInfo(Id){
		this.request2(
			{
				url: '/api/AppletMiai/GetActivityInfo',
				data: {ActivityId:Id}
			},
			res => {
				this.addMsg = res.data
				
			}
		);
	},
   tagClick(i){
	   this.addMsg.LabelList.splice(i,1)
   },
	GetForumList(){
		this.request2(
			{
				url: '/api/AppletMiai/GetForumList',
				data: {}
			},
			res => {
				if(res.resultCode==1){
					this.forumList = res.data
					for(let i=0;i<this.forumList.length;i++){
						if(this.forumList[i].Id == this.addMsg.ForumId){
							this.ForumName =this.forumList[i].Name;
						}
					}
				}
			}
		);
	},
   select(x){
	   this.addMsg.ForumId =x.Id;
	   this.ForumName =x.Name;
	   this.show = false;
   },
	reloadUserinfo() {
	  this.u = uni.getStorageSync("mall_UserInfo");
	  // this.showAuth=false;
	  this.GetForumList();
	},
	//关闭登录窗口
	gbAuth(){
		uni.navigateBack()
	},
	onRemove1(index) {
		this.addMsg.ImageList.splice(index, 1);
	},
	uploadSuccessHandler(data, index, lists) {
		let r = JSON.parse(data);
		this.addMsg.ImageList.push(r.data);
	},
	confirm(val){
		let time = val.year + '-' + val.month + '-' + val.day +' ' + val.hour + ':' + val.minute  ;
		if((new Date()).getTime() >= (new Date(time)).getTime()){
			uni.showToast({
				title: '时间需要大于当前时间',
				icon: 'none',
				duration: 2500
			})
		}else{
			if(this.timetype==3 && ((new Date(this.addMsg.StartTime)).getTime() >= (new Date(time)).getTime())){
				uni.showToast({
					title: '结束时间大于开始时间',
					icon: 'none',
					duration: 2500
				})
			}else{
				if(this.timetype==1){
					this.addMsg.Deadline = time
				}else if(this.timetype==2){
					this.addMsg.StartTime = time
				}else if(this.timetype==3){
					this.addMsg.EndTime = time
				}
			}
			
			
		}
		
	},
	releasebtn(){
		if(this.addMsg.ImageList.length == 0){
			uni.showToast({
				title: '请上传招募贴图片',
				icon: 'none',
			})
			return
		}
	
		if(this.addMsg.ActivityTitle == ''){
			uni.showToast({
				title: '主题不能为空',
				icon: 'none',
			})
			return
		}
		
		if(this.addMsg.StartTime == ''){
			uni.showToast({
				title: '请选择活动开始时间',
				icon: 'none',
			})
			return
		}
		if(this.addMsg.EndTime == ''){
			uni.showToast({
				title: '请选择活动结束时间',
				icon: 'none',
			})
			return
		}
		if(this.addMsg.IsOpenEnroll==1 && this.addMsg.Deadline == ''){
			uni.showToast({
				title: '请选择报名截止时间',
				icon: 'none',
			})
			return
		}
		if(this.addMsg.Distinguish==0 && this.addMsg.IsOpenEnroll==1){
			if(this.addMsg.ManNum==''){
				uni.showToast({
					title: '男生数量不能为空',
					icon: 'none',
				})
				return
			}
			
			if(this.addMsg.WoManNum==''){
				uni.showToast({
					title: '女生数量不能为空',
					icon: 'none',
				})
				return
			}
			if( this.addMsg.ManNum==0&& this.addMsg.WoManNum==0){
				uni.showToast({
					title: '总人数大于0',
					icon: 'none',
				})
				return
			}
		}else{
			if(this.addMsg.ManNum=='' && this.addMsg.ManNum==0 &&  this.addMsg.IsOpenEnroll==1){
				uni.showToast({
					title: '总人数数量大于0',
					icon: 'none',
				})
				return
			}
		}
		if(this.addMsg.Content == ''){
			uni.showToast({
				title: '内容不能为空',
				icon: 'none',
			})
			return
		}
		
		
		this.disbth = true
		
		let pages = getCurrentPages(); // 当前页面
		let beforePage = pages[pages.length - 2]; // 前一个页面
		uni.showLoading({
			title:'发布中~'
		})	
		this.request2(
			{
				url: '/api/AppletMiai/SetActivityInfo',
				data: this.addMsg
			},
			res => {
				this.disbth = false
				uni.hideLoading()
				if(res.resultCode==1){
					uni.showToast({
						title: '发布成功',
						icon: 'success',
					})
					let that = this
					setTimeout(()=>{
						 uni.navigateBack({
							 success: function() {
								 if(that.addMsg.Id==0){//新增
									 beforePage.$vm.Children(that.addMsg.ForumId); // 执行前一个页面的方法
								 }else{//修改
									 beforePage.$vm.Children(that.addMsg.Id); // 执行前一个页面的方法
								 }
								 
							 }
						 });
					},1000)
					
				}
			},
			failed=>{//错误处理
				this.disbth = false
			}
		);
		
	},
	gorichText(){
		let data = this.addMsg.Content
			data= encodeURIComponent(data)//加密
		uni.navigateTo({
			url: '/pages/blindDate/richText?Content=' +data
		})
	},
	Children(e){
		this.addMsg.Content = e
	},
	scimg(){
		let chooseFile = null;
		chooseFile = new Promise((resolve, reject) => {
			uni.chooseImage({
				count:  1,
				success: resolve,
				fail: reject
			});
		});
		chooseFile
		.then((res_c)=>{
			// 创建上传对象
			uni.compressImage({
			  src: res_c.tempFilePaths[0],
			  quality: 80,
			  success: res_cp => {
				const task = uni.uploadFile({
					url: this.action,
					filePath: res_cp.tempFilePath,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						
						let data = JSON.parse(res.data)
						console.log(data)
						if(this.addMsg.ImageList.length>0){
							this.addMsg.ImageList[0] = data.data
						}else{
							this.addMsg.ImageList.push(data.data)
						}
						
						
					},
					fail: (e) => {
						console.log(e)
					},
					
				});
				task.onProgressUpdate((res) => {
					
				});
			  }
			})
			
		})
		.catch(error => {
			// this.$emit('on-error', error);
		});
	},
	//打开地图
	getAddress() {
		let that = this;
		uni.chooseLocation({
			success: function(res) {
				that.addMsg.LocationName = res.name;
				that.addMsg.LonLat = res.longitude + ',' + res.latitude;
			},
			fail: function(err) {
	
				that.fetchAgainLocation()
			}
		});
	},
	//重新提示用户打开设置对地图授权
	fetchAgainLocation() {
		let that = this
		wx.getSetting({
			success: (res) => {
				var statu = res.authSetting;
				if (!statu['scope.userLocation']) {
					wx.showModal({
						title: '是否授权当前位置',
						content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
						success: (tip) => {
	
							if (tip.confirm) {
								console.log(tip)
								wx.openSetting({
									success: (data) => {
										console.log(data)
										if (data.authSetting["scope.userLocation"] === true) {
											wx.showToast({
												title: '授权成功',
												icon: 'success',
												duration: 1000
											})
											if (that.latitude != '' && that.longitude != '') {
												that.getAddress()
											} else {
												that.getAddress()
											}
										} else {
											wx.showToast({
												title: '授权失败',
												duration: 1000
											})
										}
									},
									fail: (err) => {
										console.log(err)
									},
									complete: () => {}
								});
							}
						}
					})
				}
			},
			fail: () => {},
			complete: () => {}
		})
	},


  },
};
</script>
