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

	const combo_active = ref('')
	const person_active = ref('')
	const selectItemClick = (type, value) => {
		select_active.value[type] = value
	}
	const selectDone = () => {
		combo_active.value = select_active.value.combo
		person_active.value = select_active.value.person
		select_drawer_ref.value.close()
	}
	const clearSelectClick = () => {
		combo_active.value = ''
		person_active.value = ''
	}
	const combo_select = ref({
		combo: [],
		person: [],
	})
	const comboActiveName = () => {
		for (let i in combo_select.value.combo) {
			if (combo_select.value.combo[i].value === combo_active.value) {
				return combo_select.value.combo[i].label
			}
		}
		return '套餐类型'
	}
	const personActiveName = () => {
		for (let i in combo_select.value.person) {
			if (combo_select.value.person[i].value === person_active.value) {
				return combo_select.value.person[i].label
			}
		}
		return '适用人群'
	}

	const getComboSelect = async () => {
		uni.showLoading()
		const response = await $api('ComboSelect')
		uni.hideLoading()
		$response(response, () => {
			combo_select.value = response.data
			getComboList()
		})
	}

	const combo_list = ref({
		list: [],
		hospital: {
			id: 0
		},
		doctor: {
			id: 0
		},
		info: {
			name: ''
		},
	})
	const combo_list_computed = computed(() => {
		let list = []
		for (let i in combo_list.value.list) {
			let push = false
			if (!combo_active.value) {
				push = true
			} else {
				if (combo_list.value.list[i].combo_type === combo_active.value) {
					push = true
				}
			}
			if (!!push) {
				if (!person_active.value) {
					push = true
				} else {
					if (combo_list.value.list[i].person_type === person_active.value) {
						push = true
					} else {
						push = false
					}
				}
			}
			if (!!push) {
				list.push(combo_list.value.list[i])
			}
		}
		return list
	})
	const getComboList = async () => {
		uni.showLoading()
		const response = await $api('ComboList', {
			doctor: $store.save.doctor,
			hospital: hospital_active.value,
		})
		uni.hideLoading()
		$response(response, () => {
			combo_list.value = response.data
		})
	}

	const hospital_active = ref(0)
	const checkHospital = () => {
		let hospital_id = $store.save.hospital
		if (!hospital_id) {
			hospital_id = $store.config.hospital[0].id
		}
		hospital_active.value = hospital_id
		$store.saveInfo({
			hospital: hospital_id
		})
		getComboSelect()
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			checkHospital()
		}
	}

	const select_drawer_ref = ref(null)
	const selectDrawerRef = (e) => {
		select_drawer_ref.value = e
	}
	const select_active = ref({
		combo: '',
		person: '',
	})
	const selectShow = () => {
		select_active.value = {
			combo: combo_active.value,
			person: person_active.value,
		}
		select_drawer_ref.value.open()
	}

	onShow(() => {
		if (!!config_ref.value) {
			checkHospital()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>

		<view class="header_wrapper">
			<view v-if="!!combo_list.hospital.id" class="hospital_wrapper">
				<view class="hospital_icon_wrapper">
					<image src="@/static/assets/dingwei@2x.png"></image>
				</view>
				<view class="hospital_name_wrapper">{{ combo_list.hospital.name }}</view>
				<view class="hospital_select_wrapper">
					<image src="@/static/assets/gengduo@2x.png"></image>
				</view>
			</view>
			<view v-if="!!combo_list.info.name" class="user_wrapper">
				<view class="user_title_wrapper">就诊人：</view>
				<view class="user_name_wrapper">{{ combo_list.info.name }}</view>
				<view v-if="combo_list.info.count > 1" class="user_choose_wrapper">
					<image src="@/static/assets/qiehuan@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="doctor_wrapper">
			<view class="doctor_tip_wrapper">
				<text v-if="!!combo_list.doctor.id">已根据指定医生：</text>
				<text v-else>可选择指定医生：</text>
			</view>
			<view class="doctor_name_wrapper">
				{{ !!combo_list.doctor.id ? combo_list.doctor.name : '前往选择' }}
			</view>
			<view class="doctor_tip_wrapper">（自动筛选匹配套餐）</view>
		</view>
		<view class="select_wrapper">
			<view @click="clearSelectClick()" class="select_item_wrapper" :class="[
				(!combo_active && !person_active) ? 'active' : ''
			]">
				<view class="select_item_name_wrapper">综合排序</view>
				<view class="select_item_icon_wrapper">
					<image src="@/static/assets/xuanzegengduo@2x.png"></image>
				</view>
				<view class="select_item_line_wrapper"></view>
			</view>
			<view @click="selectShow()" class="select_item_wrapper" :class="[
				!!combo_active ? 'active' : ''
			]">
				<view class="select_item_name_wrapper">{{ !!combo_active ? comboActiveName() : '套餐类型' }}</view>
				<view class="select_item_icon_wrapper">
					<image src="@/static/assets/xuanzegengduo@2x.png"></image>
				</view>
				<view class="select_item_line_wrapper"></view>
			</view>
			<view @click="selectShow()" class="select_item_wrapper" :class="[
				!!person_active ? 'active' : ''
			]">
				<view class="select_item_name_wrapper">{{ !!person_active ? personActiveName() : '适用人群' }}</view>
				<view class="select_item_icon_wrapper">
					<image src="@/static/assets/xuanzegengduo@2x.png"></image>
				</view>
				<view class="select_item_line_wrapper"></view>
			</view>
			<view @click="selectShow()" class="select_item_wrapper">
				<view class="select_item_name_wrapper">筛选</view>
				<view class="select_item_icon2_wrapper">
					<image src="@/static/assets/shaixuan@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="list_wrapper">
			<view class="combo_wrapper" v-for="(i,k) in combo_list_computed" :key="k">
				<view class="combo_info_wrapper">
					<view class="combo_cover_wrapper">
						<image :src="$image(i.cover)"></image>
					</view>
					<view class="combo_content_wrapper">
						<view class="combo_name_wrapper">{{ i.name }}</view>
						<view class="combo_tags_wrapper">
							<view class="combo_tag_wrapper" v-for="(ii,kk) in i.tag" :key="kk" :style="{
								color:ii.text_color,
								background:ii.color,
							}">
								{{ ii.text }}
							</view>
						</view>
						<view class="combo_desc_wrapper">
							{{ i.tags2.join(" | ") }}
						</view>
						<view class="combo_price_wrapper">
							<view class="combo_price_box_wrapper">
								<view class="combo_true_price_wrapper">
									<text class="combo_true_price_icon_wrapper">¥</text>
									<text class="combo_true_price_number_wrapper">{{ i.price }}</text>
								</view>
								<view class="combo_original_price_wrapper">¥{{ i.original_price }}</view>
							</view>
							<view class="combo_count_wrapper">已售{{ i.count }}</view>
						</view>
					</view>
				</view>
				<view class="combo_button_wrapper">
					<view class="combo_pick_button_wrapper">对比</view>
					<view class="combo_buy_button_wrapper">预约</view>
				</view>
				<view class="combo_line_wrapper"></view>
			</view>
		</view>

		<uni-drawer :ref="selectDrawerRef" mode="right" :mask-click="false">
			<view>
				<scroll-view scroll-y="true">
					<view>
						<view class="select_group_wrapper">
							<view class="select_group_title_wrapper">套餐类型</view>
							<view class="select_group_line_wrapper">
								<view @click="selectItemClick('combo','')" class="select_group_item_wrapper" :class="[
									select_active.combo === '' ? 'active' : ''
								]">
									全部
								</view>
								<view @click="selectItemClick('combo',i.value)" class="select_group_item_wrapper"
									v-for="(i,k) in combo_select.combo" :key="k" :class="[
									select_active.combo === i.value ? 'active' : ''
								]">
									{{ i.label }}
								</view>
							</view>
						</view>
						<view class="select_group_wrapper">
							<view class="select_group_title_wrapper">适用人群</view>
							<view class="select_group_line_wrapper">
								<view @click="selectItemClick('person','')" class="select_group_item_wrapper" :class="[
									select_active.person === '' ? 'active' : ''
								]">
									全部
								</view>
								<view @click="selectItemClick('person',i.value)" class="select_group_item_wrapper"
									v-for="(i,k) in combo_select.person" :key="k" :class="[
									select_active.person === i.value ? 'active' : ''
								]">
									{{ i.label }}
								</view>
							</view>
						</view>
						<view class="select_done_wrapper" @click="selectDone()">确定</view>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
	</view>
</template>
<style scoped>
	.select_done_wrapper {
		color: #ffffff;
		background: #239EA3;
		width: calc(100% - 60rpx);
		margin: 50rpx auto 0;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 6rpx;
	}

	.select_group_item_wrapper {
		padding: 10rpx 20rpx;
		border: 1rpx solid #239EA3;
		font-size: 22rpx;
		margin: 20rpx 20rpx 0 0;
		border-radius: 6rpx;
		color: #239EA3;
	}

	.select_group_item_wrapper.active {
		color: #ffffff;
		background: #239EA3;
	}

	.select_group_line_wrapper {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.select_group_title_wrapper {
		font-size: 30rpx;
		font-weight: bold;
	}

	.select_group_wrapper {
		margin: 20rpx;
	}

	.list_wrapper {
		padding-top: 30rpx;
		height: calc(100vh - 100rpx - 10rpx - 70rpx - 80rpx - 30rpx - 30rpx);
		width: 750rpx;
		overflow-y: auto;
		padding-bottom: 30rpx;
		margin: 0 auto;
		overflow-x: hidden;
		-ms-overflow-style: none;
		scrollbar-width: none;
		overflow: -moz-scrollbars-none;
		overflow-y: scroll;
	}

	.list_wrapper::-webkit-scrollbar {
		display: none;
	}

	.combo_line_wrapper {
		width: 710rpx;
		height: 1rpx;
		background: #E1ECEE;
		margin: 15rpx auto 0;
	}

	.combo_pick_button_wrapper {
		width: 160rpx;
		height: 60rpx;
		background: #E1ECEE;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #239EA3;
		text-align: center;
		line-height: 60rpx;
	}

	.combo_buy_button_wrapper {
		width: 160rpx;
		height: 60rpx;
		background: #239EA3;
		border-radius: 30rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		line-height: 60rpx;
		margin-left: 32rpx;
		margin-right: 20rpx;
	}

	.combo_button_wrapper {
		display: flex;
		align-items: center;
		justify-content: end;
		margin-top: 27rpx;
	}

	.combo_count_wrapper {
		font-weight: 500;
		font-size: 18rpx;
		color: #8B8B8B;
		line-height: 1;
	}

	.combo_original_price_wrapper {
		font-weight: 500;
		font-size: 18rpx;
		color: #8B8B8B;
		line-height: 1;
		text-decoration-line: line-through;
		margin-left: 10rpx;
	}

	.combo_true_price_wrapper {
		font-weight: 500;
		font-size: 18rpx;
		color: #EC3D15;
		line-height: 1;
	}

	.combo_true_price_number_wrapper {
		font-size: 38rpx;
	}

	.combo_price_wrapper {
		display: flex;
		align-items: end;
		justify-content: space-between;
		margin-top: 21rpx;
	}

	.combo_price_box_wrapper {
		display: flex;
		align-items: end;
	}

	.combo_wrapper {
		height: 307rpx;
		width: 750rpx;
		margin: 0 auto;
	}

	.combo_tags_wrapper {
		display: flex;
		align-items: center;
		margin-top: 13rpx;
	}

	.combo_desc_wrapper {
		font-weight: 500;
		font-size: 20rpx;
		color: #8B8B8B;
		line-height: 1;
		margin-top: 18rpx;
	}

	.combo_tag_wrapper {
		padding-left: 13rpx;
		padding-right: 13rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 5rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #47ABD8;
		margin-right: 8rpx;
	}

	.combo_name_wrapper {
		font-weight: 400;
		font-size: 32rpx;
		color: #0E0E0E;
		line-height: 1;
	}

	.combo_content_wrapper {
		margin-left: 30rpx;
		width: calc(750rpx - 190rpx - 30rpx - 20rpx - 55rpx);
	}

	.combo_info_wrapper {
		display: flex;
		align-items: center;
		width: 750rpx;
		margin: 0 auto;
	}

	.combo_cover_wrapper {
		width: 190rpx;
		height: 190rpx;
		margin-left: 20rpx;
	}

	.combo_cover_wrapper image {
		width: 190rpx;
		height: 190rpx;
		display: block;
		object-fit: contain;
	}

	.select_item_line_wrapper {
		position: absolute;
		width: 95rpx;
		height: 10rpx;
		background: linear-gradient(to bottom, #ffffff00, #1B9A9F);
		border-radius: 5rpx;
		bottom: 0;
		left: 50%;
		transform: translateX(calc(-50% - 8px));
		opacity: 0;
	}

	.select_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 80rpx;
		background: #F1F7F7;
		box-shadow: 0rpx -1rpx 1rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 0 auto;
	}

	.select_item_icon_wrapper {
		width: 18rpx;
		height: 9rpx;
		margin-left: 9rpx;
		filter: grayscale(100%);
	}

	.select_item_icon_wrapper image {
		width: 18rpx;
		height: 9rpx;
		display: block;
		object-fit: contain;
	}

	.select_item_icon2_wrapper {
		width: 26rpx;
		height: 23rpx;
		margin-left: 7rpx;
	}

	.select_item_icon2_wrapper image {
		width: 26rpx;
		height: 23rpx;
		display: block;
		object-fit: contain;
	}

	.select_item_name_wrapper {
		font-weight: 400;
		font-size: 26rpx;
		color: #2F2F2F;
		line-height: 1;
	}

	.select_item_wrapper {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 80rpx;
	}

	.select_item_wrapper.active .select_item_name_wrapper {
		color: #239EA3;
		font-weight: bold;
	}

	.select_item_wrapper.active .select_item_icon_wrapper {
		filter: grayscale(0%);
	}

	.select_item_wrapper.active .select_item_line_wrapper {
		opacity: 1;
	}

	.doctor_name_wrapper {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 1;
		color: #FFFFFF;
		border-bottom: 1rpx solid #FFFFFF;
	}

	.doctor_tip_wrapper {
		font-weight: 400;
		font-size: 22rpx;
		line-height: 1;
		color: #FFFFFF;
	}

	.doctor_wrapper {
		display: flex;
		align-items: center;
		width: 710rpx;
		height: 70rpx;
		background: #28B7C1;
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		padding-left: 24rpx;
		margin: 10rpx auto 0;
	}

	.user_choose_wrapper {
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
	}

	.user_choose_wrapper image {
		width: 50rpx;
		height: 50rpx;
		display: block;
		object-fit: contain;
	}

	.user_title_wrapper {
		font-weight: 400;
		font-size: 28rpx;
		color: #239EA3;
		line-height: 1;
	}

	.user_name_wrapper {
		font-weight: 400;
		font-size: 28rpx;
		color: #0d0d0d;
		line-height: 1;
	}

	.user_wrapper {
		height: 80rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		background: #FFFFFF;
		border-radius: 40rpx 0 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 100rpx;
		background: #D8EDF2;
		margin: 0 auto;
	}

	.hospital_wrapper {
		display: flex;
		align-items: center;
		width: 50%;
	}

	.hospital_icon_wrapper {
		width: 48rpx;
		height: 48rpx;
		margin-left: 20rpx;
	}

	.hospital_icon_wrapper image {
		width: 48rpx;
		height: 48rpx;
		display: block;
		object-fit: contain;
	}

	.hospital_name_wrapper {
		font-weight: 400;
		font-size: 28rpx;
		color: #484747;
		margin-left: 9rpx;
		line-height: 1;
	}

	.hospital_select_wrapper {
		width: 24rpx;
		height: 14rpx;
		margin-left: 19rpx;
	}

	.hospital_select_wrapper image {
		width: 24rpx;
		height: 14rpx;
		display: block;
		object-fit: contain;
	}
</style>