<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	import PriceRange from "@/common/PriceRange.vue";
	import Top from "../../../common/Top.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年8月7日 20:05:05
	 */
	import {
		ref,
		computed,
		nextTick
	} from "vue";
	import {
		$image,
		$api,
		$response
	} from "@/api";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
 
	
	const $store = useStore();

	const $props = defineProps({
		tabs: {
			type: String,
			default: "",
		},
		groupId: {
			type: String,
			default: "",
		},
	});

	const combo_active = ref("");
	const person_active = ref("");
	let tabs_active_id=ref(false); //激活tabsid
	let popup = ref(null);
	let popup_new = ref(null);
	let selectKey = ref(""); // 整个选择的key
	let sortIndex = ref(0); // 排序的索引
	let comboIndex = ref(null); // 套餐类型索引
	let sort_price_index=ref(null)
	let sort_salecount_index=ref(null)
	let crowdIndex = ref(null); // 适用人群索引
	let priceIndex = ref(null); // 套餐价格索引
	let projectIds = ref([]); // 项目id集合
	let screenObj = ref({}); // 筛选条件
	let combo_select = ref({}); // 套餐筛选条件
	let comboIds = ref([]); // 套餐对比列表
	let popupMultiple = ref(false); // 多选弹窗
	let multipleList = ref([]); // 多选列表
	let multipleIndex = ref(0); // 多选索引
	let itemIds = ref([]); // 项目id集合
	let itemId = ref(""); // 项目id
	let comboId = ref(""); // 套餐id
	let price_max_min=ref([]);
	let zhuangjianType=ref(19);
	let TiShiPopupRef=ref(null);//提示弹窗
	let SelectedComboInfo=ref(null);//选中的套餐信息
	
	let sex_range=ref([
				{ value: 0, text: "不限" },
		        { value: 1, text: "男" },
		        { value: 2, text: "女" },
	]);

	const selectItemClick = async (index, key) => {
		// 选择套餐条件
		let data = combo_select.value;
		if (selectKey.value == "sort_list") {
			combo_list.value.list = []
			if (sortIndex.value == index) {
				sortIndex.value = 0;
			} else {
				sortIndex.value = index;
			}
			screenObj.value.combo_sort = data[selectKey.value][index]?.id;
		} else if (selectKey.value == "sort_sale_count") {
			//清除综合排序
			sortIndex.value = 0;
			delete screenObj.value.combo_sort;
			
			sort_price_index.value = null;
			delete screenObj.value.sort_price;
			
			if (sort_salecount_index.value == index) {
				sort_salecount_index.value = null;
				delete screenObj.value.sort_sale_count;
			} else {
				sort_salecount_index.value = index;
				screenObj.value.sort_sale_count = data[selectKey.value][index]?.id;
			}
		} else if (selectKey.value == "sort_price") {
			//清除综合排序
			sortIndex.value = 0;
			delete screenObj.value.combo_sort;
			
			sort_salecount_index.value = null;
			delete screenObj.value.sort_sale_count;
			
			if (sort_price_index.value == index) {
				sort_price_index.value = null;
				delete screenObj.value.sort_price;
			} else {
				sort_price_index.value = index;
				screenObj.value.sort_price = data[selectKey.value][index]?.id;
			}
		} else {
			if (key == "combo_price") {
				if (priceIndex.value == index) {
					priceIndex.value = null;
					return;
				}
				priceIndex.value = index;
			} else {
				if (projectIds.value?.includes(index)) {
					projectIds.value.splice(projectIds.value.indexOf(index), 1);
				} else {
					projectIds.value.push(index);
				}
			}
			return;
		}
		await getComboList();
		popup.value.close();
	};
	const selectDone = async () => {
		 
		if (priceIndex.value === null) {
			delete screenObj.value.combo_price;
		} else {
			screenObj.value.combo_price =
				combo_select.value["combo_price"][priceIndex.value]?.id;
		}
		if (projectIds.value.length) {
			screenObj.value.combo_item = projectIds.value;
		} else {
			delete screenObj.value.combo_item;
		}
		await getComboList();
		popup_new.value.close();
		
		shaixuan_popup_status.value=false;
	};
 
	const remake = () => {
		// 重置筛选
		delete screenObj.value.combo_price;
		delete screenObj.value.combo_item;
		delete screenObj.value.price_range
		delete screenObj.value.combo_crowd
		delete screenObj.value.combo_type
		screenObj.value.combo_sex=$store.getUser()?.sex
	 
		price_max_min.value=[0,combo_list.value.price_max];
		priceIndex.value = null;
		projectIds.value = [];
		comboIndex.value=null
		crowdIndex.value=null
	};
	const getComboSelect = async () => {
		uni.showLoading();
		const response = await $api("GetComboSort");
		uni.hideLoading();
		$response(response, async () => {
			combo_select.value = response.data;
			// combo_select.value.sort_sale_count=[{id:1,name:"销量从低到高"},{id:2,name:"销量从高到低"}]
			combo_select.value.sort_sale_count=[{id:2,name:"销量从高到低"}]
			combo_select.value.sort_price=[{id:1,name:"价格从低到高"},{id:2,name:"价格从高到低"}]
 
			if ("sort_list" in combo_select.value) {
				selectKey.value = "sort_list";
				sortIndex.value = 0;
			}
			await getComboList();
		});
	};

	const combo_list = ref({
		list: [],
		hospital: {
			id: 1,
		},
		doctor: {
			id: 0,
		},
		info: {
			name: "",
		},
	});
   let random=ref(0);
	const combo_list_computed = computed(() => {
	   random.value=Math.random()
		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;
	});
	let combo_list_k = ref(null)
	const getComboList = async (e) => {
	 
		uni.showLoading();
		let obj = {
			doctor: $store.save.doctor,
			hospital: hospital_active.value,
			search: e?.value,
			keshi_name: keshi_name.value,
		};
		if ($store.getCheckupTypeId()) {
			let b = $store.getCheckupTypeId();
			console.log();
			if (Object.keys(b).length != 0) {
				screenObj.value.checkup_type_id = b.id;
			}
		}
		if (screenObj.value) {
			obj = Object.assign(obj, screenObj.value);
		}

		const response = await $api("ComboList", obj);
		uni.hideLoading();
		$response(response, () => {
		
			combo_list.value = response.data;
			price_max_min.value=combo_list.value.price_max_min
		});
	};

	const contrastClick = async (item) => {
		if (comboIds.value.includes(item.combo_id)) {
			comboIds.value.splice(comboIds.value.indexOf(item.combo_id), 1);
		} else {
			if (comboIds.value.length < 3) {
				comboIds.value.push(item.combo_id);
			} else {
				uni.showToast({
					title: "最多对比3个套餐",
					icon: "none",
				});
			}
		}
		$store.setComboContrast(comboIds.value);
	};

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

	const tabPatients = () => {
		uni.navigateTo({
			url: "/pages/user/choose/choose",
		});
	};
    let shaixuan_popup_status=ref(false);//筛选窗口打开状态
	let tiaojian_poput_status=ref(false);
	const open = (key) => {
		if (key) {
			// 点击三个筛选条件
			 if(tiaojian_poput_status.value===true){
				  popup.value.close();
				  tiaojian_poput_status.value=false
				 return false
			 }
			selectKey.value = key;
			
			popup_new.value.close();
			let time = setTimeout(() => {
				popup.value.open("top");
				tiaojian_poput_status.value=true
				clearTimeout(time);
			}, 400);
		} else {
			// 点击筛选
			popup.value.close();
			popup_new.value.close();
			
			if(shaixuan_popup_status.value===true){
				popup_new.value.close();
				shaixuan_popup_status.value=false;
				return false
			}
			selectKey.value = "screen";
			// combo_select.value.combo_sex=screenObj.value.combo_sex 
			let time = setTimeout(() => {
				
				popup_new.value.open("top");
				shaixuan_popup_status.value=true
				clearTimeout(time);
			}, 400);

			// if (screenObj.value.combo_price) {
			//   priceIndex.value = combo_select.value["combo_price"].findIndex(
			//     (item) => item.id == screenObj.value.combo_price
			//   );
			// } else {
			//   priceIndex.value = null;
			// }

			// if (screenObj.value.combo_item?.length) {
			//   projectIds.value = [...screenObj.value.combo_item];
			// } else {
			//   projectIds.value = [];
			// }
		}
	};



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

	 

	onShow(() => {
		$store.setDuoXuanYi({});
		itemIds.value = [];
		screenObj.value.combo_sex=$store.getUser()?.sex
		if (!!config_ref.value) {
			checkHospital();
		} 
		 
		 
		if($props.tabs==1){
			tabsClickFunc(1)
		}
	});
	let keshi_name = ref(null);
	onLoad((e) => {
		keshi_name.value = e.keshi_name
		 
	})

	const buyClick = async (item) => {
		SelectedComboInfo.value=item
		let checkup_type_id = $store.getCheckupTypeId();
		console.log("----", checkup_type_id.id);
		if (checkup_type_id.id == "" || checkup_type_id.id == undefined) {
			$store.setCheckupTypeId({
				id: item.checkup_type_id
			});
		}
		comboId.value = item.combo_id;
		if (item.duo_xuan_yi.length > 0) {
			popupMultiple.value.open("center");
			multipleIndex.value = 0;
			itemIds.value = [];
			$store.setDuoXuanYi([]);
			itemId.value = "";
			multipleList.value = item.duo_xuan_yi;
			return;
		}
		// if(item.type_id==zhuangjianType.value){
		// 	TiShiPopupRef.value.open();
		// 	return
		// }
		toDetail();
	};

	const nextItemClick = () => {
		if (!itemId.value) {
			uni.$lu.toast("请选择项目");
			return;
		}
		itemIds.value.push({
			item_id: itemId.value,
			zu_name: multipleList.value[multipleIndex.value]["0"]["zu_name"],
		});
		if (multipleIndex.value == multipleList.value.length - 1) {
			toDetail();
			return;
		}
		itemId.value = "";
		multipleIndex.value = multipleIndex.value + 1;
	};

	const toDetail = () => {
		// 跳转到套餐详情
		let query = "?comboId=" + comboId.value;
		if ($props.groupId) {
			// 团检把团检ID加上
			query += "&groupId=" + $props.groupId;
		}
		$store.setDuoXuanYi(itemIds.value);
		// 个检只要套餐ID
		// 预约 跳转到个检/团检套餐详情
		popupMultiple.value.close();
		uni.navigateTo({
			url: "/pages/main/tj/tjxq" + query,
		});
	};

	const toRouter = () => {
		if (!comboIds.value.length) {
			uni.showToast({
				title: "请先选择套餐",
				icon: "none",
			});
			return;
		}
		uni.navigateTo({
			url: "/pages/main/combo/tcdb",
		});
	};
	const ComboTypeClickFunc=(id)=>{
		if(comboIndex.value==id){
			comboIndex.value=null
			delete screenObj.value.combo_type
		}else{
			comboIndex.value=id
			screenObj.value.combo_type=comboIndex.value
		}
		
	}
	const ComboCrowdClickFunc=(id)=>{
		if(crowdIndex.value==id){
			crowdIndex.value=null
			delete screenObj.value.combo_crowd
		}else{
			crowdIndex.value=id
			screenObj.value.combo_crowd=crowdIndex.value
		}
	}
	const CheckItemClickFunc=(id)=>{
		if (projectIds.value?.includes(id)) {
			projectIds.value.splice(projectIds.value.indexOf(id), 1);
		} else {
			projectIds.value.push(id);
		}
		
	}
	const getHuaKuaiValue=(value)=>{
		screenObj.value.price_range=value 
		price_max_min.value=value
		console.log(price_max_min.value);
	}
	const combosex_change=(value)=>{
	 screenObj.value.combo_sex=value
	}
	const tabsClickFunc=(value)=>{
		 tabs_active_id.value=value
		 if(value==2){
			 uni.navigateTo({
			 	url: "/pages/main/tj/tjzx?" + "comboId="  + "&itemIds="+"&type=zx"
			 });
		 }
		 if(value==1){
			 comboIndex.value=zhuangjianType.value //设置筛选套餐类型为专家
			 screenObj.value.combo_type=comboIndex.value
		 }else{
			 comboIndex.value=''
			 delete screenObj.value.combo_type 
		 }
		  getComboList();
	}
 
</script>
<template>
	<DraggableButton />
	
	<view style="background-color: #d8eef3; padding-top: 20rpx;">
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>

		<view class="header_wrapper">
			<view @click="toRouter"
				class="center fixed pt-10rpx box-border left-40rpx bottom-5% rounded-full w-110rpx h-110rpx bg-#239EA3 flex-col">
				<uni-badge :text="comboIds.length" absolute="rightTop" size="small">
					<image src="@/static/assets/slices/duibi.png" mode="widthFix" class="w-42rpx" />
				</uni-badge>
				<text class="text-22rpx text-#fff -mt-5rpx">对比</text>
			</view>
          
		<!-- 	<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>
			<view v-if="!!combo_list.info.name" class="user_wrapper" @click="tabPatients()">
				<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>
  <Top></Top>
		<view class="bg-#d8edf2" style="margin-top: -10rpx;">
			<uni-search-bar class="search" radius="100" placeholder="请输入关键字搜索" @clear="getComboList()"
				@cancel="getComboList()" @confirm="getComboList" />
		</view>
		<view class="top_button_row">
			<view @click="tabsClickFunc(0)" :class="['top_button',{'top_button_active':tabs_active_id==false}]">选择套餐</view>
			<view @click="tabsClickFunc(1)" :class="['top_button',{'top_button_active':tabs_active_id==true}]">专家定制</view>
			<view @click="tabsClickFunc(2)" class="top_button">项目自选</view>
		</view>
		<view class="select_wrapper flex" v-if="selectKey">
			<template v-for="(value, key, index) in combo_select" :key="index">
				<view @click="open(key)" class="flex-1 center text-#2f2f2f text-26rpx line-height-[1]"
					v-if="key != 'combo_price' && key != 'combo_item' && key != 'combo_type' && key != 'combo_crowd'"  :class="{
            '!text-#239EA3': selectKey == key,
          }">
					<view v-if="key == 'sort_list'">
						{{ value[sortIndex]?.name || "综合排序" }}
					</view>
					<view v-if="key == 'sort_sale_count'">
						{{ value[sort_salecount_index]?.name || "按销量" }}
					</view>
					<view v-if="key == 'sort_price'">
						{{ value[sort_price_index]?.name || "按价格" }}
					</view>
					<view class="select_item_icon_wrapper">
						<image src="@/static/assets/xuanzegengduo@2x.png"></image>
					</view>
				</view>
			</template>
			<view @click="open()" :class="{
          '!text-#239EA3': selectKey == 'screen',
        }" class="mx-20rpx center text-#2f2f2f text-26rpx">
				<view>筛选</view>
				<view class="select_item_icon2_wrapper">
					<image v-if="screenObj.combo_price || screenObj.combo_item || screenObj.price_range || screenObj.combo_crowd || screenObj.combo_type" src="@/static/assets/shaixuan_active1@2x.png"></image>
					<image v-else src="@/static/assets/shaixuan@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="list_wrapper" ref="combo_list_k" :key="random">
			<view class="combo_wrapper" v-for="(i, k) in combo_list_computed" :key="k">
				<view style="display: flex;">
					<view class="combo_info_wrapper">
						<view class="combo_content_wrapper">
							<view style="display: flex;">
								<view class="combo_name_wrapper">{{ i.name }}
								</view>
								 
								 <uni-tooltip>
								 	<!-- 定义插槽，插槽名为 content -->
								 	<template v-slot:content>
								 		<!-- 在这里编写自定义的 HTML 或组件 -->
								 		<view class="w-50vw">
								 			<text>该套餐仅预约专家咨询，现场个性化定制套餐</text>
								 		</view>
								 	</template>
								 		
								 	<!-- 触发提示的按钮 -->
								 	<view v-if="i.type_id==zhuangjianType"   class="wenhao">?</view>
								 </uni-tooltip>
								<view v-if="i.is_hot">
									<image style="height: 32rpx;width: 24rpx;" src="@/static/assets/buy/huomiao.jpg"></image>
								</view>
							</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: '#fff',}">
									{{ 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 v-if="i.type_id!=zhuangjianType" class="combo_original_price_wrapper">¥{{ i.original_price }}</view>
								    <!-- <view v-if="i.type_id==zhuangjianType" class="combo_original_price_wrapper2">预存款</view> -->
								</view>
								<!-- <view class="combo_count_wrapper">已售{{ i.count }}</view> -->
							</view>
						</view>
					</view>
					<view class="combo_button_wrapper">
						<view v-if="i.type_id!=zhuangjianType" @click="contrastClick(i)" class="combo_pick_button_wrapper">
							{{comboIds.includes(i.combo_id) ? "已加入" : "对比"}}
						</view>
						<view class="combo_buy_button_wrapper" @click="buyClick(i)">选择</view>
					</view>
				</view>
				<view class="combo_line_wrapper"></view>
			</view>
		</view>
		<uni-popup ref="popupMultiple" class="w-full">
			<view class="rounded-10rpx px-20rpx pb-55rpx box-border bg-#fff w-95vw">
				<view class="center relative pt-40rpx pb-30rpx text-36rpx rounded-t-15rpx box-border">
					<text class="line-height-[1] text-32rpx">请选择</text>
					<uni-icons @click="popupMultiple.close()" type="closeempty" color="#A6A6A6" size="26"
						class="absolute right-40rpx"></uni-icons>
				</view>
				<view class="bg-#F8F8F8 px-20rpx box-border rounded-10rpx">
					<view v-for="(item, index) in multipleList[multipleIndex]['item_list']" :key="index"
						@click="itemId = item.item_id"
						class="px-20rpx box-border b-b-1 b-#EAEAEA b-solid bs between h-100rpx">
						<text class="text-#000000 text-30rpx">{{ item.item_name }}</text>
						<view class="center">
							<text class="text-#EC3D15 text-20rpx mt-10rpx mr-5rpx">¥</text>
							<text class="text-#EC3D15 text-32rpx mb-0">{{ item.price }}</text>
							<uni-icons class="ml-28rpx" color="#239EA3"
								:type="itemId == item.item_id ? 'checkbox-filled' : 'circle'" size="30"></uni-icons>
						</view>
					</view>
				</view>
				<view class="text-#239EA3 text-28rpx my-45rpx text-center">当前套餐包含一个可自由{{
            multipleList[multipleIndex]["item_list"].length
          }}选1的体检项目，请<br />根据您的实际情况自行选择。</view>
				<view class="w-270rpx h-80rpx bg-#239EA3 center text-#F8F8F8 text-30rpx rounded-10rpx mx-auto"
					@click="nextItemClick()">{{
            multipleIndex == multipleList.length - 1 ? "确定" : "下一项"
          }}</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" mask-background-color="transparent" :animation="false">
			<view class="pt-330rpx w-full h-100vh" @click="popup.close()">
				<view class="bg-[rgba(0,0,0,0.3)] h-100%">
					<view class="bg-#fff" :class="
              selectKey != 'sort_list'
                ? 'flex pt20rpx px10rpx pb0 box-border flex-wrap'
                : ''
            ">
						<view v-for="(val, index) in combo_select[selectKey]" :key="index"
							@click.stop="selectItemClick(index)" :class="{
                'min-w-23% mx-1% mb-20rpx': selectKey != 'sort_list',
              }">
							<uni-list-item v-if="selectKey == 'sort_list'">
								<template v-slot:body>
									<text class="text-26rpx" :class="{
                      '!text-#239EA3': sortIndex == index,
                    }">{{ val.name }}</text>
								</template>
							</uni-list-item>
							<view v-else
								class="box-border px-28rpx py-20rpx text-26rpx center line-height-[1] rounded-5rpx"
								:class="{
                  '!bg-#239EA3 !text-#fff':
                    (selectKey == 'sort_sale_count' && sort_salecount_index == index) ||
                    (selectKey == 'sort_price' && sort_price_index == index),
                  '!text-#747474 !bg-#e0e0e0':
                    (selectKey == 'sort_sale_count' && sort_salecount_index != index) ||
                    (selectKey == 'sort_price' && sort_price_index != index),
                }">{{ val.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup   ref="popup_new" mask-background-color="transparent" :animation="false" :is-mask-click="true" >
			<view class="pt-292rpx w-full h-100vh" >
				<view class="bg-[rgba(0,0,0,0.3)] h-100%">
					<view class="popup_new_main">
						<view style="">
							<view class="shaixuan_title">性别</view>
							<view style="display: flex;flex-wrap: wrap; ">
								<view  @click="combosex_change(0)" :class="['shaixuan_button',{'shaixuan_button_active': screenObj.combo_sex==0}]">
									不限
								</view>
								<view  @click="combosex_change(1)" :class="['shaixuan_button',{'shaixuan_button_active': screenObj.combo_sex==1}]">
									男
								</view>
								<view  @click="combosex_change(2)" :class="['shaixuan_button',{'shaixuan_button_active': screenObj.combo_sex==2}]">
									女
								</view>
							</view>
							  <!-- <view>
							     <uni-data-select
							       v-model="screenObj.combo_sex"
							       :localdata="sex_range"
							       @change="combosex_change"
							     ></uni-data-select>
							   </view> -->
						</view>
						<view class="shaixuan_title">套餐类型</view>
						<view style="display: flex;flex-wrap: wrap; ">
							<view v-for="(item,index) in combo_select.combo_type" @click="ComboTypeClickFunc(item.id)" :class="['shaixuan_button',{'shaixuan_button_active': comboIndex==item.id}]">
								{{item.name}}
							</view>
						</view>

						<view class="shaixuan_title">价格区间</view>
						<PriceRange @huakuaiValue="getHuaKuaiValue"   :step="combo_list.step" :rangDate="price_max_min" :rangMax="Number(combo_list.price_max)" :dataInfo="combo_list.price_range"></PriceRange>
						<view style="margin-top: -70rpx;">
							<view class="shaixuan_title">适用人群</view>
							<view style="display: flex;flex-wrap: wrap; ">
								<view v-for="(item,index) in combo_select.combo_crowd" @click="ComboCrowdClickFunc(item.id)" :class="['shaixuan_button',{'shaixuan_button_active': crowdIndex==item.id}]">
									{{item.name}}
								</view>
							</view>
						</view>
						<view >
							<view class="shaixuan_title">体检项目</view>
							<view style="display: flex;flex-wrap: wrap; ">
								<view v-for="(item,index) in combo_select.combo_item"  @click="CheckItemClickFunc(item.id)"  :class="['shaixuan_button',{'shaixuan_button_active': projectIds.includes(item.id)}]">
									{{item.name}}
								</view>
							</view>
						</view>
						<view class="around" style="margin-top: 40rpx;">
							<view class="w-40% text-26rpx h-60rpx center rounded-full bg-#239EA3 text-#fff"
								@click="remake()">重置</view>
							<view class="w-40% text-26rpx h-60rpx center rounded-full bg-#239EA3 text-#fff"
								@click="selectDone()">确定</view>
						</view>
					</view>
					<view style=";height: 100%;" @click="popup_new.close()"></view>
				</view>
				
			</view>
		</uni-popup>
		<uni-popup ref="TiShiPopupRef" style="z-index: 999;">
			<view class="tishi_main">
				<view class="tishi_title">套餐须知</view>
				<view class="tishi_title2">专家定制套餐</view>
				<view class="tishi_content">此套餐收费{{SelectedComboInfo.price}}元为预存款，可根据现场定制套餐后实际价格多退少补。</view>
				<view class="tishi_button" @click="toDetail()">我已知晓</view>
			</view>
		</uni-popup>
	</view>
</template>
<style scoped>
	.tishi_main{
		background-color: #fff;
		padding: 40rpx 50rpx;
		width:600rpx;
		border-radius: 40rpx;
	}
	.tishi_button{
		width: 365rpx;
		background-color: #009da5;
		color:#fff;
		text-align: center;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 40rpx;
		margin: 40rpx auto 10rpx auto;
	}
	.tishi_title{
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		color:#2b2827;
	}
	.tishi_title2{
		font-size: 28rpx;
		margin-top: 30rpx;
		font-weight: 600;
		color:#3a3635;
		border-left: 3px solid #009da5;
		padding-left: 5rpx;
	}
	.tishi_content{
		font-size: 28rpx;
		margin-top: 30rpx;
		color:#474241;
	}
	.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_wrapper {
		margin: 20rpx;
	}

	.list_wrapper {
		padding-top: 30rpx;
		height: calc(100vh - 100rpx - 10rpx - 70rpx - 80rpx - 30rpx - 190rpx);
		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;
		background-color: #fff;
	}

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

	.combo_line_wrapper {
		width: 710rpx;
		height: 1rpx;
		background: #e1ecee;
		margin: 26rpx 0rpx 0rpx 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;
	}

	.combo_button_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;

	}

	.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_original_price_wrapper2 {
		font-weight: 500;
		font-size: 18rpx;
		color: #8b8b8b;
		line-height: 1;
		margin-left: 10rpx;
	}

	.combo_true_price_wrapper {
		font-weight:600;
		font-size: 18rpx;
		color: #E95513;
		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: 196rpx; */
		width: calc(750rpx - 80rpx);
		margin: 0 auto;
		background-color: #fff;
		padding: 0rpx 40rpx 30rpx 40rpx;
	}

	.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: 10rpx 8rpx 10rpx 0rpx;
		border: 2rpx solid #009da5;
	}

	.combo_name_wrapper {
		font-weight: 900;
		font-size: 32rpx;
		color: #3E3A39;
		line-height: 32rpx;
		 
	}

	.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: #eef7f7;
		box-shadow: 0rpx -1rpx 1rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		position: relative;
		z-index: 998;
	}

	.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: #239ea3;
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		padding-left: 24rpx;
	}

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

	.user_name_wrapper {
		font-weight: 400;
		font-size: 26rpx;
		color: #fff;
		line-height: 1;
	}

	.user_wrapper {
		height: 60rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		margin-right: 20rpx;
		background: #009ea7;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header_wrapper {
		 
	}

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

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

	.popup_new_main {
		background-color: #fff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		padding: 40rpx 20rpx 20rpx 20rpx;
		max-height: calc(100vh - 500rpx);
		overflow-y: auto;
	}

	.top_button_row {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.top_button {
		color: #666;
		background-color: #fff;
		padding: 6rpx 40rpx;
		border-radius: 15rpx;
		margin-top: -6rpx;
		margin-bottom: 8rpx;
		font-size: 28rpx;
		width: 140rpx;
		text-align: center;
	}

	.top_button_active {
		background-color: #009ea7;
		color: #fff;
	}

	.search {}

	.shaixuan_title {
		font-size: 26rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.shaixuan_button {
		font-size: 24rpx;
		padding-left: 10rpx;
		background-color: #ccc;
		margin: 10rpx;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		background-color: #f3f3f3;
		color: #1e1a19;
	}
	.shaixuan_button_active{
		background-color: #009da5;
		color: #fff;
	}
	.wenhao{
		height: 26rpx;
		width: 26rpx;
		background-color: #009FA8;
		line-height: 26rpx;
		border-radius: 26rpx;
		color: #fff;
		text-align: center;
		font-size: 20rpx;
		margin-left: 10rpx;margin-top: 4rpx;
	}
	
</style>