<template>
	<view class="activityPage">
		<view class="title" v-if="activityInfo.reject && activityInfo.status==2" style="color: #f00;font-size: 12px;padding: 20rpx;">
			<view class="">驳回原因：{{activityInfo.reject}}</view>
		</view>
		<view class="title">
			<view class="label">活动标题（必填项）</view>
			<input type="text" v-model="activityInfo.title" placeholder="请输入活动标题" class="title-inp">
		</view>
		<view class="category">
			<view class="label">活动分类（必填项）</view>
			<picker @change="categoryChange" class="dataPicker" :value="cc_index" range-key="name" :range="category_list">
			    <view class="uni-input" v-if="cc_index==-1" style="color: #999;">请选择</view>
			    <view class="uni-input" v-else>{{category_list[cc_index].name}}</view>
			</picker>
		</view>
		<view class="content">
			<view class="label">正文（必填项）</view>
			<textarea v-model="activityInfo.describe" maxlength="-1" name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
		</view>
		<view class="content" v-if="3==='勿删'">
			<view class="label">活动内容（必填项）</view>
			<jinEdit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#" :html="activityInfo.describe" @editFocus="editFocus"></jinEdit> 
			<view style="margin-top: 10px;font-size: 11px;color: #999;padding-bottom: 10px;">
				<text style="color: #f00;margin: 5px;">*</text>
				请点击“✓”完成编辑
			</view>
		</view>
		<view class="promotional">
			<view class="label">图集（必填项）</view>
			<!--  -->
			<view v-for="(item, index) in activityInfo.promotional_img" class="pic_box">
				<image :src="imageRootNew2+ item" mode="aspectFill" class="pic_item"></image>
				<image :src="imgfixUrls + 'merchant/close.png'" class="close" @click.stop="closePreview(index)" />
			</view>
			<image :src="imageRootNew+'mb-plus.png'" @click="uploadFiles()" class="plus"></image>
			<!--  -->
		</view>
		<view class="">
			<view class="release-btn" @click="saveActivit">确认发布</view>
		</view>
		<!-- <view style="font-size: 14px;color: #509DFD;margin-top: 20upx;" v-if="id===0">
			<navigator url="./myActivities">我的发布</navigator>
		</view> -->
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	export default {
		data() {
			return {
				id: 0,
				activityInfo: {
					title: '',
					describe: '',
					promotional_img: [],
					cc_id: '',
				},
				category_list: [],
				cc_index: -1,
				setcolor: '',
			}
		},
		components: {
			jinEdit
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id;
			}
			this.getDetail();
		},
		methods: {
			getDetail(){
				let _this = this;
				App._post_form('&p=student&do=getCampusActivities', {id:this.id||0}, res => {
					// _this.setData({
					// 	activitiesInfo: res.data.data
					// })
					this.category_list = res.data.category_list;
					if(res.data.list!=[]){
						this.activityInfo = res.data.list;
						for(let i=0;i<this.category_list.length;i++){
							if(this.category_list[i].id == res.data.list.cc_id){
								this.cc_index = i;
							}
						}
						
					}
				}, (err)=>{
					uni.navigateBack({
						delta: 1
					})
				});
			},
			categoryChange(e){
				console.log(e);
				this.cc_index = e.detail.value;
				this.activityInfo.cc_id = this.category_list[this.cc_index].id;
			},
			editFocus(){
				this.setcolor = "#509DFD";
			},
			editOk(res) {
			  console.log('-------',res.html);
				this.activityInfo.describe = res.html;
				this.setcolor = "#666";
				uni.showToast({
					title: '保存成功'
				})
			},
			saveActivit(){
				let _this = this;
				console.log(this.activityInfo, 'activityInfo----');
				if(this.activityInfo.title.replace(/(^\s*)|(\s*$)/g, "")==""){
					uni.showToast({
						icon:'none',
						title: '标题不能为空',
						duration: 2000
					});
					return ;
				}
				if(this.cc_index==-1){
					uni.showToast({
						icon:'none',
						title: '分类不能为空',
						duration: 2000
					});
					return ;
				}
				// if(this.setcolor=='#509DFD'){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: '未保存内容',
				// 		duration: 2000
				// 	});
				// 	return ;
				// }
				// function getText(str){return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");}
				// function isNull(str){if ( str == "" ) return true;var regu = "^[ ]+$";var re = new RegExp(regu);return re.test(str);}
				// var text=getText(this.activityInfo.describe);
				// console.log(this.activityInfo.describe, 'this.activityInfo.describe');
				// console.log(isNull(text),'isNull(text)');
				// console.log(this.activityInfo.describe.indexOf('<img '),'indexOf');
				// console.log(this.activityInfo.describe.replace(/(^\s*)|(\s*$)/g, "")=="", 111);
				// if(isNull(text) && this.activityInfo.describe.indexOf('<img ')==-1  || this.activityInfo.describe.replace(/(^\s*)|(\s*$)/g, "")==""){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title: '内容不能为空',
				// 		duration: 2000
				// 	});
				// 	return ;
				// }
				if(this.activityInfo.promotional_img.length==0){
					uni.showToast({
						icon:'none',
						title: '图集不能为空',
						duration: 2000
					});
					return ;
				}
				let promotional_img = this.activityInfo.promotional_img.join('||');
				console.log(promotional_img);
				App._post_form('&p=student&do=publishCampusActivities', {
						..._this.activityInfo, 
						promotional_img: promotional_img,
					}, res => {
					uni.showToast({
						title: res.message
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				});
			},
			// 文件上传接口
			async uploadFiles() {
				let _this = this;
				// #ifndef H5
				wx.chooseImage({
					// count: 9 - _this.activityInfo.promotional_img.length,
					count: 9,
					sourceType: ['album', 'camera'],
					success: async function(res) {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let result = await App._MYupLoad(res.tempFilePaths[i]);
							console.log(result.data.img, result);
							
							_this.activityInfo.promotional_img.push(result.data.image);
							
							uni.showToast({
								title: result.message
							})
						}
					}
				});
				// #endif
			},
			closePreview(i){
				this.activityInfo.promotional_img.splice(i, 1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.activityPage{
		padding: 20upx 30upx 80upx;
		background: #f8f8f8;
		
		.title, .category, .content, .promotional{
			background-color: #fff;
			padding: 10upx 20upx;
			border-radius: 20upx;
			margin-bottom: 30upx;
		}
		.category{
		}
		.content{
		}
		.promotional{
		}
		.label{
			height: 16px;
			line-height: 16px;
			padding-left: 10upx;
			margin: 20upx 0px;
			border-left: 4px solid #509DFD;
		}
		.title-inp{
			font-size: 14px;
			border: 1px solid #e6e6e6;
			padding: 0px 10px;
			height: 30px;
			border-radius: 6px;
			line-height: 30px;
			margin: 20upx 0px;
		}
		.dataPicker{
			font-size: 14px;
			border: 1px solid #e6e6e6;
			padding: 0px 10px;
			height: 30px;
			border-radius: 6px;
			line-height: 30px;
			margin: 20upx 0px;
		}
		textarea{
			font-size: 14px;
			border: 1px solid #e6e6e6;
			padding: 10px;
			height: 160px;
			border-radius: 6px;
			line-height: 24px;
			margin: 20upx 0px;
		}
		.promotional{
			padding-bottom: 10px;
		}
		.pic_box{
			position: relative;display: inline-block;
			width: 80px;height: 80px;
			margin: 10px 10px 0px 0px;
		}
		.pic_item{
			width: 80px;height: 80px;padding: 0;
			border: 1px solid #e6e6e6;
			border-radius: 4px;
		}
		.close{
			position: absolute;
			width: 20px;
			height: 20px;
			right: 5px;
			top: 5px;
		}
		.plus{
			width: 50px;
			height: 50px;
			border: 1px solid #e6e6e6;
			border-radius: 4px;
			padding: 15px;
			margin: 10px 10px 0px 0px;
			background-color: #f8f8f8;
		}
		.release-btn{
			margin: 20upx auto 0 auto;
			width: 690upx;
			height: 83upx;
			// background: rgba(255, 68, 68, 1);
			color: #fff;
			background-color: #509DFD;
			text-align: center;
			padding: 0;
			position: relative;
			display: block;
			box-sizing: border-box;
			font-size: 35upx;
			text-decoration: none;
			line-height: 2.55555556;
			border-radius: 50px;
			overflow: hidden;
		}
	}
	/deep/ .tool-view{
		position: absolute !important;
		width: calc(100vw - 100upx - 2px) !important;
		background-color: #fff;
	}
	/deep/ .container{
		border: 1px solid #e6e6e6;
		border-radius: 6px;
		margin: 20upx 0px;
		position: relative;
	}
	/deep/ .ql-container{
		font-size: 14px !important;
	}
</style>