<template>
	<view class="communication white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('index.communication.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="uniapp-form communication_form">
				<view class="uni-form-group">
					<view class="uni-form-item">
						<view class="content">
							<input class="uni-textarea" placeholder-class="uni-placeholder__class" v-model="form.topic" placeholder="和同学们聊聊..." :maxlength="14" />
						</view>
					</view>
				</view>
				<view class="uni-form-group">
					<view class="uni-form-item">
						<view class="title">小队</view>
						<view class="content">
							<view class="uni-input arrow" @click="teamChange">{{ team.teamName || '不关联' }}</view>
						</view>
					</view>
					<view class="uni-form-item">
						<view class="title">校园</view>
						<view class="content">
							<view class="uni-input arrow" @click="campusChange">{{ campus.schoolName || '不关联' }}</view>
						</view>
					</view>
				</view>
				<view class="explain">{{ options.promptlanguage }}</view>
				<view class="btn" @click="saveBefore" :class="{active: options.checked}">发起</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'
	import sdkService from '@/api/sdk_service'

	export default {
		mixins: [mixins],
		data() {
			return {
				form: {
					topic: '',
					teamId: undefined,
					schoolCode: undefined,
					createBy: uni.getStorageSync('uid'),
					openId: uni.getStorageSync('openid'),
					groupID: ''
				},
				rules: [
					{ name: 'topic', errorMsg: '请输入话题' }
				],
				team: {},
				campus: {},
				options: {
					checked: false,
					promptlanguage: '获得分享可参与' // 提示语
				}
			}
		},
		watch: {
			form: {
				handler() {
					if (this.form.topic) {
						this.options.checked = true
					} else {
						this.options.checked = false
					}
					let msg = '获得分享可参与'
					if (this.form.teamId && this.form.schoolCode) {
						msg = '于校园展示，校友和队友可参与'
					} else {
						if (this.form.teamId) {
							msg = '向小队关注者展示，获得分享可参与'
						} else if (this.form.schoolCode) {
							msg = '于校园展示，校友可参与'
						}
					}
					this.options.promptlanguage = msg
				},
				deep: true
			}
		},
		created() {
			uni.$on('campusSelect', data => {
				this.form.schoolCode = data.schoolCode
				this.campus = data
			})
			uni.$on('teamSelect', data => {
				this.form.teamId = data.teamId
				this.team = data
			})
			// 查询用户发起交流时默认关联的小队
			this.getDefaultRelatedTeamAndSchool()
		},
		onUnload() {
			uni.$off('campusSelect')
			uni.$off('teamSelect')
		},
		methods: {
			// 查询用户发起交流时默认关联的小队
			async getDefaultRelatedTeamAndSchool () {
				const result = await this.$axios.get(this.API.getDefaultRelatedTeamAndSchool)
				if (result) {
					const { school, team } = result
					this.form.teamId = team.id
					this.team = team || {}
					this.form.schoolCode = school.idenCode
					school.schoolName = school.fullName
					this.campus = school || {}
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			},
			// 小队
			teamChange () {
				uni.navigateTo({
					url: `/pages/index/teamSelect${ this.form.teamId ? `?id=${this.form.teamId}` : '' }`
				})
			},
			// 校园
			campusChange () {
				uni.navigateTo({
					url: `/pages/index/campusSelect${ this.form.schoolCode ? `?schoolCode=${this.form.schoolCode}` : '' }`
				})
			},
			// 保存前
			saveBefore () {
				this.$base.FORM_VERIFICATIONS(this.rules, this.form, () => {
					sdkService.createGroup({
						userID: uni.getStorageSync('uid'),
						name: `${uni.getStorageSync('uid')}的交流`,
						introduction: this.form.topic,
						type: uni.$TUIKitTypes.GRP_MEETING,
						maxMemberNum: 200
					}, res => {
						this.form.groupID = res.group.groupID
						this.save()
					})
				})
			},
			// 保存
			async save () {
				this.loading = true
				const result = await this.$axios.post(this.API.createCommunication, this.form)
				this.loading = false
				if (result) {
					uni.$emit('campus')
					let path = (result.teamId ? `&teamId=${result.teamId}` : '')
					this.link(`/pages/campus/voiceRoom?rid=${result.rid}${path}&level=2`)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.communication {
		min-height: calc(100vh);
		.body_scroll {
			.communication_form {
				margin: 50rpx 0 96rpx 26rpx;
				.uni-form-group {
					border-radius: 80rpx 0 0 80rpx;
					overflow: hidden;
					& + .uni-form-group {
						margin-top: 70rpx;
					}
					.uni-textarea {
						padding: 40rpx 0;
						text-align: left;
						color: $bg-0;
						/deep/ .uni-placeholder__class {
							color: $J49494;
						}
					}
				}
				.explain {
					text-align: center;
					line-height: 42rpx;
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 372rpx;
					color: $bg-0;
				}
				.btn {
					background-color: $white;
					margin: 60rpx auto 0 auto;
					width: 368rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: $B18181;
					&.active {
						color: $L7C160;
					}
				}
			}
		}
	}
</style>
