<template>
	<view class="add-school-activity">
		<view class="top">
			<image class="back" src="/static/login/returnBack.png" @click="goBack()"></image>
			<view class="title">创建小队</view>
			<span class="empty"></span>
		</view>
		<view class="school-activity-icon-wrapper">
			<image mode="widthFix" class="school-activity-icon" src="/static/team/create.png"></image>
		</view>
		<view class="school-activity-item-wrapper">
			<view class="form-group">
				<image mode="widthFix" class="form-icon" src="/static/discover/activity-object.png"></image>
				<input class="form-input" type="text" placeholder="请输入小队名称" v-model="name">
			</view>
			<view class="form-group">
				<image mode="widthFix" class="form-icon" src="/static/team/head.png"></image>
				<view class="avatar" @tap="avatarChoose">
					<view class="imgAvatar">
						<view class="iavatar" :style="'background: url('+avatar+') no-repeat center/cover #cccccc;'">
						</view>
					</view>
					<text>设置头像</text>
				</view>
			</view>
			<view class="form-group">
				<image mode="widthFix" class="form-icon" src="/static/discover/content.png"></image>
				<textarea class="form-input1" placeholder="请输入小队描述" v-model="content"></textarea>
			</view>
		</view>
		<view class="btn">
			<button class="loginButton" @click="create()">创建</button>
		</view>
	</view>
</template>
<script>
	let code=200;
	export default {
		data() {
			return {
				avatar: '',
				userId: '644a643a0c801ca878983559',
				name: '',
				content: ''
			}
		},
		onLoad() {
			this.userId=getApp().globalData.userId
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/team/main?index=1',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			avatarChoose() {
				let that = this;
				uniCloud.chooseAndUploadFile({
					type: 'image',
					success(res) {
						that.avatar = res["tempFiles"][0]["url"];
						console.log(that.avatar, 'avatar');
					},
					fail() {},
					complete() {}
				});
			},
			async create() {
				if(this.name==''||this.content==''){
					uni.showToast({
						title: '信息填写不完整',
						icon: 'none'
					});
					return;
				}
				if(this.avatar==''){
					this.avatar='https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/7d3feb79-8efe-4686-b745-3b7dc5d5df36.png'
				}
				await uniCloud.callFunction({
						name: 'fe-team-createTeam',
						data: {
							teamIcon: this.avatar,
							teamname: this.name,
							createrId: this.userId,
							description: this.content,
						}
					})
					.then(res => {
						console.log(res)
						this.code = res.result.code
						console.log(this.code, 'this.code')
					})
				await this.showTorM();
			},
			showTorM(){
				if (this.code == 200) {
					console.log(this.code, 'this.code1')
					uni.showToast({
						title: '创建成功',
						duration: 2000
					});
				} else{
					uni.showModal({
						title: '提示',
						content: '您已加入一个小队，若要加入或创建小队，请先退出已加入的小队再进行相应的操作。',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		}
	}
</script>

<style>
	.add-school-activity {
		position: absolute;
		width: 100%;
		height: 100%;
		
	}

	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		margin-right: auto;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		font-size: 23px;
		margin-top: 10px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}


	.school-activity-icon-wrapper {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.school-activity-icon {
		width: 270px;
		height: auto;
		margin: 0px;
		padding: 0px;
	}

	.school-activity-item-wrapper {
		margin-top: 20px;
	}



	.form-group {
		display: flex;
		margin-top: 15px;
	}

	.form-icon {
		width: 40px;
		height: auto;
		margin-left: 30px;
	}

	.form-input {
		margin-left: 5px;
		width: 70%;
		height: 35px;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333;
		background-color: #edeef0;
		padding: 0 10px;
	}

	.form-input1 {
		margin-left: 5px;
		width: 70%;
		height: 170px;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333;
		background-color: #edeef0;
		padding: 0 10px;
	}


	.loginButton {
		width: 50%;
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 15px;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.loginButton::after {
		border: 0;
	}

	.btn {
		margin-bottom: 30px;
	}

	.iavatar {
		width: 100%;
		height: 100%;
		display: block;
	}

	.imgAvatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
	}

	text {
		display: inline-block;
		vertical-align: middle;
		color: #8e8e93;
		font-size: 28rpx;
		margin-left: 40rpx;
	}

	&:after {
		content: ' ';
		width: 20rpx;
		height: 20rpx;
		border-top: solid 1px #030303;
		border-right: solid 1px #030303;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		/* IE 9 */
		-moz-transform: rotate(45deg);
		/* Firefox */
		-webkit-transform: rotate(45deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(45deg);
		position: absolute;
		top: 85rpx;
		right: 0;
	}

	.avatar {
		margin-left: 5px;
		background-color: #edeef0;
		width: 70%;
		text-align: left;
		padding: 20rpx;
		border-bottom: solid 1px #f2f2f2;
		position: relative;
	}
</style>