<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年4月11日 17:56:51
	 */
	import {
		ref,
		computed,
	} from 'vue'
	import {
		HospitalActivityPackageListAction,
		HospitalCountAction,
		ComboListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	onShow(() => {
		setComboItemOpenFunc()
		getHospitalInfo()
		getUserInfo()
	})

	const user_info = ref(false)
	const getUserInfo = () => {
		uni.$lu.user((info) => {
			user_info.value = info
			if (!!user_info.value.id) {
				HospitalCount()
				if ($store.buy_info.person.length === 1) {
					search_data.value.sex = $store.buy_info.person[0].sex
				}
			} else {
				$store.buy_info = {
					hospital: 0,
					combo: 0,
					items: [],
					group: '',
					person: [],
					time: 0
				}
			}
		})
	}
	const hospital_count = ref(0)
	const HospitalCount = async () => {
		const response = await HospitalCountAction()
		$response(response, () => {
			hospital_count.value = response.data.count
		})
	}

	const hospital_info = ref(false)
	const getHospitalInfo = () => {
		uni.$lu.hospital((info) => {
			hospital_info.value = info
			HospitalActivityPackageList()
			ComboList()
			uni.setNavigationBarTitle({
				title: hospital_info.value.name
			})
		})
	}

	const changeHospitalClick = () => {
		uni.$lu.jump({
			jump_type: 2,
			jump_path: '/pages/hospital/choose_list/choose_list',
			login_type: 1
		})
	}

	const navigationHospitalClick = () => {
		uni.openLocation({
			type: 'wgs84',
			latitude: Number(hospital_info.value.latitude),
			longitude: Number(hospital_info.value.longitude),
			scale: 18,
			name: hospital_info.value.name,
			address: hospital_info.value.address
		})
	}

	const package_list = ref([{
		label: '全部',
		value: 0
	}])
	const HospitalActivityPackageList = async () => {
		const response = await HospitalActivityPackageListAction({
			hospital: hospital_info.value.id
		})
		$response(response, () => {
			package_list.value = [{
					label: '全部',
					value: 0
				},
				...response.data.list.map((item) => {
					return {
						label: item.name,
						content: JSON.parse(item.content),
						value: item.id,
					}
				})
			]
			let check = false
			for (let i in package_list.value) {
				if (package_list.value[i].value === $store.activity_package) {
					check = true
				}
			}
			if (!check) $store.activity_package = 0
			packageName()
		})
	}
	const package_name = ref('全部')
	const packageChange = (e) => {
		let index = Number(e.detail.value)
		$store.activity_package = package_list.value[index].value;
		packageName()
	}
	const packageName = () => {
		for (let i in package_list.value) {
			if (package_list.value[i].value === $store.activity_package) {
				return package_name.value = package_list.value[i].label
			}
		}
	}

	const sex_list = [{
		label: '全部',
		value: 0
	}, {
		label: '男',
		value: 1
	}, {
		label: '女',
		value: 2
	}]

	const search_data = ref({
		sex: 0,
	})
	const sexChange = (e) => {
		search_data.value.sex = Number(e.detail.value)
	}
	const max_count = ref(0)
	const combo_list = ref([])
	const ComboList = async () => {
		console.log('--------------')
		uni.showLoading()
		const response = await ComboListAction({
			hospital: hospital_info.value.id
		})
		uni.hideLoading()
		$response(response, () => {
			combo_list.value = response.data.list.map((item) => {
				if (item.count > max_count.value) max_count.value = item.count
				return item
			})
		})
	}
	const combo_show_list = computed(() => {
		let list = JSON.parse(JSON.stringify(combo_list.value))
		let l = []
		for (let i in list) {
			let push = true
			if (sex_list[search_data.value.sex].label !== '全部') {
				if (list[i].sex !== sex_list[search_data.value.sex].label && list[i].sex !== '全部') {
					push = false
				}
			}
			if ($store.activity_package !== 0) {
				for (let j in package_list.value) {
					if (package_list.value[j].value === $store.activity_package) {
						if (package_list.value[j].content.indexOf(list[i].id) === -1) {
							push = false
							continue
						}
						continue
					}
				}
			}
			if (push) l.push(list[i])
		}
		return l
	})

	const setComboItemOpenFunc = () => {
		uni.$lu.open.combo_item_open = (combo, items, time) => {
			let items_ids = !!items ? items.split(',') : [];
			time = JSON.parse(time)
			$store.buy_info.hospital = hospital_info.value.id
			$store.buy_info.combo = combo
			$store.buy_info.items = items_ids
			$store.buy_info.group = ''
			$store.buy_info.time = time
			// if ($store.buy_info.person.length === 0) {
			// 	uni.navigateTo({
			// 		url: '/pages/buy/person/person?type=info'
			// 	})
			// } else {
				uni.navigateTo({
					url: '/pages/buy/info/info'
				})
		//	}
		}
	}

	const comboClick = (id) => {
		uni.$lu.open.combo_item_open(id, '', '{"id":0,"date":null}')
	}
 
</script>
<template>
	<view>
		<view class="top_line_wrapper"></view>
		<view class="hospital_wrapper">
			<view class="hospital_logo_wrapper">
				<image mode="aspectFill" :src="$image(hospital_info.logo)"></image>
			</view>
			<view class="hospital_info_wrapper">
				<view class="hospital_info_name_wrapper">
					{{ hospital_info.name }}
				</view>
				<view class="hospital_info_address_wrapper">
					<view class="hospital_info_address_icon_wrapper">
						<image :src="$image('/storage/assets/mp/home/医院地址@2x.png')"></image>
					</view>
					<view class="hospital_info_address_text_wrapper">
						{{ hospital_info.address }}
					</view>
					<view class="hospital_info_address_distance_wrapper">
						距离 {{ hospital_info.distance }}km
					</view>
				</view>
			</view>
			<view class="hospital_button_wrapper">
				<view v-if="hospital_count > 1" class="hospital_button_box_wrapper">
					<view @click="navigationHospitalClick()" class="navigation_button_wrapper">
						<view class="navigation_button_icon_wrapper">
							<image :src="$image('/storage/assets/mp/order/导航@2x.png')"></image>
						</view>
					</view>
					<view @click="changeHospitalClick()" class="hospital_info_button_wrapper">
						<view class="hospital_info_button_icon_wrapper">
							<image :src="$image('/storage/assets/mp/home/切换医院@2x.png')"></image>
						</view>
						<view class="hospital_info_button_text_wrapper">切换医院</view>
					</view>
				</view>
				<view v-else>
					<view @click="navigationHospitalClick()" class="hospital_info_button_wrapper">
						<view class="hospital_info_button_icon2_wrapper">
							<image :src="$image('/storage/assets/mp/order/导航@2x.png')"></image>
						</view>
						<view class="hospital_info_button_text_wrapper">导航到医院</view>
					</view>
				</view>
			</view>
		</view>

		<view class="break_block_wrapper"></view>
		<view class="search_wrapper">
			<view class="search_item_wrapper">
				<picker v-if="package_list.length !== 0" @change="packageChange" :value="$store.activity_package"
					:range="package_list" range-key="label">
					<view class="search_item_picker_wrapper" :class="[
						package_name === '全部' ? '' : 'search_item_picker_active_wrapper'
					]">
						{{ package_name === '全部' ? '套餐类型' : package_name }}
						<view class="search_item_icon_wrapper">
							<image v-if="package_name !== '全部'" :src="$image('/storage/assets/mp/combo/激活向下.png')"></image>
							<image v-if="package_name === '全部'" :src="$image('/storage/assets/mp/combo/向下.png')"></image>
						</view>
					</view>
				</picker>
			</view>
			<view class="search_line_wrapper"></view>
			<view class="search_item_wrapper">
				<picker @change="sexChange" :value="search_data.sex" :range="sex_list" range-key="label">
					<view class="search_item_picker_wrapper" :class="[
						search_data.sex === 0 ? '' : 'search_item_picker_active_wrapper'
					]">
						{{ search_data.sex === 0 ? '性别' : sex_list[search_data.sex].label }}
						<view class="search_item_icon_wrapper">
							<image v-if="search_data.sex !== 0" :src="$image('/storage/assets/mp/combo/激活向下.png')"></image>
							<image v-if="search_data.sex === 0" :src="$image('/storage/assets/mp/combo/向下.png')"></image>
						</view>
					</view>
				</picker>
			</view>
		</view>
		<view class="break_block_wrapper"></view>
		<view class="order_wrapper">
			<view v-for="(i,k) in combo_show_list" :key="k" class="combo_item_wrapper">
				<view class="combo_title_wrapper">
					<view class="combo_name_wrapper">{{ i.name }}</view>
					<view class="combo_fire_wrapper">
						<image v-if="max_count === i.count" :src="$image('/storage/assets/mp/combo/热点套餐.png')"></image>
					</view>
				</view>
				<view class="combo_desc_wrapper">{{ i.desc }}</view>
				<view class="combo_tag_wrapper">
					<view class="combo_tag_sex_wrapper combo_tag_sex_all_wrapper" v-if="i.sex==='全部'">全部</view>
					<view class="combo_tag_sex_wrapper combo_tag_sex_nan_wrapper" v-if="i.sex==='男'">男士</view>
					<view class="combo_tag_sex_wrapper combo_tag_sex_nv_wrapper" v-if="i.sex==='女'">女士</view>
				</view>
				<view class="combo_count_wrapper">
					<view v-if="!!i.count">{{ i.count }}人已检</view>
				</view>
				<!-- <view v-if="Number(i.original_price) > Number(i.price)" class="combo_original_price_wrapper">
					原价：￥{{ Number(i.original_price).toFixed(2) }}</view> -->
				<view class="combo_price_wrapper">
					<view class="combo_price_icon_wrapper">￥</view>
					<view>{{ Number(i.price).toFixed(2) }}</view>
				</view>
				<view @click="comboClick(i.id)" class="combo_next_wrapper">查看详情</view>
			</view>
			<view class="bottom_wrapper">
				<view class="bottom_icon_wrapper">
					<image v-if="search_data.sex === 0" :src="$image('/storage/assets/mp/combo/加载更多.png')"></image>
				</view>
				<view class="bottom_content_wrapper">
					<view class="bottom_line_wrapper"></view>
					<view class="bottom_text_wrapper">已经到底啦!</view>
					<view class="bottom_line_wrapper"></view>
				</view>
			</view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style scoped>
	.combo_next_wrapper {
		position: absolute;
		width: 160rpx;
		height: 48rpx;
		background: #FFFFFF;
		border: 1px solid #0BBACF;
		border-radius: 24rpx;
		top: 113rpx;
		right: 12rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #0BBACF;
	}

	.combo_original_price_wrapper {
		text-decoration: line-through;
		position: absolute;
		top: 20rpx;
		right: 11rpx;
		font-size: 24rpx;
		opacity: 0.5;
	}

	.combo_price_wrapper {
		font-size: 38rpx;
		font-weight: 500;
		color: #F02E50;
		line-height: 1;
		position: absolute;
		top: 51rpx;
		right: 11rpx;
		display: flex;
		align-items: center;
	}

	.combo_price_icon_wrapper {
		font-size: 24rpx;
	}

	.combo_count_wrapper {
		font-size: 18rpx;
		font-weight: 500;
		color: #999A9A;
		line-height: 1;
		margin-top: 19rpx;
		margin-left: 11rpx;
		height: 17rpx;
	}

	.combo_tag_sex_wrapper {
		width: 50rpx;
		height: 28rpx;
		border: 1px solid;
		border-radius: 6rpx;
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		text-align: center;
	}

	.combo_tag_sex_all_wrapper {
		color: #8EC363;
		border-color: #8EC363;
	}

	.combo_tag_sex_nan_wrapper {
		color: #5FCAEA;
		border-color: #5FCAEA;
	}

	.combo_tag_sex_nv_wrapper {
		color: #EF7389;
		border-color: #EF7389;
	}

	.combo_tag_wrapper {
		margin-top: 16rpx;
		margin-left: 11rpx;
	}

	.combo_desc_wrapper {
		width: 500rpx;
		height: 22rpx;
		font-size: 23rpx;
		font-weight: 500;
		color: #999A9A;
		line-height: 22rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 15rpx;
	}

	.combo_title_wrapper {
		display: flex;
		align-items: center;
		margin-top: 19rpx;
		margin-left: 10rpx;
	}

	.combo_name_wrapper {
		max-width: 326rpx;
		font-size: 27rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.combo_fire_wrapper image {
		width: 20rpx;
		height: 24rpx;
		display: block;
	}

	.combo_fire_wrapper {
		width: 20rpx;
		height: 24rpx;
		margin-left: 15rpx;
	}

	.bottom_wrapper {
		margin-top: 100rpx;
	}

	.combo_item_wrapper {
		width: 690rpx;
		background: linear-gradient(0deg, rgba(235, 250, 251, 0.6), rgba(249, 254, 254, 0.6));
		border: 2px solid;
		border-image: linear-gradient(0deg, #FFFFFF, #EBF3F4) 2 2;
		box-shadow: 0rpx 4rpx 6rpx 4rpx rgba(32, 211, 179, 0.1);
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		position: relative;
		padding-bottom: 17rpx;
	}

	.bottom_text_wrapper {
		margin: 0 20rpx;
	}

	.bottom_icon_wrapper image {
		width: 55rpx;
		height: 55rpx;
		display: block;
	}

	.bottom_icon_wrapper {
		width: 55rpx;
		height: 55rpx;
		margin: 0 auto;
	}

	.bottom_content_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999A9A;
		line-height: 1;
		margin-top: 7rpx;
	}

	.bottom_line_wrapper {
		width: 100rpx;
		height: 1rpx;
		background: #000000;
		opacity: 0.16;
	}

	.search_item_wrapper {
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search_line_wrapper {
		width: 2rpx;
		height: 36rpx;
		background: #DADADA;
	}

	.search_item_picker_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #3F3F3F;
		line-height: 1;
	}

	.search_item_picker_active_wrapper {
		color: #0BBACF;
	}

	.search_item_icon_wrapper image {
		width: 16rpx;
		height: 11rpx;
		margin-left: 17rpx;
		display: block;
	}

	.search_item_icon_wrapper {
		width: 16rpx;
		height: 11rpx;
	}

	.search_wrapper {
		width: 749rpx;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.order_wrapper {
		position: fixed;
		top: 240rpx;
		bottom: 0;
		width: 749rpx;
		background: #FFFFFF;
		padding-bottom: 100rpx;
		overflow-y: auto;
	}

	.break_block_wrapper {
		width: 749rpx;
		height: 15rpx;
	}

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

	.navigation_button_icon_wrapper image {
		width: 32rpx;
		height: 32rpx;
		display: block;
	}

	.navigation_button_icon_wrapper {
		width: 32rpx;
		height: 32rpx;
		margin: 8rpx auto;
	}

	.navigation_button_wrapper {
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(90deg, #23D3AF, #0DC5CF);
		border: 2px solid #D0EEEF;
		border-radius: 50%;
	}

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

	.hospital_info_button_icon_wrapper image {
		width: 20rpx;
		height: 18rpx;
		display: block;
	}

	.hospital_info_button_icon_wrapper {
		width: 20rpx;
		height: 18rpx;
	}

	.hospital_info_button_icon2_wrapper image {
		width: 32rpx;
		height: 32rpx;
		display: block;
	}

	.hospital_info_button_icon2_wrapper {
		width: 32rpx;
		height: 32rpx;
	}

	.hospital_info_button_wrapper {
		padding: 0 10rpx;
		height: 48rpx;
		background: linear-gradient(90deg, #23D3AF, #0DC5CF);
		border: 2px solid #D0EEEF;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		line-height: 40rpx;
		justify-content: center;
		margin-left: 10rpx;
	}

	.hospital_button_wrapper {
		position: absolute;
		top: 50%;
		right: 32rpx;
		transform: translateY(-50%);
	}

	.hospital_info_address_distance_wrapper {
		height: 24rpx;
		background: #ECECEC;
		border-radius: 3rpx;
		padding: 0 10rpx;
		line-height: 24rpx;
		font-size: 17rpx;
		font-weight: 500;
		color: #7D7D7D;
		margin-left: 13rpx;
	}

	.hospital_info_address_text_wrapper {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 11rpx;
		max-width: 180rpx;
	}

	.hospital_info_wrapper {
		margin-left: 25rpx;
		width: 540rpx;
	}

	.hospital_icon_wrapper image {
		width: 13rpx;
		height: 21rpx;
		display: block;
	}

	.hospital_icon_wrapper {
		width: 13rpx;
		height: 21rpx;
	}

	.hospital_info_address_icon_wrapper image {
		width: 20rpx;
		height: 24rpx;
		display: block;
	}

	.hospital_info_address_icon_wrapper {
		width: 20rpx;
		height: 24rpx;
	}

	.hospital_info_address_wrapper {
		font-size: 22rpx;
		font-weight: 500;
		color: #AFB0B1;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 13rpx;
	}

	.hospital_info_name_wrapper {
		font-size: 28rpx;
		font-weight: 500;
		color: #2C2C2C;
		line-height: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 310rpx;
	}

	.hospital_logo_wrapper image {
		width: 90rpx;
		height: 90rpx;
		display: block;
		border-radius: 6rpx;
	}

	.hospital_logo_wrapper {
		width: 90rpx;
		height: 90rpx;
		margin-left: 37rpx;
	}

	.hospital_wrapper {
		width: 750rpx;
		height: 125rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		position: relative;
	}
</style>