<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from "vue";
	import {
		$api,
		$response,
		$image
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
	const $store = useStore();

	// groupId

	let comboInfo = ref({}); // 套餐详情
	let selectIds = ref([]); // 选中自选ID
	let wj = ref(""); //
	let itemsInfo = ref({}); // 自选项目详情
	let comboId = ref(""); // 套餐id
	let personId = ref(""); // 患者id
	let groupId = ref(""); // 团检id
	let tabIndex = ref(-1); // 标签索引
	let total_original_price=ref(0);
	let totalPrice = ref(0); // 总折扣价格
	let groupInfo = ref({}); // 团检信息
	let status = ref(0); // 1个检套餐 2个检自选 3团检套餐 4团检自选
	let buyText = ref("立即购买"); // 购买按钮文字
	let notice = ref({}); // 体检须知
	let losePrice = ref(0); // 剩余金额
	let popupTip = ref(null); // 剩余额度提示弹窗
	let contentInfo=ref([])//详情信息
	let active_keshi=ref([]);
	let popupXuZhi=ref(null);

	const GetReadmeDetails = async () => {
		const response = await $api("GetReadme");
		$response(response, () => {
			notice.value = response.data || false;
			if (tabIndex.value == 0) {
				let num = 5;
				buyText.value = "0" + num;
				tabIndex.value = 1;
				let timer = setInterval(() => {
					num--;
					buyText.value = "0" + num;
					if (num == 0) {
						buyText.value = "立即购买";
						clearInterval(timer);
					}
				}, 1000);
				return;
			}
			uni.hideLoading();
		});
	};

	const $props = defineProps({
		comboId: {
			type: String,
			default: "",
		},
		personId: {
			type: String,
			default: "",
		},
		groupId: {
			type: String,
			default: "",
		},
		itemIds: {
			type: String,
			default: "",
		},
		wj: {
			type: String,
			default: "",
		},
	});
    const opendDetail=(index)=>{
		if(active_keshi.value.indexOf(index)!== -1){
			active_keshi.value.splice(active_keshi.value.indexOf(index), 1);
		}else{
			active_keshi.value.push(index)
		}
	}
	const mountedAction = async () => {
		selectIds.value = $props.itemIds ? $props.itemIds.split(",") : [];
		wj.value = $props.wj || "";
		comboId.value = $props.comboId || "";
		personId.value = $store.getUser().person_id || "";
		groupId.value = $props.groupId || "";
		// 团检空项目 - 套餐列表 - 套餐详情 - 自选 - 弹剩余额度提醒 - 团检详情
		//   ｜
		//   自选   - 弹推荐套餐/剩余额度提醒 - 团检详情

		// 团检有项目 - 团检详情 - 自选 - 团检详情

		// comboId && person_id
		// 个检 - 套餐列表 - 套餐详情 - 自选 - 个检详情
		//  ｜
		// 自选 - 弹推荐套餐 - 个检详情

		if (groupId.value) {
			if (comboId.value) {
				// 团检套餐
				status.value = 3;
			} else {
				// 团检自选
				status.value = 4;
			}
		} else {
			if (comboId.value) {
				// 个检套餐
				status.value = 1;
			} else {
				// 个检自选
				status.value = 2;
			}
		}
		console.log(status.value, "1个检套餐 2个检自选 3团检套餐 4团检自选");
		uni.showLoading({
			title: "加载中",
		});
		getBuyInfo(); // 获取购买信息
	};

	const buy = async (step=0) => {
		
		if (step == 1) {
			if (losePrice.value > 0 && groupId.value.length>0) {
			  popupTip.value.open("center"); // 弹剩余额度提醒
			  return;
			}
			await GetReadmeDetails();
			popupXuZhi.value.open();
		}
		if (step == 2) {
			$store.setBuyInfo({
				combo_id: comboId.value,
				person_id: personId.value,
				group_id: groupId.value,
				item_ids: selectIds.value,
				hospital: $store.save_info.hospital,
				duo_xuan_yi: $store.getDuoXuanYi(),
				wj: wj.value,
			});
			if (!!$store.yytjInfo.doctor_name) {
				$store.setYytjInfo({
					doctor_name: $store.yytjInfo.doctor_name,
					doctor_date: $store.yytjInfo.doctor_date,
					doctor_id:$store.yytjInfo.doctor_id
				});
			} else {
				$store.setYytjInfo({});
			}
			uni.setStorageSync("yytjInfoS", {});
			uni.navigateTo({
				url: "/pages/main/tjyy/tjyy",
			});
		}
	};

	const getBuyInfo = async () => {
		// 获取购买信息
		let obj = {
			item_ids: selectIds.value,
			combo_id: comboId.value,
			hospital: $store.save_info.hospital,
			person_id: personId.value,
			group_id: groupId.value,
			duo_xuan_yi: $store.getDuoXuanYi(),
			wj: wj.value,
		};
		const response = await $api("BuyInfo", obj);
		$response(response, () => {
			uni.hideLoading();
			if (groupId.value && response.data.group_info.length) {
				// 团检
				groupInfo.value = response.data.group_info[0];
				if (response.data.group_info[0].items?.length) {
					status.value = 3;
				}
				if(groupInfo.value.items?.length){
					contentInfo.value.push(groupInfo.value.items) 
					groupInfo.value.itemscount=0;
					let itemscount=0
					groupInfo.value.items.forEach((v,i)=>{
						if(v.keshi_name!="材料费")
						itemscount=itemscount+v.children.length
					})
					groupInfo.value.itemscount=itemscount
				}
			}
			losePrice.value = response.data.lose_price;
			comboInfo.value = response.data.combo_info;
			if(comboInfo.value.items?.length){
				contentInfo.value.push(comboInfo.value.items)
			}
			itemsInfo.value = response.data.items_info;
			if(itemsInfo.value.items?.length){
				contentInfo.value.push(itemsInfo.value.items)
				itemsInfo.value.itemscount=0;
				let itemscount=0
				itemsInfo.value.items.forEach((v,i)=>{
					if(v.keshi_name!="材料费")
					itemscount=itemscount+v.children.length
				})
				itemsInfo.value.itemscount=itemscount
			}
			totalPrice.value = response.data.true_price;
			total_original_price.value=response.data.original_price
			tabIndex.value = 0;
			contentInfo.value=contentInfo.value.flat()
			 
		});
	};

	const addCombo = () => {
		// 增加项目
		let itemIds = $props.itemIds ? $props.itemIds : "";
		let query = "?comboId=" + comboId.value + "&itemIds=" + itemIds;
		if (groupId.value) {
			query += "&groupId=" + groupId.value;
		}
		if($props.wj){
			query +="&wj="+$props.wj
		}
		uni.navigateTo({
			url: "/pages/main/tj/tjzx?" + query,
		});
	};

	const config_ref = ref(null);
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			mountedAction();
		}
	};
    const toreadme=()=>{
		GetReadmeDetails();
		 popupTip.value.close()
	}
	onShow(() => {
		if (!!config_ref.value) {
			mountedAction();
		}
	});
</script>
<template>
	<uni-popup ref="popupTip">
	  <view
	    class="mb-70rpx bg-#fff text-center box-border pt-80rpx pb-50rpx px-65rpx w-90vw rounded-15rpx"
	  >
	    <view
	      class="w-full text-center text-##090909 text-26rpx line-height-[50rpx]"
	      >您还剩余
	      {{ losePrice }}
	      元体检额度尚未使用，确认提交后剩余体检额度将无法使用!</view
	    >
	    <view class="mt-50rpx between">
	      <button
	        type="primary"
	        @click="toreadme()"
	        class="w-196rpx h-68rpx center text-#fff text-24rpx !bg-#239EA3 rounded-8rpx"
	      >
	        我想好了
	      </button>
	      <button
	        @click="popupTip.close()"
	        class="w-196rpx h-68rpx center text-#239EA3 text-24rpx !bg-#D9F3F2 rounded-8rpx"
	      >
	        我再想想
	      </button>
	    </view>
	  </view>
	</uni-popup>
	<DraggableButton />
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
	</view>
    <view class="  " v-if="[1,2].indexOf(status) !== -1">
    	<!-- 1个检套餐 显示套餐信息 -->
    	 <view  class="combo_name_row" >
    	 	<text  v-if="status==2"> 项目自选 </text>
    		<text  v-if="status==1">{{ comboInfo.combo_name }}</text> 
    	 </view>
    </view>
	<view class="px-30rpx box-border comboInfo">
		<view v-if="status != 1 && status!=2" class="pt-35rpx rounded-15rpx px-10rpx bg-#fff pb-30rpx box-border b-0 b-t-1 b-solid b-#E1ECEE">
			
			<view  class="px-15rpx pt-10rpx">
				<!-- 2个检自选 和 3团检套餐 4团检自选 都要显示头像和名字 -->
				<view class="flex items-center">
					<image src="@/static/assets/userm.png" class="w-70rpx h-70rpx mr-35rpx" />
					<view class="flex items-center grow">
						<text class="text-#707070 text-24rpx">您好，</text>
						<text class="text-#0E0E0E text-32rpx">{{
              groupId ? groupInfo.name : $store.getUser().name
            }}</text>
					</view>
				</view>
				<view v-if="status != 2" class="text-24rpx mt-40rpx">
					<!-- 3团检套餐 4团检自选 都要显示单位部门等信息 -->
					<view class="pb-30rpx">
						<text class="text-#8B8B8B">单位名称：</text>
						<text>{{ groupInfo.group_name }}</text>
					</view>
					<view class="pb-30rpx">
						<text class="text-#8B8B8B">部门名称：</text>
						<text>{{ groupInfo.bumen_name }}</text>
					</view>
					<view class="pb-30rpx" v-if="groupInfo.combo_name || comboInfo?.combo_name">
						<text class="text-#8B8B8B">套餐名称：</text>
						<text>{{ groupInfo.combo_name || comboInfo?.combo_name }}</text>
					</view>
					<view>
						<text class="text-#8B8B8B">体检额度：</text>
						<text>{{ groupInfo.tongshou_xiane }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pb-150rpx">
			<view class="flex items-center justify-around px-30rpx pl-150rpx pt-30rpx">
				<view>
					<text class="text-30rpx text-#2E2E2E">套餐项目</text>
					<span v-if="status==1 && JSON.stringify(comboInfo) !== '{}'" class="combo_tag_wrapper" >{{ comboInfo?.tags[0]?.text }}</span> 
					<span v-if="status==2"  class="combo_tag_wrapper">{{ itemsInfo?.itemscount }}</span> 
				</view>
				
			</view>
			<view  class="mt--10rpx bg-#fff py-40rpx px-14rpx box-border flex-col flex">
				<!-- 套餐内容 -->
				<view v-if="contentInfo.length>0" class="mb-20rpx">
					<!-- 套餐项目 -->
					 
					<view class="flex h-58rpx bg-#239ea3 mb-26rpx text-#fff text-26rpx rounded-10rpx">
						<view class="min-w-220rpx max-w-220rpx keshi_name_k">体检流程</view>
						<view class="grow center">检查项目</view>
					</view>
					<view v-for="(val, index) in contentInfo" :key="index">
						<view v-if="val.keshi_name != '材料费'">
							<view class="flex h-58rpx bg-#E6F5F6 text-#333 text-27rpx rounded-10rpx mt-10rpx">
								<view class="min-w-250rpx max-w-250rpx keshi_name_k ">{{index+1}}.{{ val.keshi_name }}</view>
								<view class="grow center">{{ val.children.length }}个项目</view>
								<view class="grow center xiangqingbutton" @click="opendDetail(index)">查看详情<span style="font-size: 12rpx;">>></span></view>
							</view>
							<view v-if="active_keshi.indexOf(index)!== -1">
								<view class="xian mt-10rpx "></view>
								<view class="  bg-#FBFBFB text-#000 text-24rpx rounded-10rpx p-20rpx little_item_k " v-for="(v, i) in val.children"
									:key="i">
									<view style="display: flex; align-items: center;">
										<view class="break-all   box-border ">
											{{ v.name }}
										</view>
										<view class="wenhao">?</view>
									</view>
									
									<view class="grow text-20rpx text-#E95513 mt-10rpx   box-border">{{ v.desc || "-" }}</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>

 
			</view>
			<uni-popup ref="popupXuZhi">
				<view class="tishi_main">
					<!-- 体检须知 -->
					 
						<view class="text-#2E2E2E text-30rpx font-900 text-center">
							体检须知
						</view>
						<view class="text-28rpx text-#2E2E2E">
							<image class="w-5rpx h-26rpx" src="@/static/assets/slices/tjcol2x.png"></image>
							体检须知
						</view>
				
						<view class="flex flex-justify-around text-#111111 text-28rpx pt-24rpx pb-50rpx">
							<view class="flex flex-col flex-items-center">
								<image class="w-80rpx h-80rpx" src="@/static/assets/slices/xgtc.png"></image>
								选购套餐
							</view>
							<view class="pt-25rpx">
								<image class="w-30rpx h-30rpx" src="@/static/assets/slices/lt.png"></image>
							</view>
							<view class="flex flex-col flex-items-center">
								<image class="w-80rpx h-80rpx" src="@/static/assets/slices/yytj.png"></image>
								预约体检
							</view>
							<view class="pt-25rpx">
								<image class="w-30rpx h-30rpx" src="@/static/assets/slices/lt.png"></image>
							</view>
							<view class="flex flex-col flex-items-center">
								<image class="w-80rpx h-80rpx" src="@/static/assets/slices/qwty.png"></image>
								前往体检
							</view>
							<view class="pt-25rpx">
								<image class="w-30rpx h-30rpx" src="@/static/assets/slices/lt.png"></image>
							</view>
							<view class="flex flex-col flex-items-center">
								<image class="w-80rpx h-80rpx" src="@/static/assets/slices/lqbg.png"></image>
								领取报告
							</view>
						</view>
						<view class="pb-20rpx text-28rpx text-#2E2E2E">
							<image class="w-5rpx h-26rpx" src="@/static/assets/slices/tjcol2x.png"></image>
							体检注意事项
						</view>
						<view v-html="notice.content" class="text-20rpx" style="line-height: 40rpx;"></view>
					 
					<view class="tishi_button" @click="buy(2)"  >我已知晓</view>
				</view>
			</uni-popup>
			
		</view>
		<view class="fixed bottom-0 h-150rpx left-0 w-full bg-gradient-to-r from-#02b4bd to-#ABD7D7 p-30rpx box-border between">
			<view class="grow">
				<view class="flex items-end" v-if="comboId != 0"> 
					<text class="original_price_wrapper">¥ {{ total_original_price }}</text>
				</view> 
				<view class="flex items-end"> 
					<text class="text-42rpx text-#ED6907 mr-20rpx font-bold">¥{{
            totalPrice
          }}</text>
				</view>
			</view>
			<view class="flex">
				<button @click="addCombo()" class="button bgcolor_huang">
					增加项目
				</button>
				<button @click="buy(1)" class="button">
					立即支付
				</button>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.comboInfo {
		position: relative;
		z-index: 1;
		background-color: #fff;
        min-height: calc(100vh - 200rpx);
	 

		.active {
			color: #239ea3;
			font-weight: bold;
			position: relative;

			&::after {
				content: "";
				width: 26rpx;
				height: 3rpx;
				background-color: #239ea3;
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				transform: translateX(-50%);
			}
		}
	}
</style>
<style scoped>
	.combo_name_row{
		text-align: center;
		background-color: #EEF7F7;
		color: #009FA8;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.keshi_name_k{
		line-height: 58rpx;
		padding-left: 30rpx;
	}
	.xian{
		height: 6rpx;
		border-radius: 6rpx;
		background-color: #B0E0E2;
	}
	.combo_tag_wrapper {
		padding-left: 13rpx;
		padding-right: 13rpx;
		height: 28rpx;
		line-height: 28rpx;
		border-radius: 5rpx;
		font-weight: 900;
		font-size: 18rpx;
		color: #47abd8;
		margin: 10rpx 8rpx 10rpx 10rpx;
		border: 3rpx solid #009FA8;
	}
	.little_item_k{
		border-bottom: 1px solid #ccc;
	}
	.wenhao{
		height: 18rpx;
		width: 18rpx;
		background-color: #009FA8;
		line-height: 18rpx;
		border-radius: 18rpx;
		color: #fff;
		text-align: center;
		font-size: 14rpx;
		margin-left: 10rpx;
	}
	.xiangqingbutton{
		color:#009FA8;
		font-size: 17rpx;
	}
	.button {
		color: #00828e;
		background-color: #fff;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		width: 174rpx;
		border-radius: 58rpx;
		margin-right: 20rpx;
		font-size: 29rpx;
	}
	.bgcolor_huang{
		background-color: #FF6D00;
		color: #fff;
	}
	.original_price_wrapper {
		font-weight: bolder;
		font-size: 18rpx;
		color: #333;
		line-height: 1;
		text-decoration-line: line-through; 
	}
	.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: 20rpx auto 10rpx auto;
	}
</style>