<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年8月7日 20:05:05
	 */
	import TabBar from "@/common/TabBar.vue";
	import {
		ref
	} from 'vue'
	import {
		$api,
		$image,
		$response
	} from '@/api'
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app'
	import wx from 'weixin-js-sdk'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	
	const $props = defineProps({ 
		path:{
			type:String,
			default:''
		},
		orderid:{
			type:String,
			default:''
		},
	});

	const getUserInfo = async () => {
		const response = await $api('UserInfo')
		$response(response, () => {
			// $store.user = response.data.info
			$store.setUser(response.data.info);
			GetNoticeFunc()
		})
	}
	const switch_arr = [
		// '/pages/main/index/index',
		// '/pages/main/order/order',
		// '/pages/main/combo/combo',
	]
	const buttonClick = (info) => {
		if ('message' in info && !!info.message) {
			uni.$lu.toast(info.message)
		} else {
			if (info.jump.indexOf('XCX') !== -1) {
				let url =info.jump.slice(3)
				wx.miniProgram.navigateTo({
					url:  url
				})
			} else if (info.jump.indexOf('http') !== -1) {
				window.location.href = info.jump
			} else {
				if (switch_arr.includes(info.jump)) {
					uni.switchTab({
						url: info.jump
					})
				} else {
					uni.navigateTo({
						url: info.jump
					})
				}
			}
		}
	}

	const calculateDistance = (lat1, lon1, lat2, lon2, radius = 6371) => {
		const toRadians = (degrees) => degrees * Math.PI / 180;
		const lat1Rad = toRadians(lat1);
		const lon1Rad = toRadians(lon1);
		const lat2Rad = toRadians(lat2);
		const lon2Rad = toRadians(lon2);
		const dLat = lat2Rad - lat1Rad;
		const dLon = lon2Rad - lon1Rad;
		const a = Math.sin(dLat / 2) ** 2 + Math.sin(dLon / 2) ** 2 * Math.cos(lat1Rad) * Math.cos(lat2Rad);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		return (radius * c).toFixed(2);
	}

	const lola = ref({
		longitude: 0,
		latitude: 0
	})

	const getHospital = () => {
		if ($store.config.hospital.length > 0) {
			if (lola.value.longitude + lola.value.latitude > 0) {
				for (let i = 0; i < $store.config.hospital.length; i++) {
					let long = calculateDistance(
						lola.value.latitude,
						lola.value.longitude,
						$store.config.hospital[i].latitude,
						$store.config.hospital[i].longitude)
					if (long === 'NaN') {
						$store.config.hospital[i].long = 0
					} else {
						$store.config.hospital[i].long = long
					}
				}
				let list = $store.config.hospital
				list.sort((a, b) => {
					if (a.long === b.long) {
						return a.id - b.id
					}
					return a.long - b.long
				})
				let hospital_id = $store.save.hospital
				if (!!hospital_id) {
					hospital_id = ''
					for (let i in list) {
						if (list[i].id === hospital_id) {
							hospital_info.value = {
								id: list[i].id,
								name: list[i].name,
								long: list[i].long
							}
							hospital_id = list[i].id
							$store.saveInfo({
								hospital: list[i].id
							})
							break
						}
					}
					if (!hospital_id) {
						hospital_info.value = {
							id: list[0].id,
							name: list[0].name,
							long: list[0].long
						}
						$store.saveInfo({
							hospital: list[0].id
						})
					}
				} else {
					hospital_info.value = {
						id: list[0].id,
						name: list[0].name,
						long: list[0].long
					}
					$store.saveInfo({
						hospital: list[0].id
					})
				}
			} else {
				hospital_info.value = {
					id: $store.config.hospital[0].id,
					name: $store.config.hospital[0].name,
					long: 0,
				}
			}
		}
	}

	const hospital_info = ref(false)

	const getLong = (time = 0) => {
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				console.log(res)
				lola.value = {
					longitude: res.longitude,
					latitude: res.latitude
				}
				getHospital()
			},
			fail: (e) => {
				lola.value = {
					longitude: 0,
					latitude: 0
				}
				getHospital()
			}
		});
	}

	const user_box_ref = ref(null)
	const userBoxRef = (e) => {
		if (!user_box_ref.value) {
			user_box_ref.value = e
			getLong()
			getUserInfo()
		}
	}

	const toChooseUser = () => {
		uni.navigateTo({
			url: '/pages/user/choose/choose'
		})
	}

	const bannderClick = () => {
		if (!!$store.config.banner.jump) {
			if ($store.config.banner.jump.includes('https://')) {
				window.location.href = $store.config.banner.jump
			} else if ($store.config.banner.jump.includes('/pages/')) {
				uni.navigateTo({
					url: $store.config.banner.jump
				})
			}
		}
	}
	const OpenMap=()=>{
		console.log($store.config.hospital[0]);
		let hospital=$store.config.hospital[0];
		let p='&longitude='+hospital.longitude+'&latitude='+hospital.latitude+'&name='+hospital.name+'&address='+hospital.address+'&scale=16'+'&type=gcj02'
		console.log(p);
		wx.miniProgram.navigateTo({
			url: '/pages/other/entry/index?path=/pages/physical-examination/location/index'+p
		})
	};
	const gotoUrl=(url)=>{
		if (url.includes('https://')) {
			window.location.href = $store.config.banner.jump
		} else if (url.includes('/pages/')) {
			uni.navigateTo({
				url: url
			})
		}
		
	}
	//获取首页通知
	let NoticeInfo=ref([])
	const GetNoticeFunc = async () => {
		 
		uni.showLoading();
		const response = await $api("GetHomeNotice",{person_id:$store.getUser().person_id,id_number:$store.getUser().id_number});
		uni.hideLoading();
		$response(response, () => {
			 NoticeInfo.value=response.data
			 if (!!$props.path && $props.path=='order') {
				 let orderid=$props.orderid?$props.orderid:''
				 let canshu='?orderid='+orderid
				 uni.navigateTo({
				 	url: "/pages/main/order/order"+canshu  
				 })
			 }
		});
	};
    const getItemValue=(name) =>{
            const item =  NoticeInfo.value.find(item => item.label === name && item.value > 0);
            return item ? item.value : '';
        }
	onShow(() => {
		
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				console.log(res)
				lola.value = {
					longitude: res.longitude,
					latitude: res.latitude
				}
				 
			},
			fail: (e) => {
				console.log(e)
				lola.value = {
					longitude: 0,
					latitude: 0
				}
				 
			}
		});
		if (!!user_box_ref.value) {
			getLong()
		}
		getUserInfo()
		let buyinfo=$store.getBuyInfo()
			buyinfo.combo_id=''
			buyinfo.item_ids=[]
			buyinfo.combo_sex=''
			buyinfo.group_id=''
			buyinfo.person_id=''
			buyinfo.sanfang_code={}
			$store.setBuyInfo(buyinfo)
				
		$store.setCheckupTypeId({});
		$store.setDuoXuanYi({});
		$store.setPeiOuUser({});
		$store.setTempPlan({})
		$store.setYytjInfo({})
		$store.setYuYueFangShi('')
		$store.setGroupInfo({})
		$store.setComboContrast([]);
	})
</script>
<template>
	<TabBar></TabBar>
	<view>
		<view v-if="!!$store.config">
			<!-- <view @click="bannderClick()" class="bannder_wrapper">
				<image :src="$image($store.config.banner.image)"></image>
			</view> -->
			<view v-if="!!$store.user" class="user_wrapper">
				<view class="user_box_wrapper" :ref="userBoxRef">
					<!-- <view v-if="!!hospital_info" class="map_wrapper">
						<view class="map_icon_wrapper">
							<image src="@/static/assets/dingwei.png"></image>
						</view>
						<view class="map_name_wrapper" @click="OpenMap()">{{ hospital_info.name }}</view>
						<view v-if="!!hospital_info.long" class="map_long_wrapper">{{ hospital_info.long }}km</view>
					</view> -->
					<view class="logo_wrapper">
						<image :src="$image($store.config.logo)"></image>
					</view>
					<view class="content_wrapper">
						<view class="user_info_wrapper">
							<view class="user_name_wrapper">{{ $store.user.name }}</view>
							<view class="user_sex_wrapper">
								{{ Number($store.user.sex) === 1 ? '先生' : '女士' }}
							</view>
						</view>
						<!--25-03-04 欢迎词让隐藏 -->
						<!-- <view class="content_tip_wrapper">{{ $store.config.tip }}</view> -->
					</view>
					<view v-if="Number($store.user.count) > 1" @click="toChooseUser()" class="button_wrapper">切换</view>
				</view>
			</view>
			<view class="order_wrapper">
				<view @click="buttonClick(i)" class="order_item_wrapper" v-for="(i,k) in $store.config.order" :key="k">
					<view class="order_item_icon_wrapper">
						<image :src="$image(i.icon)"></image>
					</view>
					<view class="order_item_name_wrapper">
						{{ i.name }}
					</view>
				</view>
			</view>
			<view class="more_wrapper" v-for="(i,k) in $store.config.button">
				<view @click="buttonClick(ii)" class="more_item_wrapper" v-for="(ii,ik) in i" :key="ik">
					<view v-if="NoticeInfo.length>0 && NoticeInfo.some(item => item.label === ii.name && item.value>0) " class="hongdian"><span v-if="ii.name=='我的订单'">{{ getItemValue(ii.name) }}</span></view>
					<view class="more_item_icon_wrapper">
						<image :src="$image(ii.icon)"></image>
					</view>
					<view class="more_item_name_wrapper">
						{{ ii.name }}
					</view>
				</view>
			</view> 
			<view>
				<swiper v-if="$store.config?.lunbo" class="bannder_wrapper" circular      interval="2000" autoplay="true"   >
					<swiper-item v-for="(item,index) in $store.config.lunbo" :key="index" @click="gotoUrl(item.action)">
						<image :src="$image(item.url)"></image>
					</swiper-item>			 
				</swiper>
			</view>
			<view class="botm_blank_wrapper" style="font-size: 18rpx;color: #ccc;">10012226</view>
		</view>
		
	</view>
</template>
<style scoped>
	.hongdian{
		line-height: 20rpx;
		height: 20rpx;
		width: 20rpx;
		background-color: #ff9170;
		border-radius: 50%;
		position: absolute;
		right: 40rpx;
		top: 30rpx;
		z-index: 100;
		font-size: 16rpx;
		color: #fff;
		text-align: center;
	}
	.more_item_name_wrapper {
		font-weight: 500;
		font-size: 26rpx;
		color: #323232;
		line-height: 1;
		text-align: center;
		margin-top: 14rpx;
	}

	.more_item_wrapper {
		width: 50%;
	}

	.more_item_icon_wrapper {
		width: 100rpx;
		height: 100rpx;
		margin: 15rpx auto 0;
	}

	.more_item_icon_wrapper image {
		width: 100rpx;
		height: 100rpx;
		display: block;
		object-fit: contain;
	}

	.more_item_name_wrapper {
		font-weight: 500;
		font-size: 26rpx;
		color: #323232;
		line-height: 1;
		text-align: center;
		margin-top: 26rpx;
	}

	.ad_button_wrapper {
		width: 164rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		font-weight: 500;
		font-size: 25rpx;
		color: #35ACB2;
		line-height: 48rpx;
		text-align: center;
		position: absolute;
		right: 28rpx;
		bottom: 26rpx;
	}

	.ad_title_wrapper {
		font-weight: 500;
		font-size: 50rpx;
		color: #FFFFFF;
		line-height: 1;
		margin-top: 37rpx;
		margin-left: 61rpx;
	}

	.check_item_desc_wrapper {
		font-weight: 500;
		font-size: 20rpx;
		color: #B7B7B7;
		line-height: 1;
		text-align: center;
		margin-top: 11rpx;
	}

	.check_item_name_wrapper {
		font-weight: 500;
		font-size: 26rpx;
		color: #323232;
		line-height: 1;
		text-align: center;
		margin-top: 14rpx;
	}

	.check_item_wrapper {
		width: 50%;
	}

	.check_item_icon_wrapper {
		width: 83rpx;
		height: 83rpx;
		margin: 0 auto;
	}

	.check_item_icon_wrapper image {
		width: 83rpx;
		height: 83rpx;
		display: block;
		object-fit: contain;
	}

	.order_item_name_wrapper {
		font-weight: 500;
		font-size: 26rpx;
		color: #323232;
		line-height: 1;
		text-align: center;
		margin-top: 26rpx;
	}

	.order_item_wrapper {
		width: 50%;
		border-right: 1rpx #E8E8E8 solid;
	}

	.order_item_wrapper:last-child {
		border-right: none;
	}

	.order_item_icon_wrapper {
		width: 78rpx;
		height: 78rpx;
		margin: 0 auto;
	}

	.order_item_icon_wrapper image {
		width: 78rpx;
		height: 78rpx;
		display: block;
		object-fit: contain;
	}

	.button_wrapper {
		width: 96rpx;
		height: 54rpx;
		background: #35ACB2;
		border-radius: 27rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 54rpx;
		position: absolute;
		right: 10rpx;
		bottom: 50rpx;
	}

	.content_tip_wrapper {
		font-weight: 400;
		font-size: 24rpx;
		color: #939393;
		line-height: 1;
		margin-top: 23rpx;
	}

	.user_name_wrapper {
		font-weight: 500;
		font-size: 35rpx;
		color: #323232;
		line-height: 1;
	}

	.user_sex_wrapper {
		font-size: 22rpx;
		color: #939393;
		line-height: 1;
		margin-left: 20rpx;
		margin-top: 16rpx;
	}

	.user_info_wrapper {
		display: flex;
		align-items: center;
		 
	}

	.logo_wrapper {
		width: 90rpx;
		height: 90rpx;
		margin-left: 27rpx;
	}

	.content_wrapper {
		 
	 
		
		display: flex;
		margin-left: 30rpx;
		 
	}

	.logo_wrapper image {
		width: 90rpx;
		height: 90rpx;
		display: block;
		object-fit: contain;
	}

	.map_wrapper {
		position: absolute;
		height: 54rpx;
		background: #35ACB2;
		border-radius: 27rpx;
		top: -72rpx;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 16rpx;
		padding-right: 20rpx;

	}

	.map_icon_wrapper {
		width: 25rpx;
		height: 28rpx;
	}

	.map_icon_wrapper image {
		width: 25rpx;
		height: 28rpx;
		display: block;
		object-fit: contain;
	}

	.map_name_wrapper {
		height: 22rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 1;
		margin-left: 14rpx;
	}

	.map_long_wrapper {
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 1;
		margin-left: 17rpx;
		padding-left: 17rpx;
		border-left: 1rpx solid #ffffff;
	}

	.more_item_wrapper {
		width: 170rpx;
		height: 157rpx;
		position: relative;
	}

	.more_wrapper {
		width: 679rpx;
		margin: 15rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #FFFFFF;
		border-radius: 9rpx;
		padding-top: 20rpx;
		padding-bottom: 50rpx;
	}

	.ad_wrapper {
		position: relative;
		overflow: hidden;
		width: 679rpx;
		height: 155rpx;
		background: linear-gradient(-90deg, #B4DADA 0%, #13848C 90%);
		border-radius: 10rpx;
		margin: 15rpx auto 0;
	}

	.check_wrapper {
		width: 678rpx;
		height: 215rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 15rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.bannder_wrapper {
		width: 750rpx;
		height: 456rpx;
		position: relative;
		z-index: 1;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.bannder_wrapper image {
		width: 750rpx;
		height: 456rpx;
		display: block;
		object-fit: contain;
	}

	.user_wrapper {
		width: 678rpx;
		height: 75rpx;
		margin: 0 auto;
		position: relative;
		margin-top: 110rpx;
	}

	.user_box_wrapper {
		z-index: 2;
		position: absolute;
		width: 678rpx;
		height: 154rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		bottom: 0;
		display: flex;
		align-items: center;
	}

	.order_wrapper {
		width: 678rpx;
		height: 195rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 15rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>