<template>
	<view>
		<u-navbar title="发布"></u-navbar>
		<view class="flex-col page">
			<view class="flex-col group">
				<view class="flex-col items-center text-wrapper">
					<u-input :maxlength='vuex_user.isAttestationGLY ? 35 : 20' type="text" v-model='title'
					:custom-style="{fontSize:'32rpx'}"
						@focus="inputFocus" placeholder="添加标题" class="text_1" />
				</view>
				<view class="flex-col items-start section_3">
					<view class="group_1">
						<u-input type="textarea" v-model='content' @click="shuru" @blur="inputBlur" @focus="inputFocus"
							maxlength="300" :custom-style="textareaStyle" placeholder="添加正文" />
					</view>
					<view class="flex-col section_5" v-if="type == 1">
						<scroll-view scroll-x="true">
							<view class="flex-row group_5">
								<view v-for="(item, index) in tabs" :key="index"
									class="flex-col items-center text-wrapper_1"
									:class="{ 'text-wrapper_2': arr1.includes(item.name) }"
									@click="current(index, item)">
									<image
										src="/static/common/img/icon-lineRounded.png"
										class="image_3"
									/>
									<text class="text_13" :class="{ 'text_16': arr1.includes(item.name) }">{{ item.name
									}}</text>
								</view>
								<!-- 							<view class="flex-col items-center text-wrapper_2"><text class="text_16">找工作</text></view> -->
							</view>
						</scroll-view>
					</view>

					<view class="justify-between section_4">
						<view class="flex-row expression-box" @click='emoji = !emoji'>
							<image src="/static/common/img/icon-happy-face.png" 
								class="image_3" />
							<text class="text_10">表情</text>
						</view>

						<view class="flex-row group_2">
							<!-- <view class="flex-row">
									<text class="text_9">@</text>
									<text class="text_10">用户</text>
								</view> -->
							<!-- <view class="flex-row group_4">
								<image src="/static/common/img/16535374509810688026.png" class="image_4" />
								<text class="text_11">位置</text>
							</view> -->
						</view>
					</view>

					<view class="uping">
						<u-upload :max-size="5 * 1024 * 1024" max-count="9" :header='header'
							:action="$u.http.config.baseUrl + action" @on-success="onSuccess" @on-remove="onRemove"
							ref="uUpload" width="140" height="140"></u-upload>
					</view>
				</view>


			</view>
		</view>
		<view class="flex-col items-center text-wrapper_4" @click="onRelease"><text class="text_18">发 布</text></view>
		<!-- emoji 表情 -->
		<div @click='emoji = !emoji' class='back' v-show="emoji"></div>
		<swiper class="slider" :current="emojicurrent" :class="emoji ? 'emojishow' : ''">
			<swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji"
				:class="[key == emojiData.length - 1 ? 'lastbox' : '']">
				<text v-for="(value, index) in item" :key="index" @click="selemoji(value)" class="slider-emoji-icon">{{
					value }}</text>
			</swiper-item>
		</swiper>
		<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
import { Debounce } from '../../../common/utils.js'
import emoji from "../../../static/common/js/emoji";
export default {
	data() {
		return {
			textareaStyle: {
				width: "80%",
				minHeight: "300rpx"
			},
			fileList: [],
			title: '',
			content: '',
			emojiData: [],
			emoji: false,
			emojicurrent: 0,
			header: {
				Authorization: ""
			},
			action: '/app/User/File',
			imgData: [],
			schoolId: "",
			sysSignStr: [],
			num: "",
			tabs: [],
			arr1: [],
			type: "",
			url: false,
			time: null,
		};
	},
	onLoad(e) {
		this.header.Authorization = "Bearer " + this.vuex_token;
		this.schoolId = e.Id
		this.type = e.type
		this.url = e.url
		this.emojiInit();
		this.getSign()
	},
	methods: {
		// 提示
		tips(title, type, time) {
			this.$refs.uToast.show({
				title: title ? title : "",
				type: type ? type : "success",
				duration: time ? time + "" : "1000",
			});
		},
		getSign() {
			this.$u.apiList.GetSign().then((res) => {
				if (!this.vuex_user.isAttestationQY) {
					this.tabs = res.filter(item => {
						return item.name != '企业招聘'
					})
				} else {
					this.tabs = res
				}

			})
		},
		inputFocus() {
			this.emoji = false;
		},
		current(i, item) {
			if (this.arr1.includes(item.name)) {
				this.arr1.splice(this.arr1.indexOf(item.name), 1)

			} else {
				this.arr1.push(item.name)

			}
		},
		onRelease() {
			// uni.$emit('helpAdd')
			// uni.switchTab({
			//   url: '/pages/AlumniCircle/alumnus/alumnus?add=true',
			// });
			// return 
			if (!this.time) {

			}
			if (this.title === "") {
				this.tips('请输入标题', 'error')
				return
			}
			if (this.content === "") {
				this.tips('请输入内容', 'error')
				return
			}
			// let files = this.$refs.uUpload.lists[0];

			if (this.type == 1) {
				if (this.arr1 == "") {
					this.tips("请选择标签", "error")
					return
				}
			}
			let file = this.imgData.join(',')
			// if(!file){
			// 	this.tips("请上传图片","error");
			// 	return false
			// }
			let sysSignStr = this.arr1.join(',')
			const data = {
				title: this.title,
				content: this.content,
				path: file,
				forwardId: "",
				sysSignStr: sysSignStr,
				userId: this.vuex_user.id,
				schoolId: this.schoolId,
			}

			if (this.type == 0) {
				data.sysSignStr = ""
				this.onJourna(data)
			} else if (this.type == 1) {
				this.onHelp(data)
			}
		},
		//发布学校资讯
		onJourna: Debounce(function (data) {
			this.$u.apiList.InsertJournaArticle(data).then((res) => {
				/* uni.showToast({
					title: "发布成功",
					duration: 2000,
				}); */
				this.$refs.uToast.show({
					title: '发布成功',
					type: 'success',
				})
				setTimeout(() => {
					uni.switchTab({
						url: "../../../pages/my/my/my"
					});
				}, 1000)
			})
		}, 1000),
		//发布帮帮资讯
		onHelp: Debounce(function (data) {
			this.$u.apiList.InsertHelpArticle(data).then((res) => {
				/* uni.showToast({
					title: "发布成功",
					duration: 2000,
				}); */
				this.$refs.uToast.show({
					title: '发布成功',
					type: 'success',
				})
				uni.$emit('helpAdd')
				setTimeout(() => {
					if (this.url) {
						uni.switchTab({
							url: '../../AlumniCircle/alumnus/alumnus?add=true'
						});
					} else {
						uni.switchTab({
							url: "../../../pages/my/my/my"
						});
					}
				}, 1000)
			})
		}, 1000),
		onSuccess(res) {

			this.imgData.push(res.data)
		},
		onRemove(index, lists) {
			let imgs = []
			lists.forEach(item => {
				imgs.push(item.response.data)
			})
			this.imgData = imgs
		},
		inputBlur() {
			;
		},
		shuru() {
			;
		},
		selemoji(m) {

			this.content += m;
		},
		// 表情初始化
		emojiInit() {
			var number = emoji.length;
			// var page = Math.ceil(emoji.length / number);
			var page = 1;
			for (let i = 0; i < page; i++) {
				this.emojiData[i] = [];
				for (let k = 0; k < number; k++) {
					emoji[i * number + k] ?
						this.emojiData[i].push(emoji[i * number + k]) :
						"";
				}
			}
		},
		//返回上一级
		router() {
			if (this.url) {
				uni.switchTab({
					url: '../../AlumniCircle/alumnus/alumnus'
				});
			} else {
				uni.switchTab({
					url: '../../my/my/my'
				});
			}

		}
	},
};
</script>

<style lang="scss" scoped>
.emojishow {
	height: 3rem !important;
}

.back {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: #fff;
	opacity: 0.2;
}

.slider {
	background: #fff;
	width: 7.75rem;
	height: 0rem;
	transition: all 0.3s;
	box-shadow: 0 0 4px #999;
	position: fixed;
	bottom: 0;

	.slider-emoji {
		overflow-y: scroll;
		width: 100vw !important;
	}

	&-emoji {
		width: 6.75rem;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;

		&-icon {
			font-size: 0.265rem;
			display: inline-block;
			width: 11%;
			text-align: center;
			padding: 0.02rem 0;
			border-radius: 0.1rem;
			//   border-bottom: 1px solid #ccc;
		}

		&-icon:active {
			background: #ccc;
		}
	}
}

.page {
	// padding-bottom: 0.5rem;
	overflow-y: auto;
	width: calc(100% - 48rpx);
	overflow-x: hidden;
	height: 100%;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin: 28rpx auto 0;

	.group {
		padding-top: 0.015rem;

		.text-wrapper {
			padding: 20rpx 40rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.1);

			.text_1 {
				color: rgb(2, 2, 2);
				font-size: 32rpx;
				font-family: Adobe Heiti Std;
				line-height: 0.24rem;
				width: 100%;
			}
		}

		.section_3 {
			margin-top: 0.015rem;
			padding: 0.13rem 0 0.24rem;
			background-color: rgb(255, 255, 255);
			box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);

			.group_1 {
				width: 100%;
				padding: 0 40rpx;
				margin: 0 auto;
			}

			.uping {
				width: 100%;
				padding: 0 40rpx;
				margin: 0 auto;
			}
		}

		.section_4 {
			margin-top: 0.01rem;
			// padding: 0.12rem 0.28rem 0.14rem 0.2rem;
			padding: 30rpx 40rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);
			// width: calc(100% - 0.44rem);
			width: 100%;
			margin: 0 auto;
			border-top: 1px solid #E7E7E7;

			.image_2 {
				margin-top: 0.02rem;
				width: 0.23rem;
				height: 0.18rem;
			}

			.expression-box {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 128rpx;
				height: 60rpx;
				background: #F6F8F9;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
			}

			.image_3 {
				margin-right: 8rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.group_2 {
				margin-top: 0.01rem;

				.group_4 {
					margin-left: 0.3rem;
					margin-bottom: 0.02rem;

					.image_4 {
						flex-shrink: 0;
						width: 0.14rem;
						height: 0.21rem;
					}

					.text_11 {
						margin-left: 0.06rem;
						align-self: center;
						color: rgb(160, 162, 172);
						font-size: 0.15rem;
						font-family: PingFang;
						line-height: 0.14rem;
					}
				}

				.text_9 {
					color: rgb(80, 80, 81);
					font-size: 0.24rem;
					font-family: PingFang;
					line-height: 0.24rem;
				}

				.text_10 {
					margin-top: 0.03rem;
					// color: rgb(160, 162, 172);
					color: red;
					font-size: 0.15rem;
					font-family: PingFang;
					line-height: 0.14rem;
				}
			}
		}

		.section_5 {
			margin-top: 0.06rem;
			padding: 30rpx 40rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);
			// border:1px solid red;
			width: 100%;
			// width: 700rpx;

			// overflow: hidden;
			.group_5 {

				margin-top: 0.3rem;
				margin-bottom: 0.1rem;

				.text-wrapper_1 {
					padding: 16rpx 20rpx;
					// background-color: rgb(255, 255, 255);
					background: #F6F8F9;
					border-radius: 200rpx;
					height: 0.3rem;
					margin-right: 20rpx;
					// border: solid 0.005rem rgb(193, 196, 204);
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: row;

					.image_3 {
						margin-right: 8rpx;
						width: 30rpx;
						height: 30rpx;
					}

					.text_13 {
						// color: #191919;
						color: rgba(0, 0, 0, 0.90);
						font-size: 28rpx;
						font-family: PingFang;
						line-height: 0.16rem;
						white-space: nowrap;
					}
				}

				.view_1 {
					margin-left: 0.055rem;
				}

				.text-wrapper_2 {
					background-color: #3cb4fb;
					border-radius: 200rpx;
					height: 0.3rem;
					margin-right: 20rpx;
					padding: 16rpx 20rpx;

					.text_16 {
						color: rgb(255, 255, 255);
						font-size: 0.13rem;
						font-family: PingFang;
						line-height: 0.16rem;
						white-space: nowrap;
					}
				}

				.text-wrapper_3 {
					margin-left: 0.055rem;
					padding: 0.07rem 0 0.06rem;
					flex: 1 1 0.79rem;
					background-color: rgb(255, 255, 255);
					border-radius: 0.05rem;
					height: 0.3rem;
					border: solid 0.005rem rgb(193, 196, 204);

					.text_17 {
						color: rgb(160, 162, 172);
						font-size: 0.13rem;
						font-family: PingFang;
						line-height: 0.16rem;
					}
				}
			}
		}
	}


}

.text-wrapper_4 {
	margin: 0.31rem 0.24rem 0 0.23rem;
	padding: 30rpx 0;
	background-color: #3cb4fb;
	border-radius: 50rpx;

	.text_18 {
		color: rgb(255, 255, 255);
		font-size: 0.15rem;
		font-family: PingFang;
		line-height: 0.16rem;
	}
}
</style>
