<template>
	<view class="teamAdd white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('team.add.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="teamAdd_form">
				<view class="item">
					<view class="title">队名</view>
					<view class="content">
						<input class="uni-input" placeholder-class="uni-placeholder__class" v-model.trim="form.teamName" :maxlength="7" />
					</view>
				</view>
				<view class="item">
					<view class="title">小目标</view>
					<view class="content">
						<textarea :show-confirm-bar="false" class="uni-textarea" placeholder-class="uni-placeholder__class" v-model.trim="form.introduction" :maxlength="300" placeholder="定个小目标,邀小伙伴一起助力实现..." auto-height />
					</view>
				</view>
				<view class="btn" @click="saveBefore" :class="{active: options.checked}">创建</view>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				form: {
					createBy: uni.getStorageSync('uid'),
					teamName: '',
					introduction: ''
				},
				rules: [
					{ name: 'teamName', errorMsg: '请输入小队名称' },
					{ name: 'introduction', errorMsg: '请输入关于小队的介绍与要求' }
				],
				options: {
					checked: false
				}
			}
		},
		watch: {
			form: {
				handler() {
					if (this.form.teamName && this.form.introduction) {
						this.options.checked = true
					} else {
						this.options.checked = false
					}
				},
				deep: true
			}
		},
		methods: {
			// 保存前
			saveBefore () {
				this.$base.FORM_VERIFICATIONS(this.rules, this.form, () => {
					sdkService.createGroup({
						userID: uni.getStorageSync('uid'),
						name: this.form.teamName,
						introduction: this.form.introduction,
						type: uni.$TUIKitTypes.GRP_PUBLIC,
						maxMemberNum: 100
					}, res => {
						this.form.groupID = res.group.groupID
						this.save()
					})
				})
			},
			// 保存
			async save () {
				this.loading = true
				const result = await this.$axios.post(this.API.teamCreate, this.form)
				this.loading = false
				if (result) {
					uni.$emit('team')
					this.link(`/pages/team/voiceRoom?teamId=${result.teamId}&rid=${result.rid}&level=2`)
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.teamAdd {
		min-height: calc(100vh);

		.body_scroll {
			.teamAdd_form {
				padding: 60rpx 26rpx 96rpx 26rpx;
				.item {
					background-color: $white;
					border-radius: 18rpx;
					padding: 36rpx;
					& + .item {
						margin-top: 70rpx;
					}
					.title {
						margin-bottom: 28rpx;
						line-height: 30rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: $bg-0;
					}
					.content {
						.uni-input {
							border: 1px solid $ECECEC;
							border-radius: 18rpx;
							line-height: 42rpx;
							font-size: 30rpx;
							font-weight: 400;
							padding: 20rpx;
							color: $bg-0;
							/deep/ .uni-placeholder__class {
								color: $J49494;
							}
						}
						.uni-textarea {
							border: 1px solid $ECECEC;
							border-radius: 18rpx;
							min-height: 252rpx;
							line-height: 42rpx;
							font-size: 30rpx;
							font-weight: 400;
							padding: 20rpx;
							color: $bg-0;
							/deep/ .uni-placeholder__class {
								color: $J49494;
							}
						}
					}
				}
				
				.btn {
					background-color: $white;
					margin: 372rpx 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>
