<script setup>
/**
 * 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.config.hospital[0].id
  };
  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) {
      wzbg_list.value = 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) => {
  console.log(e);
  let id = ""; //当前id
  let itemWithId120 = null; //当前id的对象。itemWithId120['details']
  if (e && e.length > 0) {
    id = e[e.length - 1];
    let isHas = dqArr.value.includes(id);
    if (isHas) {
      return;
    }
    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; // 找到后退出循环
      }
    }
    console.log(wzbg_list.value, "wzbg_list", itemWithId120, "itemWithId120");
    uni.showLoading({
      title: "加载中",
    });
    let obj = {
      id,
    };
    const response = await $api("GetReportDetai", obj);
    console.log(response);
    $response(response, () => {
      console.log(response.data, "详情");

      if (response.data.list) {
        response.data.list.forEach((item) => {
          let range = item["结果值范围"].split("-");
          if (range.length === 2) {
            item.minNum = parseFloat(range[0]);
            item.maxNum = parseFloat(range[1]);
          }
        });
      }
      itemWithId120["details"] = response.data;
      itemWithId120.isopen = itemWithId120.isopen
        ? !itemWithId120.isopen
        : true;
    });
    uni.hideLoading();
    dqArr.value = e;
  }
};
const getOpenClick = () => {
  isopen.value = !isopen.value;
  // 将列表中 open 修改，并且请求接口
};

const calculatePercentage = (value, start, end) => {
  // 计算区间的长度
  const rangeLength = end - start;
  const widthFull = rangeLength * 2;
  let num = (value / widthFull).toFixed(2);
  console.log(num);
  if (num < 0) {
    num = 0;
  }
  if (num > 1) {
    num = 1;
  }
  return num * 100;
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <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 line-height-[2.3] 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>{{ 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
            class="position-absolute top-20rpx right-0rpx text-#6D6D6D text-26rpx"
          >
            <view
              id="qcInline"
              class="flex flex-items-center"
              @click="getOpenClick"
            >
              <view class="position-absolute right-35px w-120rpx">
                {{ isopen ? "收起全部" : "展开全部" }}
              </view>
              <uni-collapse-item id="qcInline-item" :open="isopen">
              </uni-collapse-item>
            </view>
            <!-- 展开全部 -->
          </view>

          <uni-collapse
            class="collapse-w"
            @change="collapseClick($event)"
            v-model="currentIndex"
          >
            <view
              class="position-relative"
              v-for="(item, index) in wzbg_list"
              :key="index"
            >
              <view
                v-if="item && item.error_count > 0"
                class="position-absolute top-10px right-40px text-#6D6D6D text-15px"
              >
                <span class="text-#E46B1A">{{ item.error_count }}</span> 项异常
              </view>
              <uni-collapse-item
                :name="item.id"
                :open="item.isopen"
                :title="index"
                thumb=""
              >
                <view
                  class="p-20rpx pl-30rpx pr-30rpx"
                  v-if="item && item.details"
                >
                  <view
                    class="bg-#FBF0EE b-0 b-1 b-solid b-#EADEDB rounded-15rpx pb-10rpx"
                    :class="item.error_count == 0 ? 'greenClor' : ''"
                  >
                    <view
                      :class="item.error_count == 0 ? 'greenTextClor' : ''"
                      class="w-141rpx line-height-[2] text-center text-#fff bg-#F6725B rounded-lt-15rpx rounded-rb-15rpx text-22rpx"
                    >
                      初步意见
                    </view>

                    <template v-if="item.error_count > 0">
                      <view
                        class="text-#E33939 text-22rpx line-height-[2] pl-20rpx pr-20rpx"
                        v-for="(text, i) in item.details.error_items"
                        :key="i"
                      >
                        {{ text }}
                      </view>
                    </template>
                    <view
                      class="text-#239EA3 text-22rpx line-height-[2] pl-20rpx pr-20rpx"
                      v-else
                    >
                      <!-- {{item.details.error_items.length}} -->
                      <text
                        v-if="
                          !item.details.suojian || !item.details.error_items
                        "
                      >
                        未见明显异常</text
                      >
                      <template v-else>
                        <text
                          v-for="(text, i) in item.details.suojian"
                          :key="i"
                        >
                          {{ text }}</text
                        >
                      </template>
                    </view>
                  </view>
                  <view v-if="1 < 0" class="flex flex-justify-around m-20rpx">
                    <view>
                      <view class="text-36rpx font-500"> 162.0 </view>
                      <view class="text-20rpx"> 身高（cm） </view>
                    </view>
                    <view>
                      <view class="text-40rpx font-500"> 58.8 </view>
                      <view class="text-20rpx"> 体重（Kg） </view>
                    </view>
                  </view>
                  <view class="p-10rpx pt-20rpx pb-20rpx">
                    <view v-for="(obj, i) in item.details.list" :key="i">
                      <view class="font-500 text-24rpx line-height-[2]">
                        {{ obj["基础项目名称"] }}
                        <span class="text-#737373 text-18rpx"
                          >( {{ obj["结果值单位"] }})</span
                        >
                      </view>

                      <view class="pt-80rpx pb-30rpx">
                        <view class="h-4rpx bg-#E2E2E2 rounded-2rpx relative">
                          <view
                            class="bg-#239EA3 h-3rpx w-50% rounded-2rpx ma flex text-24rpx text-#7B7B7B flex-justify-between"
                          >
                            <!-- {{obj['结果值范围']}} -->
                            <text>{{ obj.minNum }}</text>
                            <text>正常</text>
                            <text>{{ obj.maxNum }}</text>
                          </view>
                          <view
                            class="center flex-col absolute"
                            :style="{
                              left:
                                calculatePercentage(
                                  obj['结果值'],
                                  obj.minNum,
                                  obj.maxNum
                                ) + '%',
                            }"
                          >
                            <view
                              class="text-#239EA3 text-34rpx absolute top--50rpx"
                            >
                              <text>{{ obj["结果值"] }}</text>
                              <uni-icons
                                v-if="obj['结果值'] < obj.minNum"
                                type="arrow-down"
                                :size="18"
                              ></uni-icons>
                              <uni-icons
                                v-if="obj['结果值'] > obj.maxNum"
                                type="arrow-up"
                                :size="18"
                              ></uni-icons>
                            </view>
                            <view
                              class="w-8rpx h-8rpx rounded-50% bg-#fff b-4rpx b-solid b-#1F8F94 absolute -top-8rpx"
                            >
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class=""> </view>
                  </view>
                </view>
              </uni-collapse-item>
            </view>
          </uni-collapse>
        </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;
}
</style>
