<template>
	<view class="page-wrap">
		<view class="page-bg">
			<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
			<view class="notice">
				请如实填写个人资料，真实的资料会更受欢迎
			</view>
			<view class="title">
				你的性别是？
			</view>
			<view class="desc">
				注册后将无法更改，请认真填写
			</view>
			<view class="sex">
				<view :class="{current: sex == 1}" @click="sex = 1" class="sex-item">
					<image class="sex-item-icon" :src="sex == 1 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-01.png'" mode="aspectFill"></image>
					<view class="sex-item-text">
						男
					</view>
					<image src="../../../../static/icon/gou.png" v-if="sex == 1" class="gou"></image>
				</view>
				<view :class="{current: sex == 2}" @click="sex = 2" class="sex-item" style="margin-top: 50rpx;">
					<image class="sex-item-icon" :src="sex == 2 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-01.png'" mode="aspectFill"></image>
					<view class="sex-item-text">
						女
					</view>
					<image src="../../../../static/icon/gou.png" v-if="sex == 2" class="gou"></image>
				</view>
			</view>

			<view class="btn-wrapper">
				<u-button v-if="sex == null" text="继续" color="#837C8B"  shape="circle" ></u-button>
				<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex: null
			};
		},
		methods: {
			handleSubmit() {
				console.log('this.sex: ', this.sex);
				if (this.sex != null) {
					const userBase = uni.getStorageSync('UserBase') || {}
					userBase.sex = this.sex
					uni.setStorageSync("UserBase", userBase)
					this.$push('/sub_pages/user/base/birthday/birthday')
				}else {
					if (!this.avatar) {
						uni.showToast({
							title: '请选择性别',
							icon: 'none'
						})
						return
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../base.scss";

	.sex {
		display: flex;
		justify-content: space-around;
		margin-top: 200rpx;

		&-item {
			display: flex;
			flex-direction: column;
			text-align: center;
			opacity: .4;

			&.current {
				opacity: 1;
			}

			&-icon {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				// background-color: #FFF;
			}

			&-text {
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>