<template>
	<view class="container pd-56">
		<view class="userInfo-content">
			<view class="title-24-800 top">
				<view>登录</view>
				<view><text class="f-colot-00BCA6">健康服务</text>平台</view>
				<view class="title-15-400 f-colot-848D99">某某公益平台申请</view>
			</view>
			<uv-form
				labelPosition="left"
				labelWidth="140"
				labelStyle="
					font-weight: 500;
					font-size: 32rpx;
					color: #1D2129;"
				:model="model"
				:rules="rules"
				ref="form"
			>
				<uv-form-item label="姓名" prop="userInfo.name" borderBottom>
					<uv-input
						v-model="model.form.name"
						border="none"
						placeholder="请输入姓名"
						inputAlign="right"
					>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="手机号码" prop="userInfo.phone" borderBottom>
					<uv-input v-model="model.form.phone" border="none" inputAlign="right">
						<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;
										background: unset;
										margin: none;
										padding: unset;
										color: rgba(22, 24, 26, 0.6);
									"
								>
									点击获取
								</button>
								<!-- <text>点击获取</text> -->
							</view>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item
					label="主要执业医院"
					prop="userInfo.name"
					borderBottom
					@click="showPopup('hospital')"
				>
					<uv-input
						v-model="model.form.hospitalName"
						border="none"
						disabled
						disabledColor="#ffffff"
						placeholder="请输入医院名称"
						inputAlign="right"
					>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="科室" prop="userInfo.name" borderBottom
										@click="showPopup('dept')"
					>
					<uv-input
						v-model="model.form.deptName"
						border="none"
						disabled
						disabledColor="#ffffff"
						placeholder="请输入科室名称"
						inputAlign="right"
					>
					</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>
	<uv-popup ref="selectionPopup" mode="bottom" closeable="true" round="12">
		<view class="popup-content">
			<text class="popup-title">{{ popupTitle }}</text>
			<uv-input
				placeholder="搜索一下"
				prefixIcon="search"
				v-model="searchValue"
				@confirm="searchList"
				customStyle="background: #FFFFFF; box-shadow: 0rpx 2 7rpx 0rpx #8EEEF3; border-radius: 200rpx 200rpx 200rpx 200rpx;"
				prefixIconStyle="font-size: 22px; color: #11C3AE"
			>
				<template v-slot:suffix>
					<text class="search" @click="searchList">申请</text>
				</template>
			</uv-input>
			<view class="list-container">
				<next-tree
					style="height: 60%"
					uiMode="page"
					childrenKey="list"
					labelKey="name"
					ref="nextTreeRef"
					themeColor="#00BCA6"
					:treeData="viewList"
					@change="handleSelection"
				/>
			</view>
		</view>
	</uv-popup>
</template>

<script lang="ts" setup>
import { ref, inject } from "vue";
import userApi from "@/api/user";
import systemApi from "@/api/system";
import useUserStore from "@/store/modules/user";
import type UvCode from "@/uni_modules/uv-code/components/uv-code/uv-code.vue";
const $showToast: any = inject("$showToast");

const code = ref<typeof UvCode | any>(null);
const checkboxValue = ref(false);
const userStore = useUserStore();
const searchHospitaltValue = ref("");
const hospitalPopup = ref<any>(null);
const searchValue = ref("");
const popupTitle = ref("选择");
const listData = ref([]);
const selectionPopup = ref<any>(null);
const tips = ref("获取验证码");
/**
 * 提交得表单数据
 */
const model = ref({
	form: {
		name: "",
		phone: "",
		deptName: "",
		deptId: "",
		hospitalName: "",
		hospitalId: "",
	},
});
/**
 * 模态框树形选择内容
 */
const viewList = ref([
	{
		name: "内科",
		list: ["内科", "内科"],
	},
	{
		name: "外科",
		list: ["外科"],
	},
]);


const form = ref<any>(null);
/**
 * 表单验证规则
 */
const rules = ref({
	"userInfo.email": {
		type: "number",
		required: true,
		message: "请填写手机号码",
		trigger: ["blur", "change"],
	},
	"userInfo.password": {
		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 getCode = () => {
	if (code.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: "正在获取验证码",
		});
		setTimeout(() => {
			uni.hideLoading();
			// 这里此提示会被this.start()方法中的提示覆盖
			$showToast("验证码已发送");
			// 通知验证码组件内部开始倒计时
			code.value.start();
		}, 2000);
	} else {
		$showToast("倒计时结束后再发送");
	}
};
/**
 * 获取微信手机号码
 */
 const onGetPhoneNumber = async (e: any) => {
	if (e.detail.errMsg == "getPhoneNumber:ok") {
		let code = e.detail.code;
		const {
			data: { phone },
		} = await userApi.getUserPhone({ code });
		$showToast("获取成功");
		model.value.form.phone = phone;
	} else {
		console.log("用户点击了拒绝");
	}
};
/**
 * 表单提交
 */
const submit = async () => {
	if (!checkboxValue.value) {
		$showToast("请同意平台服务协议");
		return;
	}
	//表单校验
	await form.value.validate();
	let data = JSON.parse(JSON.stringify(model.value.form))
	delete data.deptName
	delete data.hospitalName
	// const {
	// 	data: { token },
	// } = await userApi.login(model.value.form);
	// uni.setStorageSync("userToken", token);
	await userApi.apply(data);
	$showToast("申请成功,请登录!")
	setTimeout(() => {
		uni.redirectTo({url:"/pages/login/index"})
	},1000)
	// uni.switchTab({
	// 	url: "/pages/home/index",
	// });
};

/**
 * 弹出弹出框
 * @param type 模态框内容类型
 */
const showPopup = (type: "hospital" | "dept") => {
	popupTitle.value = type === "hospital" ? "选择医院" : "选择科室";
	searchValue.value = ""; // Reset search input
	viewList.value = []; // Clear existing data
	selectionPopup.value.open();
	type === "hospital" ? searchHospitalList() : searchDeptList();
};

/**
 * 医院列表搜索
 */
const searchHospitalList = async () => {
	const { data } = await systemApi.hospitalList({
		keyword: searchValue.value,
	});
	viewList.value = data;
};
/**
 * 科室列表搜索
 */
const searchDeptList = async () => {
	const { data } = await systemApi.departmentList({
		keyword: searchValue.value,
	});
	viewList.value = data;
};
/**
 * 搜索
 */
const searchList = () => {
	if (popupTitle.value === "选择医院") {
		searchHospitalList()
	} else if (popupTitle.value === "选择科室") {
		searchDeptList()
	}
}
/**
 * 树形选择回调
 * @param e 
 */
const handleSelection = (e: any) => {
	let data = JSON.parse(JSON.stringify(e[0]));
	if (popupTitle.value === "选择医院") {
		model.value.form.hospitalId = data.id;
		model.value.form.hospitalName = data.name;
	} else if (popupTitle.value === "选择科室") {
		model.value.form.deptId = data.id;
		model.value.form.deptName = data.name;
	}
	selectionPopup.value.close();
};


</script>

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