<template>
	<view class="content">
		<view class="addtop flextwo">
			<view class='addtopleft'>发布省份</view>

			<picker @change="bindproChange" :value="index" :range="provincelist" range-key="name">
				<view class="addprovince flexone">
					<view class="proname">{{provincename}}</view>
					<view class="xiala">
						<image src="../../static/huixia.png" mode=""></image>
					</view>
				</view>
			</picker>
		</view>

		<view class="addtop flextwo" v-if="type!=1">
			<view class='addtopleft' v-if="type==2">请选择招聘求职</view>
			<view class='addtopleft' v-if="type==3">请选择求购转让</view>
			<view class='addtopleft' v-if="type==4">请选择交友对象</view>

			<picker @change="bindzhaoChange" :value="index" :range="zhaoarr" range-key="name">
				<view class="addprovince flexone">
					<view class="proname">{{kindname}}</view>
					<view class="xiala">
						<image src="../../static/huixia.png" mode=""></image>
					</view>
				</view>
			</picker>
		</view>

		<view class="contracttext">
			<view class="title">
				<input type="text" placeholder="加个标题哦~" placeholder-class="entertitle" @input="entertitle" />
			</view>
			<view class="contractcontent">
				<textarea value="" placeholder="请输入帖子内容" placeholder-class="entertitle" @input="entercontent" />
				</view>
				
			<!-- 上传视频 -->
			<view v-if="type==1">
				<view class="text">请上传视频大小在25M以下</view>
				<view class='addpicox flexone' >
					
					<view class="addpic addvideo" @click="chooseVideo" v-if="videoimg==''">
						<image src="../../static/add.png" mode=""></image>
					</view>
					<view class="addpic addvideo" @click="chooseVideo" v-else>
						<video :src="videoimg" ></video>
					</view>
					
				</view>
			</view>
			
				<!-- 上传图片 -->
			<view class='addpicox flexone' v-else>
				<view class="addpic" v-for="(item,index) in image" :key="index">
					<image :src="item" mode=""></image>
					<view class="delimg" @click="deleteimg(index)" :data-url="item">
						<image src="../../static/close.png" mode=""></image>
					</view>
				</view>
				<view class="addpic" @click="chooseImage">
					<image src="../../static/add.png" mode=""></image>
				</view>
			</view>
			
			
			
		</view>
		
		<view class="buybtn surebtn" @click="issure==false?sure():''">确定</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	    export default {
	        data() {
	            return {
	              type:'',
				  provincelist: [],
				  provincename:'',
				  index:0,
				  province_id:'',
				  image:[],
				  title:'',
				  content:'',
				  videoimg:'',
				  issure:false,
				  kindname:"请选择",
				  search_type:'',
				  zhaoarr:[]
	            }
	        },
	        onLoad(options) {
				this.type=options.type;
				if(options.type==2){
					let arr=[{
					  id:1,
					  name:'招聘'
				  },
				  {
				  	id:1,
				  	name:'求职'
				  }
				  
				  ]
					this.zhaoarr=arr;
				}else if(options.type==3){
					let arr=[{
							 id:3,
							name:'求购'
					},
					{
						id:4,
						name:'转让'
					}
					]
					this.zhaoarr=arr;
				}else if(options.type==4){
					let arr=[{
							 id:5,
							name:'找男友'
					},
					{
						id:6,
						name:'找女友'
					}
					]
					this.zhaoarr=arr;
				}
				this.getprovincelist()
	        },
	        methods: {
				// 选择招聘求职
				bindzhaoChange(e){
					this.kindname=this.zhaoarr[e.target.value].name;
					this.search_type=this.zhaoarr[e.target.value].id
				},
				
				// 输入标题
				entertitle(e){
					this.title=e.detail.value
				},
				//输入内容
				entercontent(e){
					this.content=e.detail.value
				},
	           // 获取省份列表
	           getprovincelist() {
	           	let that = this;
	           	var url = 'forum/get_province';
	           	var params = {
	           		is_forum_hot: ''
	           	}
	           	console.log('7766554', params)
	           	app.post(url, params).then((res) => {
	           		console.log(res);
	           		that.provincelist = res.data.data;
	           		this.provincename=res.data.data[0].name;
	           		that.province_id=res.data.data[0].id;
	           		// 获取论坛列表
	           		this.getluntanlist()
	           		
	           	}).catch((err) => {
	           
	           	})
	           },
			   
			   bindproChange(e){
			   	 this.index = e.target.value;
			   	 this.provincename=this.provincelist[e.target.value].name;
			   	 this.province_id=this.provincelist[e.target.value].id;
			   	 this.page=1;
			   	 this.luntanlist=[];
			   },
			   
			   // 上传图片
			   		    chooseImage() {
			   		       let that = this; 
			   		       uni.chooseImage({
			   		         count: 9,
			   		         sizeType: ['original', 'compressed'],
			   		         success: function (res) {
								 console.log(res)
			   		           console.log(res.tempFilePaths);
							   console.log(res.tempFilePaths[0])
							   
							        res.tempFilePaths.forEach(function(value,index,array){
							              app.upload('image', value, "post").then((res) => {
							                console.log('上传文件', res);
							                let url = app.globalData.imgurl+res.url;
							                that.image.push(url)
							                console.log(that.image)
							              }).catch((err) => {
							                console.log(err)
							              })
							            })
			   		         },
			   		         fail: function (res) { }
			   		       })
			   		     },
						 
						 deleteimg(index){
							 this.image.splice(index,1);
						 	// console.log(e)
						 	// var url=e.currentTarget.dataset.url;
						 	// console.log(url)
						 	// for(var i=0;i<this.image.length;i++){
						 	// 	if(url==this.image[i]){
						 			
						 	// 	}
						 	// }
							
						 	this.image=this.image;
							console.log(this.iamge)
						 	
						 },
						 //上传视频
						  chooseVideo() {
						     let that=this;
						     uni.chooseVideo({
						       sourceType: ['album', 'camera'],
						       maxDuration: 60,
						       camera: 'back',
						       success(res) {
						         console.log(res.tempFilePath);
								 
						        
						 
						         // app.upload('video', res.tempFilePath).then((res) => {
						         //   let videos = that.data.videos;
						         //   videos.push(res.url);
						         //   that.setData({
						         //     videos: videos
						         //   })
						         // }).catch((err) => {
						         //   console.log(err)
						         // })
						 
						         let file = res.tempFilePath
						        app.upload('image', file, "post").then((res) => {
						          console.log('上传文件', res);
								  let url = app.globalData.imgurl+res.url;
						         that.videoimg=url;
								 console.log(that.videoimg)
						          // that.image.push(url)
						          // console.log(that.image)
						        }).catch((err) => {
						          console.log(err)
						        })
						       }
						     })
							 },
						 sure(){
							 let that = this;
							 that.issure=true;
							 if(that.type==2){
								 if(that.search_type==''){
									 uni.showToast({
									 	title:"请选择招聘求职",
										icon:'none'
									 })
									  that.issure=false
									 return false
								 }
							 }
							 if(that.type==3){
							 		if(that.search_type==''){
							 				uni.showToast({
							 					title:"请选择招求购转让",
							 					icon:'none'
							 					})
							 				that.issure=false
							 				return false
							 		}
							 }
							 if(that.type==4){
							 		if(that.search_type==''){
							 				uni.showToast({
							 					title:"请选择交友对象",
							 					icon:'none'
							 			})
							 			that.issure=false
							 			return false
							 		}
							 }
							 if(that.title==''){
								 uni.showToast({
								 	title:"请输入标题",
									icon:'none'
								 })
								  that.issure=false
								 return false
							 }
							
							 if(that.content==''){
							 		uni.showToast({
							 			title:"请输入帖子内容",
							 			icon:'none'
							 		})
									that.issure=false
							 		return false
									
							 }
							 if(that.type==1){
							 		if(that.videoimg==''){
							 			uni.showToast({
							 				title:'请上传视频',
							 				icon:"none"
							 			 })
							 				that.issure=false
							 				 return false
							 		}
							 }
							 uni.showLoading({
								 title:'加载中'
							 })
							 var url = 'forum/publish_forum';
							 var params = {
							 	type:that.type,
								province_id:that.province_id,
								title:that.title,
								content:that.content,
								images:that.image.join(","),
								search_type:that.search_type,
								video:that.videoimg
							 }
							 console.log('7766554', params)
							 app.post(url, params).then((res) => {
							 	console.log(res);
								uni.hideLoading()
							 	uni.showToast({
							 		title:'发布成功',
									icon:"none"
							 	})
								setTimeout(function(){
									uni.switchTab({
										url:'/pages/luntan/luntan'
									})
								},1500)
							 
							 }).catch((err) => {
							 
							 })
						 }
						 
	        }
	
	  
		}
		
		
	
</script>

<style>
	
	page{
		background:#F7F6F9 ;
	}
	.text{
		color:#BDC4CE;
		font-size: 28rpx;
	}
		
	
	.surebtn{
		position: fixed;
		bottom:0;
		left:32rpx;
		bottom:32rpx;
	}
	.addpic{
		width:150rpx;
		height:150rpx;
		font-size: 0;
		margin-right:18rpx;
		margin-bottom:20rpx;
		position: relative;
	}
	.addvideo{
		width:150rpx;
		height:150rpx;
		
	}
	.addvideo image{
		width:100%;
		height: 100%;
	}
	.addvideo video{
		width:100%;
		height:100%;
	}
	.delimg{
		width:40rpx;
		height:40rpx;
		font-size: 0;
		position: absolute;
		top:-20rpx;
		right:-20rpx;
	}
	.entertitle{
		color:#BDC4CE;
		font-size: 28rpx;
	}
	.title{
		padding: 34rpx 0;
		box-sizing: border-box;
		border-bottom:1rpx solid #f5f5f5
	}
	.title input{
		color:#BDC4CE;
		font-size: 28rpx;
	}
	.contracttext{
		padding: 0 32rpx 20rpx;
		box-sizing: border-box;
		background: #fff;
		margin-top:16rpx;
	}
	.contracttext textarea{
		width:100%;
		height:220rpx;
		color:#BDC4CE;
		font-size: 28rpx;
	}
	.contractcontent{
		width:686rpx;
		padding: 34rpx 0;
		box-sizing: border-box;
		height:220rpx;
	}
	.addtop{
		width:750rpx;
		height:108rpx;
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.addtopleft{
		color:#3D444C;
		font-size: 32rpx;
	}
	.addprovince{
		height:60rpx;
		border:2rpx solid rgba(192,198,208,1);
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		border-radius: 120rpx;
	}
		
	.proname{
		color:#C3C9D2;
		font-size: 23rpx;
	}
	.xiala{
		width:20rpx;
		height:20rpx;
		font-size: 0;
		margin-left:16rpx;
	}
	.addpicox{
		margin-top:20rpx;
		flex-wrap: wrap;
	}
</style>