<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年8月7日 20:05:05
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const getUserInfo = async () => {
		const openid = uni.getStorageSync('OPENID')
		const response = await $api('UserInfo', {
			openid: openid
		})
		$response(response, () => {
			$store.user = response.data.info
		})
	}
	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('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
				})
				const 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) => {
				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()
		}
	}

	onShow(() => {
		if (!!user_box_ref.value) {
			getLong()
		}
		getUserInfo()
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view class="bannder_wrapper">
				<image :src="$image($store.config.banner)"></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">{{ 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>
						<view class="content_tip_wrapper">{{ $store.config.tip }}</view>
					</view>
					<view v-if="Number($store.user.count) > 1" 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="check_wrapper">
				<view @click="buttonClick(i)" class="check_item_wrapper" v-for="(i,k) in $store.config.check" :key="k">
					<view class="check_item_icon_wrapper">
						<image :src="$image(i.icon)"></image>
					</view>
					<view class="check_item_name_wrapper">
						{{ i.name }}
					</view>
					<view class="check_item_desc_wrapper">
						{{ i.desc }}
					</view>
				</view>
			</view>
			<view v-if="!!$store.config.ad.title" class="ad_wrapper">
				<view class="ad_title_wrapper">{{ $store.config.ad.title }}</view>
				<view class="ad_button_wrapper">{{ $store.config.ad.button }}</view>
			</view>
			<view class="more_wrapper">
				<view @click="buttonClick(i)" class="more_item_wrapper" v-for="(i,k) in $store.config.more" :key="k">
					<view class="more_item_icon_wrapper">
						<image :src="$image(i.icon)"></image>
					</view>
					<view class="more_item_name_wrapper">
						{{ i.name }}
					</view>
				</view>
			</view>
			<view class="botm_blank_wrapper"></view>
		</view>
	</view>
</template>
<style scoped>
	.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: 83rpx;
		height: 83rpx;
		margin: 15rpx auto 0;
	}

	.more_item_icon_wrapper image {
		width: 83rpx;
		height: 83rpx;
		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: 38rpx;
	}

	.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: 26rpx;
		color: #323232;
		line-height: 1;
	}

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

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

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

	.content_wrapper {
		margin-left: 25rpx;
	}

	.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;
		background: #FFFFFF;
		border-radius: 9rpx;
	}

	.more_wrapper {
		width: 679rpx;
		margin: 15rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.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;
	}

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

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

	.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>