<template>
    <view class="bg">
        <view class="form-box">
            <view class="form-item">
                <image src="https://m.cloud.sz-trip.com/static/images/Login/newMobile.png" alt=""></image>
                <input type="number" v-model="form.phone" placeholder="请输入手机号" />
            </view>
            <view class="form-item">
                <image src="https://m.cloud.sz-trip.com/static/images/Login/newCaptcha.png" alt=""></image>
                <input type="text" v-model="form.captcha" placeholder="请输入图形验证码" />
                <image :src="captchaUrl" @click="refreshCaptcha()" alt="" style="width: 200rpx;height: 50rpx;"
                    class="captcha">
            </view>
            <view class="form-item">
                <image src="https://m.cloud.sz-trip.com/static/images/Login/newMobilecode.png" alt=""></image>
                <input type="number" v-model="form.code" placeholder="请输入验证码" />
                <view @click="handleGetCode()" class="getCode">{{ codeText }}</view>
            </view>
        </view>
        <view @click="handleLogin()" class="submit">登录</view>
        <view class="flex-center" style="margin-top: 30rpx;">
                <radio-group @change="toggleAgreement">
                    <radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio>
                </radio-group>
                <view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view>
            </view>

        </view>

    </view>
</template>

<script>
export default {
    data() {
        return {
			  form: {
				phone: "",
				code: "",
				captcha: "", // 新增图形验证码字段
			  },
			  // 验证码逻辑
			  codeText: "获取验证码",
			  codeDisabled: false,
			  countdown: 60,
			  // 图形验证码相关
			  captchaUrl: "", // 图形验证码图片地址
			  captchaId: "",
			  // 记住账号
			  rememberPhone: false,
			  // 加载状态
			  submitting: false,
			  smsCodeId: "",
			  
			  checked: false,
			  isAgreed: false,
	
        }
    },
    onReady() {
		this.refreshCaptcha();
    },
    methods: {
        // 刷新图形验证码
		refreshCaptcha() {
		  this.Post({}, "/api/uservice/user/getCaptchaImg").then((res) => {
			if (res) {
			  this.captchaUrl = res.data.code;
			  this.captchaId = res.data.id;
			}
		  });
		},
		// 切换协议同意状态
		toggleAgreement() {
		    this.isAgreed = !this.isAgreed;
		},
		// 重置表单
		resetForm() {
		  this.form.code = "";
		  this.form.captcha = ""; // 重置图形验证码
		  // 刷新图形验证码
		  this.refreshCaptcha();
		},
		
		// 获取短信验证码（添加图形验证码校验）
		handleGetCode() {
		  // 先验证手机号和图形验证码
		  if (!this.form.phone) {
			this.$message.warning("请先输入手机号码");
			return;
		  }
		  if (!this.form.captcha) {
			this.$message.warning("请先输入图形验证码");
			return;
		  }
	
		  this.Post(
			{
			  mobile: this.form.phone,
			  captchaCode: this.form.captcha,
			  captchaCodeId: this.captchaId,
			},
			"/api/uservice/user/getMobileCodeForLogin"
		  ).then((res) => {
			console.log(res);
			if (res.code == 1) {
			  this.codeDisabled = true;
			  this.smsCodeId = res.data.id;
			  this.codeText = `重新发送(${this.countdown}s)`;
			  const timer = setInterval(() => {
				this.countdown--;
				this.codeText = `重新发送(${this.countdown}s)`;
				if (this.countdown <= 0) {
				  clearInterval(timer);
				  this.codeText = "获取验证码";
				  this.codeDisabled = false;
				  this.countdown = 60;
				}
			  }, 1000);
			}
		  });
		},
	
		// 登录提交（包含图形验证码校验）
		handleLogin() {
			if (!this.form.phone) {
				uni.showToast({
					title:"请输入手机号码",
					icon:"none"
				})
				return;
			}
			if (!this.form.captcha) {
				uni.showToast({
					title:"请输入图形验证码",
					icon:"none"
				})
				return;
			}
			if (!this.form.code) {
				uni.showToast({
					title:"请输入短信校验码",
					icon:"none"
				})
				return;
			}
			if (!this.isAgreed) {
				uni.showToast({
					title:"请先勾选同意《用户服务协议》、《隐私政策》",
					icon:"none"
				})
				return;
			}
			this.submitting = true;
			this.Post(
				{
				  mobile: this.form.phone,
				  smsCodeId: this.smsCodeId,
				  smsCode: this.form.code,
				  fromSource: "mini"
				},"/api/uservice/user/loginByMobileCode").then((res) => {
					this.submitting = false;
					if (res.code == 1) {
						this.$store.commit('changeUserInfo', res.data);
						this.navigateBasedOnPath();
					}
			});
		},
    }
}
</script>

<style scoped lang="scss">
.bg {
    /* background: #FFFFFF; */
    padding-bottom: 120rpx;
    position: relative;
    background-image: url("https://m.cloud.sz-trip.com/static/images/Login/newTopBg.png");
    background-size: 100% 100%;
    padding-top: 240rpx;
	min-height: 100vh;
}
.form-box {
    margin: 0 auto;
    padding: 0 50rpx;
	.form-item {
	    padding: 20rpx 0;
	    display: flex;
	    align-items: center;
	    position: relative;
	    background: #fff;
	    border-radius: 25px;
	    height: 80rpx;
	    margin-bottom: 50rpx;
	    padding-left: 30rpx;
		&>image {
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
		}
		input {
		    border: none;
		    padding-left: 20rpx;
		    font-size: 32rpx;
		    font-weight: 500;
		    color: #ABABAB;
		}
		.captcha {
		    position: absolute;
		    right: 50rpx;
		    top: 0;
		    bottom: 0;
		    margin: auto;
		}
		.getCode {
		    position: absolute;
		    right: 50rpx;
		    font-size: 28rpx;
		    font-weight: 400;
		    color: #0B898E;
		    height: 50rpx;
		    line-height: 50rpx;
		    border: 1px solid #0B898E;
		    border-radius: 30rpx;
		    padding: 0 20rpx;
		    text-align: center;
		    top: 0;
		    bottom: 0;
		    margin: auto;
		}
	}
}


.submit {
    font-size: 36rpx;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    background: #0B898E;
    border-radius: 50rpx;
    margin: 0 auto;
    width: 600rpx;
    margin-top: .6rem;
}


input::placeholder {
  color: #ABABAB;
}

.yuan {
    width: .37rem;
    height: .37rem;
    flex-shrink: 0;
}

.article-box {
    font-weight: 400;
    font-size: 27rpx;
    color: #00B200;
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	 .iconfont {
	    margin-right: 10rpx;
	    font-size: 26rpx;
	}
	
	 text {
	    border-bottom: 1px solid;
	}
}


</style>
