<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="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 class='addpicox flexone'>
				<view class="addpic" v-for="(item,index) in image" :key="index">
					<image :src="item" mode=""></image>
					<view class="delimg" @click="deleteimg" :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="sure">确定</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	    export default {
	        data() {
	            return {
	              type:'',
				  provincelist: [],
				  provincename:'',
				  index:0,
				  province_id:'',
				  image:[],
				  title:'',
				  content:''
	            }
	        },
	        onLoad(options) {
				this.type=options.type;
				this.getprovincelist()
	        },
	        methods: {
				
				// 输入标题
				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(e){
						 	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.splice(i,1);
						 		}
						 	}
						 	this.image=this.image;
							console.log(this.iamge)
						 	
						 },
						 sure(){
							 let that = this;
							 if(that.title==''){
								 uni.showToast({
								 	title:"请输入标题",
									icon:'none'
								 })
								 return false
							 }
							 if(that.content==''){
							 		uni.showToast({
							 			title:"请输入帖子内容",
							 			icon:'none'
							 		})
							 		return false
							 }
							 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(",")
							 }
							 console.log('7766554', params)
							 app.post(url, params).then((res) => {
							 	console.log(res);
							 	uni.showToast({
							 		title:'发布成功',
									icon:"none"
							 	})
								setTimeout(function(){
									uni.switchTab({
										url:'/pages/luntan/luntan'
									})
								},1500)
							 
							 }).catch((err) => {
							 
							 })
						 }
						 
	        }
	
	    }
	
</script>

<style>
	
	page{
		background:#F7F6F9 ;
	}
	
	.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;
		
	}
	.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>