<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick,computed} from "vue"
	import unCombox from '@/uni_modules/uni-combox/components/uni-combox/uni-combox.vue' 
	import {useStore} from '@/store/index.js'
	const store = useStore()
	import api from "@/api/index.js"
	const h_index = ref(0)
	onLoad(() => {
		getHospitalList()
		// console.log(useStore.userInfo)
		userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
		console.log(userinfo.value)
		avatar.value = uni.getStorageSync('avatarUrl')
		if(uni.getStorageSync('operation_info')) {
			h_info.value = JSON.parse(uni.getStorageSync('operation_info'))
			if(h_info.value) {
				// console.log(h_info.value)
				getHospital(h_info.value.hospitalId)
			}
		}
	})
	// 变量
	const h_queryParams = ref({
		page:1,
		pageSize:1000,
		key:''
	})
	const hospitals = ref(null)
	const userinfo = ref({})
	const avatar = ref(null)
	const h_info = ref({})
	const inputDialog = ref(null)
	const input_title = ref(null)
	const hValue = ref('') // 医院
	const hValueId = ref('') // 医院id
	// const form_data = ref({})
	// const userForm = ref(null)
	// 方法
	async function getHospitalList() {
		const res = await api.getHospitalList(h_queryParams.value)
		if(res.code == 0) {
			hospitals.value = res.data.list
		}
	}
	function onInputH() {
		console.log(hValue.value)
		h_queryParams.value.key = hValue.value
		getHospitalList()
		
	}
	async function getHospital(id) {
		const res = await api.getHospitalInfo(id)
		if(res.code === 0) {
			h_info.value.name = res.data.name
		}
		else{
			uni.showToast({
				title:res.msg,
				icon:"error",
				duration:2000,
				mask:true,
				success() {}
			})
		}
	}
	const edit_type= ref(null)
	
	function toDetail(type) {
		edit_type.value = type
		switch(type){
			case 1: // 修改昵称 
				inputDialog.value.open()
				input_title.value = '修改昵称'
			 break;
			case 2: // 修改电话
				inputDialog.value.open()
				input_title.value = '修改电话'
			 break;
			default:
			 break;
		}
	}
	function finishFunc() {
		inputDialog.value.close()
	}
	const startDate = computed(() => getDate('start'))
	const endDate = computed(() => getDate('end'))
	const choosed_h = ref(null)
	const date = ref(null)
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	function bindDateChange(e) {
		console.log(e)
		h_info.value.surgery_time = e.detail.value
	}
	function toChooseH(item) {
		console.log(item)
		choosed_h.value = item
		hValue.value = item.name
		// hospitals.value = null
	}
	async function sumbmitFunc() {
		// console.log(choosed_h.value,h_info.value,userinfo.value)
		let obj = {
			id: userinfo.value.userId,
			// isSurgery: 1, //是否已经手术 0为手术，1已经手术
			surgery_time: h_info.value?.surgery_time, //手术时间
			nickname: userinfo.value.nickname,
			// avatar: '',
			phone: userinfo.value.phone,
			hospitalId:choosed_h.value?.ID
		}
		const res = await api.userinfoUpdae(obj)
		// console.log('res is ',res)
		if(res.code === 0) {
			uni.showToast({
				title:res.msg,
				icon:"success",
				duration:2000,
				async success() {
					await wx_login(userinfo.value.userId)
					uni.navigateBack()
				}
			})
		}
		else{
			uni.showToast({
				title:res.msg,
				icon:"error",
				duration:2000
			})
		}
	}
	async function wx_login(userId){
		let res=await new Promise(resolve=>{
			uni.login({
				  provider: 'weixin', //使用微信登录
				  success: function (loginRes) {
					  resolve(loginRes);
					  console.log(loginRes,'微信登录返回信息');
				  }
			});
		});
		let res2=await api.wx_login({code:res.code},userId);
		if(res2.code === 0) {
			uni.setStorageSync('userInfo',JSON.stringify(userinfo.value))
			// is_login.value = custom.checkLogin()
			store.checkLogin()
		}
		else{
			uni.clearStorage();
		}
	}
	function bindPickerChange(e) {
		console.log(hospitals.value )
		h_index.value = e.detail.value
	}
</script>
<template>
	<view class="userInfoBox page-box page-bg-gray">
		<view class="avatar-box">
			<image :src="avatar" mode="aspectFill"></image>
		</view>
		<view class="row-box">
			<view class="rb-card" @tap="toDetail(1)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <uni-icons type="person" color="gray" size="26"></uni-icons>
					  姓名</view>
				  <view class="rbc-content-row rbc-content-right">
					  {{userinfo?.nickname}}
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
			<view class="rb-card" @tap="toDetail(2)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <uni-icons type="phone" color="gray" size="26"></uni-icons>
					  电话</view>
				  <view class="rbc-content-row rbc-content-right">
					  {{userinfo?.phone}}
					  <uni-icons type="forward" color="gray" size="20"></uni-icons>
				  </view>
			  </view>
			</view>
			<view class="rb-card" @tap="toDetail(3)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <uni-icons type="calendar" color="gray" size="26"></uni-icons>
					  手术时间</view>
				  <view class="rbc-content-row rbc-content-right">
					  <!-- {{h_info?.surgery_time}} -->
					  <picker mode="date" :value="h_info?.surgery_time" :start="startDate" :end="endDate" @change="bindDateChange">
						  <view class="rbc-content-row rbc-content-right">
							  <view class="uni-input"> {{h_info?.surgery_time}}</view>
							  <uni-icons type="forward" color="gray" size="20"></uni-icons>
						  </view>
					  </picker>
				  </view>
			  </view>
			</view>
			<view class="rb-card" @tap="toDetail(4)">
			  <view class="rbc-content">
				  <view class="rbc-content-row rbc-content-left rbc-content-left-box">
					   <uni-icons type="paperplane" color="gray" size="26"></uni-icons>
					  手术医院</view>
				  <view class="rbc-content-row rbc-content-right">
					  <!-- {{h_info?.name}} -->
					  <!-- <uni-combox :border="false" @input="onInputH" :candidates="hospitals" placeholder="请选择医院" @choosed="toChooseH" v-model="userinfo.HospitalId"></uni-combox> -->
					  <!-- <uni-icons type="forward" color="gray" size="20"></uni-icons> -->
					  <picker @change="bindPickerChange" :value="h_index" :range="hospitals" range-key="name">
					  	<view class="uni-input">{{hospitals[h_index]?.name}}</view>
					  </picker>
				  </view>
			  </view>
			</view>
		</view>
		<!--修改姓名/电话 弹窗 -->
		<uni-popup ref="inputDialog" >
			<view class="pop-box">
				<view class="pb-title">{{input_title}}</view>
				<view class="pb-content">
					<view class="pb-item">
						<!-- <view class="pb-item-left">事项说明</view> -->
						<view class="pb-item-right">
							<!-- <input v-if="edit_type == 1" class="uni-input" v-model="userinfo.nickname" focus placeholder="输入您的姓名" />
							<input v-else class="uni-input" v-model="userinfo.phone" focus placeholder="输入您的电话" /> -->
							<uni-easyinput :inputBorder="false" v-if="edit_type == 1" borderColor="#26758d" v-model="userinfo.nickname" focus placeholder="输入您的姓名"></uni-easyinput>
							<uni-easyinput :inputBorder="false" v-else borderColor="#26758d" v-model="userinfo.phone" focus placeholder="输入您的电话"></uni-easyinput>
						</view>
					</view>
					<view  class="pb-item pb-item-btn" @tap="finishFunc">确定</view>
				</view>
			</view>
		</uni-popup>
		<view  class="pb-item pb-item-btn" style="margin-top: 40rpx;" @tap="sumbmitFunc">确定</view>
	</view>
</template>
<style scoped lang="scss">
	.avatar-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		padding: 20rpx 0;
		background: #26758d;
		image{
			width: 160rpx;
			height: 160rpx;
			background-color: white;
			border-radius: 50%;
		}
	}
	.rbc-content-right{
		display: flex;
		align-items: center;
		background: white;
		border-radius: 50%;
	}
	.rbc-content-left-box{
		uni-icons{
			margin-right: 20rpx;
		}
		display: flex;
		align-items: center;
	}
	.row-box{
		padding: 20rpx 0;
		.rb-card{
			padding: 20rpx;
			background: white;
			margin-bottom: 2rpx;
			.rbc-title{
				
			}
			.rbc-content-box{
				margin-top: 10rpx;
				.rbc-content-row{
					width: 50%;
					text-align: center;
					// padding: 40rpx 20rpx;
					// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
					border-radius: 10rpx;
				}
			}
			.rbc-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.btn-box{
		text-align: center;
		margin-top: 40rpx;
		.btn{
			display: inline-block;
			padding: 10px 20px;
			background: #e2e2e2;
			color: #26758d;
			border-radius: 10px;
			width: 50%;
		}
	}
	.userinfo-box{
		position: relative;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: white;
			margin-right: 20rpx;
		}
		color: white;
		background-color: #26758d;
		display: flex;
		align-items: center;
		padding: 40rpx 20rpx;
	}
	.user-box{
		background: #f6f6f6;
	}
	.pb-item-btn{
		padding: 20rpx 0;
		text-align: center;
		color: white;
		background: #26758d;
		justify-content: center;
		width: 66%;
		margin: 0 auto;
		border-radius: 10rpx;
	}
	.pop-box{
		.pb-title{
			text-align: center;
			margin-bottom: 40rpx;
			padding-top: 20rpx;
			font-size: 32rpx;
			font-weight: 900;
		}
		background-color: white;
		padding: 20rpx;
		width: 80%;
		margin: 0 auto;
		border-radius: 20rpx;
	}
	.pb-item{
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		// justify-content: space-between;
		.pb-item-left{
			width: 30%;
			color: gray;
		}
		.pb-item-right{
			position: relative;
			// margin-left: 10rpx;
			width:100%;
		}
	}
	:deep(){
		.uni-popup__wrapper{
			width: 100%;
		}
	}
</style>