<template>
	<view>
		<view class="body">
			<view class="list">
				<view class="list_content">
					<view class="list_title">性别</view>
					<view class="list_item fa">
						<view class="list_table" v-for="(item, index) in genderList" :key="index"
							:class="genderIndex == index ? 'list_active' : ''" @click="genderClick(index)">
							<image class="list_sexImage" :src="item.image" mode="aspectFill"></image>
							<view class="list_name" :style="genderIndex == index ? 'list_active' : ''">{{ item.name }}
							</view>
							<image class="list_tag" v-if="genderIndex == index" src="/static/images/lover_back.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="list_content fa">
					<view class="list_title">昵称</view>
					<input class="f1" v-model="form.nickname" placeholder="给自己取个昵称" placeholder-class="list_input" />
				</view>
				<view class="list_content fa">
					<view class="list_title">生日</view>
					<view class="list_module f1 fa">
						<picker class="list_data f1" mode="date" :value="form.birthday" @change="bindDateChange">
							<view class="list_picker f1 fa" :style="form.birthday ? 'color:#333' : 'color:#D3D3D3'">
								<view class="f1">
									{{ form.birthday ? formatBirthday(form.birthday) : '请选择生日' }}
									{{ age ? age + '岁' : '' }}
								</view>
								<image class="list_more" src="/static/images/more.png" mode="widthFix"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="list_content">
					<view class="fa sb">
						<view class="list_title fa">兴趣标签<text>*</text></view>
						<view class="list_customize fa" @click="alertClick()">
							<image src="/static/images/create_edit.png" mode="widthFix"></image>自定义
						</view>
					</view>
					<view class="list_detail fa">
						<view class="list_text f1 fa wp">
							<text v-for="(item, index) in selectCList" :key="index"
								:class="form.hobbies.includes(item.name) ? 'list_actives' : ''"
								@click="selectTag(index)" class="tag-item">{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="list_content fa">
					<view class="list_title">定位</view>
					<input class="f1" v-model="form.city" placeholder="请输入所在城市，如：北京市" placeholder-class="list_input" />
				</view>
			</view>
		</view>
		<view class="opt">
			<view class="opt_module">
				<view class="opt_data">
					<view class="opt_btn faj" @click="submit">
						确认提交
					</view>
				</view>
			</view>
		</view>
		<view class="alert faj" v-if="alertStats">
			<view class="alert_content">
				<image src="/static/images/close.png" mode="widthFix" @click="alertClick()"></image>
				<view class="alert_title">添加标签</view>
				<view class="alert_module fa wp">
					<view class="alert_item" v-for="(item, index) in selectCList" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view class="alert_detail fa">
					<input class="f1" v-model="Addform.name" placeholder="请输入自定义标签" placeholder-class="alert_input" />
					<view class="alert_add faj" @click="AddClick()">添加</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	GetBobbies,
	SetUserBasic,
	AddBobbies
} from '@/utils/api.js'
import {
	isPhone
} from '@/utils/utils.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
export default {
	components: {
		notHave,
		topSafety,
	},
	data() {
		return {
			form: {
				gender: 1,
				nickname: '',
				birthday: '',
				city: '',
				hobbies: [],
			},
			genderList: [{
				name: '男生',
				image: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/e90acc9a7675bb463188a8ecf8f46054.png',
				id: '0',
			},
			{
				name: '女生',
				image: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/a8b27c789ba9515ac0d07f77a3913d0b.png',
				id: '1',
			},
			],
			genderIndex: 0,
			selectCList: [],
			alertStats: false,
			Addform: {
				name: ''
			},
			age: '',
			cityPickerValue: [],
		}
	},
	onLoad() {
		this.getBobbies()
	},
	methods: {
		getBobbies() {
			GetBobbies({}).then(res => {
				if (res.code == 1) {
					this.selectCList = res.data
					console.log(this.selectCList)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		setUserBasic() {
			SetUserBasic(this.form).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: "提交成功",
						icon: 'none',
						position: 'top'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						});
						this.Addform.name = ''
						this.form.hobbies = []
						this.form.city = ''
						this.form.nickname = ''
						this.form.birthday = ''
						this.form.gender = 1
					}, 1000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		addBobbies() {
			AddBobbies(this.Addform).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
					this.getBobbies()
					this.Addform.name = ''
					this.alertStats = false
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		formatBirthday(dateString) {
			// 将 YYYY-MM-DD 格式转换为 YYYY年MM月DD日 格式
			if (!dateString) return '';
			const parts = dateString.split('-');
			if (parts.length === 3) {
				return `${parts[0]}年${parts[1]}月${parts[2]}日`;
			}
			return dateString;
		},
		bindDateChange(e) {
			this.form.birthday = e.detail.value;
			// 根据生日自动计算年龄
			const birthday = new Date(e.detail.value);
			const today = new Date();
			let age = today.getFullYear() - birthday.getFullYear();
			const monthDiff = today.getMonth() - birthday.getMonth();

			// 如果今年的生日还没到，则年龄减1
			if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthday.getDate())) {
				age--;
			}

			this.age = age.toString();
		},
		cityChange(e) {
			// 保存数组格式用于picker显示
			this.cityPickerValue = e.detail.value.slice(0, 2);
			// 将选择的地区数组转换为字符串格式，例如"山东省临沂市"
			this.form.city = this.cityPickerValue.join('-');
		},
		genderClick(index) {
			this.genderIndex = index
			this.form.gender = index + 1
		},
		AddClick() {
			this.addBobbies()
		},
		// selectTag(index) {
		// 	const selectedName = this.selectCList[index].name;
		// 	const selectedNameIndex = this.form.hobbies.indexOf(selectedName);
		// 	if (selectedNameIndex > -1) {
		// 		// 如果已选中，则取消选中
		// 		this.form.hobbies.splice(selectedNameIndex, 1);
		// 	} else {
		// 		// 如果未选中，则添加到选中数组
		// 		this.form.hobbies.push(selectedName);
		// 	}
		// },
		selectTag(index) {
			const selected = this.form.hobbies;
			const item = this.selectCList[index].name;

			// 如果已经选中，则取消选中（但确保至少保留一个）
			if (selected.includes(item)) {
				if (selected.length > 1) {
					// 可以取消选中
					const newSelected = selected.filter(hobby => hobby !== item);
					this.form.hobbies = newSelected;
				} else {
					// 至少要保留一个，不能取消
					uni.showToast({
						title: '至少需要选择一个标签',
						icon: 'none'
					});
				}
			} else {
				// 如果未选中，检查是否已达到最大数量
				if (selected.length < 3) {
					// 可以添加
					this.form.hobbies = [...selected, item];
				} else {
					// 已达到最大数量
					uni.showToast({
						title: '最多只能选择3个标签',
						icon: 'none'
					});
				}
			}
		},
		alertClick() {
			if (this.alertStats) {
				this.alertStats = false
			} else {
				this.alertStats = true
			}
		},
		submit() {
			if (this.form.nickname == '') {
				uni.showToast({
					title: "请输入昵称",
					icon: 'none',
					position: 'top'
				})
			} else if (this.form.birthday == '') {
				uni.showToast({
					title: "请选择生日",
					icon: 'none',
					position: 'top'
				})
			} else if (this.form.hobbies.length === 0) {
				uni.showToast({
					title: "请至少选择一个兴趣标签",
					icon: 'none',
					position: 'top'
				})
			} else if (this.form.city == '') {
				uni.showToast({
					title: "请输入所在城市",
					icon: 'none',
					position: 'top'
				})
			} else {
				console.log('提交数据', this.form)
				this.setUserBasic()
			}
		}
	}
}
</script>
<style>
page {
	background: #F6F8FA;
}
</style>
<style>
.body {
	position: relative;
	padding: 0 50rpx;
}

.list {
	position: relative;
	margin: 72rpx 0 0 0;
}

.list_content {
	position: relative;
	margin: 0 0 70rpx 0;
	padding: 30rpx 40rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	box-sizing: border-box;
}

.list_title {
	margin: 0 120rpx 0 0;
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_title text {
	color: #817EFE;
}

.list_content input {
	font-weight: 400;
	font-size: 30rpx;
	color: #333;
	line-height: 50rpx;
}

.list_input {
	color: #D3D3D3;
}

.list_content textarea {
	margin: 22rpx 0 0 0;
	height: 150rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #333;
	line-height: 50rpx;
}

.list_textarea {
	color: #ADADAD;
}

.list_module {
	position: relative;
}

.list_adress {
	margin: 0 10rpx 0 0;
	width: 32rpx;
	height: 32rpx;
}

.list_more {
	width: 8rpx;
	height: 8rpx;
}

.list_count {
	position: absolute;
	right: 30rpx;
	bottom: 14rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #ADADAD;
	line-height: 50rpx;
}

.list_item {
	position: relative;
	margin: 30rpx 0 0 0;
}

.list_table {
	position: relative;
	margin: 0 32rpx 0 0;
	padding: 8rpx 6rpx;
	width: 168rpx;
	background: #FAFAFA;
	border-radius: 12rpx;
	border: 2rpx solid #FAFAFA;
}

.list_sexImage {
	width: 100%;
	height: 136rpx;
	display: block;
}

.list_name {
	font-weight: 400;
	font-size: 30rpx;
	color: #333333;
	line-height: 50rpx;
	text-align: center;
}

.list_active {
	color: #817EFE;
	border: 2rpx solid #817EFE;
}

.list_tag {
	position: absolute;
	right: 0;
	top: 0;
	width: 42rpx;
	height: 32rpx;
}

.list_detail {
	position: relative;
	margin: 20rpx 0 0 0;
}

.list_detail image {
	width: 8rpx;
	height: 8rpx;
}

.list_text {
	position: relative;
}

.list_text text {
	margin: 0 30rpx 30rpx 0;
	padding: 0 26rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
	background: #F6F8FA;
	border-radius: 12rpx;
}

.list_actives {
	color: #FF51B3 !important;
	background: rgba(255, 81, 179, 0.1) !important;
}

.list_customize {
	position: relative;
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.list_customize image {
	margin: 0 10rpx 0 0;
	width: 20rpx;
	height: 20rpx;
}

.opt {
	position: relative;
	height: 150rpx;
}

.opt_module {
	position: fixed;
	padding: 5rpx 0 70rpx 0;
	height: 85rpx;
	width: 100%;
	background: #F6F8FA;
	bottom: 0;
	left: 0;
	box-sizing: content-box;
	border-top: 1px solid #f0f0f0;
	z-index: 2;
}

.opt_data {
	padding: 5rpx 50rpx;
	font-size: 28rpx;
}

.opt_btn {
	padding: 20rpx 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 12rpx;
}

.alert {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 40rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.alert_content {
	position: relative;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 40rpx 50rpx;
}

.alert_content image {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	width: 30rpx;
	height: 30rpx;
}

.alert_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #161616;
	line-height: 38rpx;
	text-align: center;
}

.alert_module {
	position: relative;
	margin: 30rpx 0 0 0;
}

.alert_item {
	margin: 0 20rpx 20rpx 0;
	padding: 0 18rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #9E9E9E;
	line-height: 50rpx;
	background: #F6F8FA;
	border-radius: 10rpx;
}

.alert_active {
	color: #FF51B3;
	background: #FCE6F3;
}

.alert_detail {
	position: relative;
	margin: 20rpx 0 0 0;
}

.alert_detail input {
	padding: 15rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #000000;
	line-height: 50rpx;
	border-radius: 12rpx;
	border: 1px solid #989898;
}

.alert_input {
	color: #161616;
}

.alert_add {
	margin: 0 0 0 10rpx;
	padding: 15rpx 30rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 10rpx;
}

.alert_sure {
	margin: 20rpx 0 0 0;
}

.alert_sure text {
	padding: 15rpx 60rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 10rpx;
}
</style>