<template>
	<view class="container pd-56">
		<!-- 用户信息内容区域 -->
		<view class="userInfo-content">
			<!-- 登录标题 -->
			<view class="title-24-800">
				<view>登录</view>
				<view><text class="f-colot-00BCA6">健康服务</text>平台</view>
			</view>
			<!-- 表单组件 -->
			<uv-form
				labelPosition="top"
				labelWidth="100"
				:labelStyle="{ fontSize: '12px', color: '#0C092A', fontWeight: '400' }"
				:model="model"
				:rules="rules"
				ref="form"
			>
				<!-- 手机号输入框 -->
				<uv-form-item label="" prop="userInfo.phone">
					<uv-input
						border="none"
						customStyle="
							display: inline-block;
							border-radius: 8rpx;
							box-sizing: border-box;
							height: 96rpx;
							margin-top: 30rpx;
							display: flex;
							align-items: center;
							font-size: 32rpx;
							padding: 20rpx;
							font-weight: 400;
							border: unset;
							background-color: rgba(246, 247, 248, 1) !important;
						"
						v-model="model.userInfo.phone"
						prefixIcon="email"
						placeholderStyle="color: rgba(201, 205, 212, 1);"
						:prefixIconStyle="{ color: '#848D99', fontSize: '28px' }"
						placeholder="请输入手机号码"
					>
						<template v-slot:prefix>
							<CustomIcon iconName="phone" color="#848D99" size="35" />
						</template>
						<template v-slot:suffix>
							<uv-code
								ref="uCode"
								@change="codeChange"
								seconds="20"
								changeText="X秒重新获取"
							></uv-code>
							<view
								class="tips-phone"
								style="display: flex; justify-content: center"
							>
								<view
									class="wx-icon"
									style="height: 40rpx; width: 40rpx; margin-right: 10rpx"
								>
									<uv-icon name="weixin-fill" color="#fff" size="20"></uv-icon>
								</view>
								<button
									open-type="getPhoneNumber"
									@getphonenumber="onGetPhoneNumber"
									style="
										font-weight: 400;
										font-size: 28rpx;
										line-height: unset;
										margin: none;
										padding: unset;
										color: rgba(22, 24, 26, 0.6);
									"
								>
									点击获取
								</button>
							</view>
						</template>
					</uv-input>
				</uv-form-item>
				<!-- 验证码输入框 -->
				<uv-form-item label="" prop="userInfo.code">
					<uv-input
						v-model="model.userInfo.code"
						type="password"
						border="none"
						customStyle="
							display: inline-block;
							border-radius: 8rpx;
							box-sizing: border-box;
							height: 96rpx;
							display: flex;
							align-items: center;
							font-size: 32rpx;
							padding: 20rpx;
							font-weight: 400;
							border: unset;
							background-color: rgba(246, 247, 248, 1) !important;
						"
						placeholderStyle="color: rgba(201, 205, 212, 1);"
						:suffixIconStyle="{ color: '#CCCCCC', fontSize: '28px' }"
						:prefixIconStyle="{ color: '#4382fd', fontSize: '28px' }"
						placeholder="请输入验证码"
					>
						<template v-slot:suffix>
							<uv-code
								ref="code"
								@change="codeChange"
								seconds="20"
								changeText="重新获取(X秒)"
							></uv-code>
							<text @click="getCode" class="tips">{{ tips }}</text>
						</template>
					</uv-input>
				</uv-form-item>
				<!-- 登录按钮 -->
				<button class="button-02 btn title-16-600" @click="submit">登录</button>
			</uv-form>
			<!-- 协议勾选区域 -->
			<view class="agreement title-13-400">
				<uv-checkbox-group
					customStyle="justify-content: center;"
					v-model="checkboxValue"
					activeColor="#00BCA6"
					style="justify-content: center"
					shape="circle"
				>
					<uv-checkbox
						:customStyle="{ marginBottom: '8px' }"
						label=""
						:name="12"
					>登录则表示您同意平台服务协议</uv-checkbox>
				</uv-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, inject } from "vue";
import userApi from "@/api/user";
import useUserStore from "@/store/modules/user";
import type UvCode from "@/uni_modules/uv-code/components/uv-code/uv-code.vue";
import { requestCommon } from "@/utils/request";

// 引用组件
const code = ref<typeof UvCode | any>(null);
const checkboxValue = ref(false);
const userStore = useUserStore();
const tips = ref("获取验证码");
const model = ref({
	userInfo: {
		phone: "19909090908",
		code: "253029",
	},
});

// 注入的 showToast 方法，用于显示提示
const $showToast: any = inject("$showToast");
const form = ref<any>(null);

// 表单校验规则
const rules = ref({
	"userInfo.phone": {
		type: "number",
		required: true,
		message: "请填写手机号码",
		trigger: ["blur", "change"],
	},
	"userInfo.code": {
		type: "string",
		max: 10,
		required: true,
		message: "请填写验证码",
		trigger: ["blur", "change"],
	},
});

/**
 * 返回上一页
 */
const handleLeft = () => {
	uni.navigateBack({
		delta: 1,
	});
};

/**
 * 处理验证码倒计时
 * @param text 倒计时文本
 */
const codeChange = (text: string) => {
	tips.value = text;
};

/**
 * 注册页面跳转
 */
const singUp = () => {
	uni.redirectTo({
		url: "/pages/register/index",
	});
};

/**
 * 获取验证码
 */
const getCode = async () => {
	if (code.value.canGetCode) {
		uni.showLoading({
			title: "正在获取验证码",
		});
		await userApi.getCode({ phone: model.value.userInfo.phone });
		uni.hideLoading();
		$showToast("验证码已发送");
		code.value.start();
	} else {
		$showToast("倒计时结束后再发送");
	}
};

/**
 * 获取微信手机号码
 * @param e 微信返回的事件对象
 */
const onGetPhoneNumber = async (e: any) => {
	if (e.detail.errMsg === "getPhoneNumber:ok") {
		const { code } = e.detail;
		const { data: { phone } } = await userApi.getUserPhone({ code });
		$showToast("获取成功");
		model.value.userInfo.phone = phone;
	} else {
		console.log("用户点击了拒绝");
	}
};

/**
 * 表单提交
 */
const submit = async () => {
	if (!checkboxValue.value) {
		$showToast("请同意平台服务协议");
		return;
	}
	// 表单校验
	await form.value.validate();
	await userStore.userLogin(model.value.userInfo);
	uni.switchTab({ url: '/pages/home/index' });
};
</script>

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