<template>
	<view style="background: #F1F2F5;">
		<RefreshView id="mescrollRef" ref="mescrollRef" pageBg="#F1F2F5" text="创建队伍" :useDownScroll="false"
			:useUpScroll="false">
			<view class="item">
				<view class="view1">
					<view class="view1_top">
						<text class="view1_top_text">【队伍名称】</text>
						<input class="view1_top_input" type="text" @input="txtName" placeholder="请输入队伍名称":value="info.name" />
					</view>
					<view
						style="width: 100%;height: 5rpx;background-color: #f5f4f9;margin-top: 20rpx;margin-bottom: 20rpx;">
					</view>
					<textarea class="slogan" auto-height="true" style="min-height: 80rpx;" @input="txtWatchWord"
						placeholder="请输入队伍口号（点击编辑）" :value="info.watchWord" />
				</view>
			</view>
			<view class="item">
				<view class="view2">
					<text class="lift_text">人数限制</text>
					<textarea class="slogan" auto-height="true" style="min-height: 80rpx;" @input="txtMemberNumberLimit" :value="info.memberNumberLimit" />
					<text class="right_text1" >人</text>
				</view>
			</view>
			<view class="item">
				<view class="view2">
					<text class="lift_text">运动项目标签</text>
					<view style="display: flex; flex: 1;justify-content: flex-end;margin-right: 15rpx;">
						<fui-dropdown-menu :right="1" :minWidth="300" :size="30" selectedColor="#465CFF"
							:options="optSportCategory" @click="typeItemClick" @close="typeClose" ref="ddmtype">
							<view class="fui-filter__item" @tap="filterTap()">
								<text>{{type}}</text>
								<image style="width: 22rpx;height: 22rpx; margin-left: 15rpx;"
									src="../../static/event-icon/xia.png" mode="aspectFit" class="fui-filter__icon"
									:class="{'fui-icon__ani':typeShow}">
								</image>

							</view>
						</fui-dropdown-menu>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="view2">
					<text class="lift_text">是否公开招募队员</text>
					<switch color="#007AFF" class="tui-fr" :checked="radioInviteRecruitType" @change="radioInviteRecruitTypeChange" >
					</switch>
				</view>
			</view>
			<view class="item">
				<view class="view2">
					<text class="lift_text">同时兼队员</text>
					<switch color="#007AFF" class="tui-fr" :checked="radioConcurrentlyMember"   @change="radioConcurrentlyMemberChange" >
					</switch>
				</view>
			</view>
			<view class="item">
				<view class="view2">
					<text class="lift_text">所在市</text>
					<view @click="selectCity()">
						<text class="right_text2">{{page.city}}</text>
						<image style="width: 22rpx;height: 22rpx; margin-left: 10rpx;"
							src="../../static/img/public/more.png" mode="aspectFit" class="fui-filter__icon">
					</view>
				</view>
			</view>
			<text class="btn" @click="save()">创建</text>
		</RefreshView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					sid:"",
					name:"",
					watchWord:"",
					memberNumberLimit:6,
					sportCategorySid:"b9e0fce3-2cd0-4090-8bb4-b50e4f1b23cc",
					sportCategoryName:"乒乓球",
					inviteRecruitType:1,
					concurrentlyMember:1,
					adCode:this.ReadPreference("find_city_code").slice(0, -2),
					adName:this.ReadPreference("find_city"),
					memberNumber:0,
					sysUserSid:""
				},
				page: {
					'adName': this.ReadPreference("find_city"),
					'adCode': this.ReadPreference("find_city_code").slice(0, -2),
				},
				data:{},
				optSportCategory: [{
					text: '乒乓球',
					value: 'b9e0fce3-2cd0-4090-8bb4-b50e4f1b23cc'
				}, {
					text: '羽毛球',
					value: '5b1142c2-383f-47b9-a4bb-2eb456d826db'
				}, {
					text: '户外',
					value: '325fb525-618c-4163-99a3-1167c4444444'
				}, {
					text: '骑行',
					value: '325fb525-618c-4163-99a3-1167ccecd6ed'
				}],
				typeShow: false,
				type: "乒乓球",
				radioInviteRecruitType: true,
				radioConcurrentlyMember:true,
				userNickName:"",
			}
		},
		onLoad(options) {
			this.info.sysUserSid = getApp().globalData.sysUserSid
			if (this.IsEmpty(this.sysUserSid)) {
				uni.navigateTo({
					url: '../user/login'
				})
				return
			}
			// 获取用户昵称
			this.HTTP({
				url: 'aos/v1/aosUser/getUserNickName/' + this.info.sysUserSid,
				method: 'GET',
				paramsType: "FORM",
				loading: true
			}).then((res) => {
				// 球队名称赋默认值为“昵称”+“队”
				this.info.name = res.data + "队"
			});		
		},
		methods: {
			txtName(e) {
				this.info.name = e.detail.value
			},
			txtWatchWord(e) {
				this.info.watchWord = e.detail.value
			},
			txtMemberNumberLimit(e) {
				this.info.memberNumberLimit = e.detail.value
			},
			radioInviteRecruitTypeChange(e){
				this.radioInviteRecruitType = !this.radioInviteRecruitType
			},
			radioConcurrentlyMemberChange(e){
				this.radioConcurrentlyMember = !this.radioConcurrentlyMember
				this.info.concurrentlyMember = this.radioConcurrentlyMember == true ? 0:1
			},
			save(){
				let _this = this
				_this.HTTP({
					url: 'aos/v1/aosUser/saveMyTeam',
					method: 'POST',
					paramsType: "JSON",
					data: _this.info,
					toast: true,
					loading: true
				})
				.then((res) => {
					console.log('测试', res)
					let teamSid = res.data
					let sysUserSid = getApp().globalData.sysUserSid
					console.log('是否参赛', _this.radioConcurrentlyMember)
					if (_this.radioConcurrentlyMember){
						_this.HTTP({
							url: 'aos/v1/aosUser/teamHeaderJoinTeam',
							method: 'POST',
							paramsType: "JSON",
							data: {
								teamSid:teamSid,
								memberSid:sysUserSid
							},
							toast: true,
							loading: true
						})
					}
					// 回退
					uni.navigateBack({
						delta: 1
					})
				
				});
			},
			filterTap() {
				this.$refs.ddmtype.show()
				this.typeShow = true;
			},
			typeItemClick(e) {
				this.type = e.text
				this.info.sportCategorySid = e.value
				this.info.sportCategoryName = e.text
				console.log(this.type)
				this.typeClose()
			},
			typeClose() {
				this.typeShow = false;
			},
			switch1Change: function(e) {
				this.switch1Checked = !this.switch1Checked;
				console.log(`switch1Change样式点击后是否选中：`, this.switch1Checked)
			},
			selectCity() {
				uni.navigateTo({
					url: "../../pages/city/CitySelectActivity?city=" + this.page.city +
						"&code=" + this.page.adCode
				})
			}

		}
	}
</script>

<style lang="scss">
	.item {
		display: flex;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 36rpx;
	}
	.view1 {
		display: flex;
		flex-direction: column;
		width: 100%;

		.view1_top {
			display: flex;
			flex-direction: row;

			.view1_top_text {
				font-size: 32rpx;
				color: #898989;
			}

			.view1_top_input {
				width: 70%;
				font-size: 32rpx;
				color: #101010;
				margin-left: 15rpx;
			}
		}
		.slogan {
			width: 100%;
			padding-left: 10rpx;
			padding-right: 10rpx;
		}
	}
	.view2 {
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;

		.lift_text {
			flex: 1;
			font-size: 28rpx;
			color: #898989;
		}

		.right_text1 {
			font-size: 28rpx;
			color: #BEBEBE;
		}

		.right_text2 {
			font-size: 28rpx;
			color: #101010;
		}

		.tui-fr {
			zoom: .7
		}
	}

	.btn {
		justify-content: center;
		width: 100%;
		margin-top: 100rpx;
		padding: 30rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #007AFF;
		text-align: center;
		flex: 1;
		position: absolute;
		bottom: 0;
	}
</style>
