<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：ckbg
	 * date：2024年9月21日
	 */
	import {
		ref
	} from "vue";
	import {
		$api,
		$response,
		$image
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";

	import {
		useStore
	} from "@/store";
	const $store = useStore();
	const mountedAction = async () => {
		uni.showLoading({
			title: "加载中",
		});
		if (tjhNum.value) {
			await getList(); //
		}
	};

	const $props = defineProps({
		tjh: {
			type: String,
			default: "",
		},
	});
	const bgjl_obj = ref(false);
	const wzbg_list = ref(null);

	let tabIndex = ref(0); // 标签索引
	let currentIndex = ref(0); // 标签索引完整报告

	const getBtn = (e) => {
		tabIndex.value = e;
		getList();
	};
	const getList = async () => {
		// 获取 结论建议
		console.log(tabIndex.value, "tabIndex");
		let obj = {
			tijian_num: tjhNum.value, //
			hospital_id: $store.save.hospital,
		};
		let url = "GetReportJieLunJianYi";
		if (tabIndex.value == 1) {
			url = "GetReportDetaiList";
		}
		const response = await $api(url, obj);
		$response(response, () => {
			console.log(response.data, "response");
			if (tabIndex.value == 1) {
				for (let key in response.data.list) {
					response.data.list[key].isopen = false;
				}
				wzbg_list.value = response.data.list;
				console.log(response.data.list);
			} else {
				bgjl_obj.value = response.data.info;
			}
			console.log(wzbg_list.value, "wzbg_list.value");

			uni.hideLoading();
		});
	};

	const isopen = ref(false); //默认展开全部检查
	const config_ref = ref(null);
	const tjhNum = ref(""); //url参数

	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			tjhNum.value = $props.tjh;
			console.log(tjhNum.value, "tjh"); //url参数
			mountedAction();
		}
	};
	const dqArr = ref([]);
	const collapseClick = async (e) => {
		let id = e; //当前id
		let itemWithId120 = null; //当前id的对象 itemWithId120['details']
		if (e) {
			for (let key in wzbg_list.value) {
				if (
					wzbg_list.value.hasOwnProperty(key) &&
					wzbg_list.value[key].id === id
				) {
					itemWithId120 = wzbg_list.value[key];
					break; // 找到后退出循环
				}
			}
			// return
			if (itemWithId120.hasOwnProperty("details")) {
				console.log(itemWithId120["details"], "itemWithId120");
				return;
			}
			uni.showLoading({
				title: "加载中",
			});
			let obj = {
				id,
			};
			const response = await $api("GetReportDetai2", obj);
			console.log(response);
			$response(response, () => {
				itemWithId120["details"] = response.data;
				console.log(itemWithId120["details"], "itemWithId120");
				// itemWithId120.isopen = itemWithId120.isopen
				//   ? !itemWithId120.isopen
				//   : true;
				itemWithId120.isopen = true;
			});
			uni.hideLoading();
		}
	};
	const getOpenClick = () => {
		isopen.value = !isopen.value;
		console.log(wzbg_list.value);

		for (let key in wzbg_list.value) {
			wzbg_list.value[key].isopen = !wzbg_list.value[key].isopen;
		}
		console.log(wzbg_list.value);
		// 将列表中 open 修改，并且请求接口
	};

	const calculatePercentage = (value, start, end, maxNum) => {
		if (value >= start && value <= end) {
			const rangeLength = end - start;
			const distanceFromStart = value - start;
			const proportion = distanceFromStart / rangeLength;
			const percentage = proportion * 50 + 25;
			return percentage.toFixed(2);
		}
		if (value < start) {
			const rangeLength = start;
			const distanceFromStart = value;
			const proportion = distanceFromStart / rangeLength;
			const percentage = proportion * 25;
			return percentage.toFixed(2);
		}
		if (value > end) {
			const rangeLength = maxNum - end;
			const distanceFromStart = value - end;
			const proportion = distanceFromStart / rangeLength;
			const percentage = proportion * 25 + 75;
			return percentage.toFixed(2);
		}
	};

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction();
		}
	});
</script>
<template>
	<DraggableButton />
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="box-border ma pt-20rpx pb-20rpx pl-10rpx pr-10rpx">
			<view class="mb-20rpx flex rounded-8rpx w-428rpx h-66rpx ma b-0 b-1 b-solid b-#239EA3">
				<view @click="getBtn(0)" :class="tabIndex == 0 ? 'ckjg_active' : ''"
					class="text-#239EA3 flex-1 text-#26rpx bg-#D9F3F2 flex flex-items-center flex-justify-center rounded-l-8rpx">
					结论建议
				</view>
				<view @click="getBtn(1)" :class="tabIndex == 1 ? 'ckjg_active' : ''"
					class="text-#239EA3 flex-1 flex flex-items-center flex-justify-center bg-#D9F3F2 rounded-r-8rpx">
					完整报告
				</view>
			</view>
			<view v-if="tabIndex == 0">
				<view class="bg-#239EA3 position-relative h-390rpx ma mb-10rpx border-rd-5rpx">
					<view class="text-36rpx text-#fff position-absolute top-33rpx left-28rpx">
						{{ bgjl_obj.name }}
					</view>
					<image class="w-279rpx h-329rpx position-absolute bottom-0 left-80rpx"
						src="@/static/assets/slices/avatar.png"></image>
					<view class="relative center h-full">
						<view class="absolute right-335rpx" style="
                width: 0;
                height: 0;
                border-top: 15rpx solid transparent;
                border-right: 15rpx solid #fff;
                border-bottom: 15rpx solid transparent;
              ">
						</view>
						<view
							class="bg-#fff rounded-20rpx pb-27rpx pl-33rpx pr-33rpx position-absolute right-20rpx w-250rpx">
							<view class="text-#239EA3 text-28rpx line-height-[2.8] font-500">
								健康数据
							</view>
							<view class="flex flex-justify-between text-24rpx line-height-[1.5]"
								v-for="(item, index) in bgjl_obj.base_date" :key="index">
								<view class="text-#8A8A8A"> {{ item.name }} </view>
								<view class="text-#101010"> {{ item.value }} </view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex flex-justify-evenly pb-20rpx pt-14rpx" style="
            background: linear-gradient(
              -360deg,
              #f3f3f3 0%,
              #edf6f5 55%,
              #bbdfe1 99%
            );
          ">
					<view class="bg-#fff rounded-20rpx w-30% text-center pt-36rpx pb-36rpx">
						<view class="text-26rpx font-500">
							<span class="text-36rpx mr-10rpx">
								{{ bgjl_obj ? bgjl_obj.items.all_count : 0 }}</span>项
						</view>
						<view class="text-#8C8C8C text-22rpx"> 总指标 </view>
					</view>
					<view class="bg-#fff rounded-20rpx w-30% text-center pt-36rpx pb-36rpx">
						<view class="text-26rpx font-500">
							<span class="text-36rpx mr-10rpx" :class="
                  bgjl_obj && bgjl_obj.items.ipt_error_count > 0
                    ? 'color-red'
                    : ''
                ">
								{{ bgjl_obj ? bgjl_obj.items.ipt_error_count : 0 }}</span>项
						</view>
						<view class="text-#8C8C8C text-22rpx"> 重要异常结果 </view>
					</view>
					<view class="bg-#fff rounded-20rpx w-30% text-center pt-36rpx pb-36rpx">
						<view class="text-26rpx font-500">
							<span class="text-36rpx mr-10rpx" :class="
                  bgjl_obj && bgjl_obj.items.error_count > 0 ? 'color-red' : ''
                ">{{ bgjl_obj ? bgjl_obj.items.error_count : 0 }}</span>项
						</view>
						<view class="text-#8C8C8C text-22rpx"> 异常结果 </view>
					</view>
				</view>

				<view class="rounded-15rpx bg-#fff pt-22rpx pb-22rpx">
					<view class="w-154rpx h-60rpx rounded-r-30rpx text-center center text-#123531 text-25rpx font-500"
						style="background: linear-gradient(90deg, #edf6f5 0%, #bbdfe1 99%)">
						总检建议
					</view>
					<view class="pl-15rpx pr-25rpx pt-45rpx box-border">
						<text class="text-#0B0B0B line-height-[2] text-26rpx">{{
              bgjl_obj.content
            }}</text>

						<!-- 	<view class=" flex flex-justify-between line-height-[2]">
							 
							<view class="font-500 text-28rpx">【{{item}}】舒张压降低
							</view>
							<view class="">
								<image class="w-25rpx h-25rpx mr-4rpx" src="@/static/assets/slices/wjx.png"></image>
								<image class="w-25rpx h-25rpx" src="@/static/assets/slices/wjx.png"></image>
							</view>
						</view>
						<view class="text-26rpx   text-#0B0B0B pl-15rpx">
							<view class="flex">
								<view class="mr-5rpx"> (1) </view>
								<view class="">
									收缩压正常、舒张压降低为身低于60mm降低为身低于60mmHg 收缩压正常、舒张压降低为身低于60mmHg
								</view>
							</view> 
							 
						</view> -->
					</view>
				</view>
			</view>
			<view v-if="tabIndex == 1">
				<view class="rounded-15rpx bg-#fff pt-22rpx pb-50rpx position-relative">
					<view class="w-154rpx h-60rpx mb-20rpx rounded-r-30rpx text-center line-height-[2.3] text-#123531 text-25rpx font-500" style="background: linear-gradient(90deg, #edf6f5 0%, #bbdfe1 99%)">
						全部检查
					</view>
					 
					<view v-for="(item, index) in wzbg_list">
						<uni-collapse class="collapse-w" @change="collapseClick" v-model="currentIndex" accordion>
							<view class="position-relative" :key="index">
								<view v-if="item && item.error_count > 0" class="position-absolute line-height-[96rpx] right-40px text-#6D6D6D text-15px" style="pointer-events: none;">
									<span class="text-#E46B1A">{{ item.error_count }}</span> 项异常
								</view>
								<uni-collapse-item :name="item.id" :open="item.isopen" thumb="" :title="index">
									<view class="p-20rpx pl-30rpx pr-30rpx" v-if="item && item.details">
										 
									 
										<view class="p-10rpx pt-20rpx pb-20rpx">
											<view  v-if="!item.details.is_pacs">
												
												<table style="width: 100%; text-align: left ; ">
												    <thead>
												        <tr>
												            <th  >项目名称</th>
												            <th  >结果</th>
															<th  v-if="item.details.is_fanwei=='有范围'"  >范围值</th>
															 
												        </tr>
												        
												    </thead>
												    <tbody>
												        <tr v-for="(obj, k) in item.details.list" :key="k">
												            <td> {{obj.基础项目名称}}</td>
												            <td>{{obj.结果值}} <span style="color: red;">{{obj.异常标识}}</span></td>
												            <td  v-if="item.details.is_fanwei=='有范围'" >{{obj.结果值范围}}</td>
												           
												        </tr>
												       
												    </tbody>
												</table>
												 
											</view>
											<view
											  class="  text-22rpx line-height-[2] pl-20rpx pr-20rpx"
											  v-else
											>
											  <!-- {{item.details.error_items.length}} -->
											  <text
											    v-if="
											      !item.details.suojian?.length &&
											      !item.details.error_items?.length
											    "
											  >
											    未见明显异常</text
											  >
											  <template v-else>
												  <table style="width: 100%; text-align: left ;">
												      <thead>
												          <tr>
															   <th  >检查所见</th> 
												              <th  >结论</th>
												             
												          </tr> 
												      </thead>
												      <tbody>
												          <tr>
												              <td> 
															  <text
															    v-for="(text, i) in item.details.suojian"
															    :key="i"
															  >
															    {{ text }}</text
															  >
															  </td>
												              <td>
																  <text
																    v-for="(text, i) in item.details.jielun"
																    :key="i"
																  >
																    {{ text }}</text
																  >
															  </td>
												             
												          </tr>
												         
												      </tbody>
												  </table>
											    
											  </template>
											</view>
											<view class=""> </view>
										</view>
									</view>
								</uni-collapse-item>
							</view>
						</uni-collapse>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	/* uni-collapse-item__title.uni-collapse-item-border */
	::v-deep #qcInline #qcInline-item .uni-collapse-item__title.uni-collapse-item-border {
		border: none !important;
	}

	::v-deep #qcInline #qcInline-item .uni-collapse-item__wrap .uni-collapse-item__wrap-content.open {
		border: none !important;
	}

	::v-deep .collapse-w .uni-collapse-item__title-box {
		width: 560rpx;
	}

	.ckjg_active {
		background: #239ea3;
		color: #fff;
	}

	.color-red {
		color: #e46b1a;
	}

	.greenTextClor {
		background-color: #239ea3;
	}

	.greenClor {
		background-color: #e8f6f5;
		border: 2px solid #dce9e8;
	}
	table {
	            border-collapse: collapse;
	            width: 50%;
	             
	        }
	        th, td {
	            border: 1px solid #e5e5e5;
	            padding: 8px;
	            
	        }
	        th {
	            background-color: #f2f2f2;
	        }
</style>