<script setup>
/**
 * name：
 * user：bgdb
 * date：2024年9月26日 19:26:00
 */
import { ref } from "vue";
import { $api, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();
const dbList = ref([]);
let data = ref({});
const mountedAction = () => {
  // uni.showLoading({
  // 	title: "加载中",
  // });
  let obj = $store.getTjbgInfo();
  if (obj.length) {
    dbList.value = obj;
    console.log($store.getTjbgInfo(), "体检报告");
  }
};
const dbResList = ref([]);

let tabIndex = ref(0); // 标签索引

const getBtn = async (e) => {
  tabIndex.value = e;
  //切换时，请求切换接口更换dbResList内容
  if (e == 0) {
    dbResList.value = data.value?.report_type1_content;
  } else {
    dbResList.value = data.value?.report_type2_content;
  }
};
const duibiclick = async () => {
  // 报告对比按钮

  if (dbList.value && dbList.value.length == 2) {
    let obj = {
      tj_numbers: [dbList.value[0]["体检号"], dbList.value[0]["体检号"]],
    };
    const response = await $api("ReportContrast", obj);
    $response(response, () => {
      data.value = response.data;
      dbResList.value = data.value?.report_type1_content;
    });
  } else {
    uni.$lu.toast("选择两份报告后在进行对比");
  }
};

const delObj = (i) => {
  dbList.value.splice(i, 1);
  $store.setTjbgInfo(dbList.value);
};
const selectBg = () => {
  // 选择报告按钮
  uni.navigateTo({
    url: `/pages/main/bgcx/bgdb/xzbg/xzbg`,
  });
};
const config_ref = ref(null);
const configRef = (e) => {
  if (!config_ref.value) {
    config_ref.value = e;
    mountedAction();
  }
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
    <view class="p-20rpx">
      <view
        class="bg-#EEA61E text-#CF911C bg-op-20 rounded-10rpx p-20rpx flex flex-items-center"
      >
        <image
          class="w-26rpx h-26rpx mr-20rpx"
          src="@/static/assets/slices/bgjdtb.png"
        ></image>
        <span class="text-24rpx"
          >由于手机上显示体检报告，最多选择两份报告对比!</span
        >
      </view>
      <view class="bg-#fff rounded-15rpx p-20rpx mt-20rpx mb-20rpx pb-50rpx">
        <!-- list -->
        <view class="pb-30rpx">
          <view v-for="(item, index) in dbList" :key="index">
            <view
              style="border-bottom: 1px solid #e6e9e9"
              class="flex flex-justify-between text-#101010 text-30rpx pb-20rpx pt-20rpx"
            >
              <view class="line-clamp-1 flex-1">
                {{ item["检前签到时间"]?.split("T").join(" ") }} 体检报告
              </view>
              <view
                @click="delObj(index)"
                class="w-48rpx h-48rpx rounded-15rpx flex flex-items-center flex-justify-center right-50rpx top-30px"
              >
                <uni-icons
                  type="trash-filled"
                  color="#E55224"
                  size="20"
                ></uni-icons>
              </view>
            </view>
          </view>
        </view>
        <view
          v-if="dbList && dbList.length == 0"
          @click="selectBg"
          class="bg-#F0F0F0 rounded-10rpx w-477rpx h-242rpx ma flex flex-justify-center mt-20rpx mb-40rpx"
        >
          <image
            class="w-91rpx h-101rpx mt-50rpx"
            src="@/static/assets/slices/bgdbadd.png"
          ></image>
        </view>
        <view
          @click="selectBg"
          v-if="dbList && dbList.length == 1"
          class="w-520rpx ma bg-#239EA3 rounded-40rpx text-#fff text-26rpx font-500 flex flex-justify-center line-height-[3]"
        >
          选择报告
        </view>
        <view
          @click="duibiclick"
          v-if="dbList.length != 1"
          class="w-520rpx ma bg-#239EA3 rounded-40rpx text-#fff text-26rpx font-500 flex flex-justify-center line-height-[3]"
        >
          报告对比
        </view>
      </view>
      <view
        class="bg-#fff rounded-15rpx p-20rpx mt-20rpx mb-20rpx pb-50rpx"
        v-if="dbResList && dbResList.length > 0"
      >
        <view
          class="mt-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>
        <uni-collapse id="collapse-bgdb">
          <view
            class="mt-35rpx"
            v-for="(item, index) in dbResList"
            :key="index"
          >
            <uni-collapse-item
              :name="item.id"
              :open="true"
              :title="item.title"
              thumb=""
            >
              <view class="p-20rpx py-0">
                <!-- <view class="p-20rpx pl-30rpx pr-30rpx" v-if="item && item.details"> -->

                <view class="flex text-#343434 text-center">
                  <view
                    style="border-bottom: 1px solid #d2d2d2"
                    class="line-height-[2.8] flex-1 mr-25rpx text-#343434 text-24rpx"
                  >
                    {{ item.r1.date?.split("T")[0] }}
                  </view>
                  <view
                    style="border-bottom: 1px solid #d2d2d2"
                    class="line-height-[2.8] flex-1 ml-25rpx text-#343434 text-24rpx"
                  >
                    {{ item.r2.date?.split("T")[0] }}
                  </view>
                </view>
                <view class="center text-#343434 items-stretch">
                  <view class="flex-1 mr-20rpx pt-20rpx">
                    <view v-show="tabIndex == 0" class="whitespace-pre-wrap text-28rpx">
                      {{ item.r1?.content }}
                    </view>
                    <view v-show="tabIndex == 1" class="text-center">
                      <view class="text-32rpx">
                        <text class="text-#D01615 text-28rpx">{{
                          item.r2?.icoin
                        }}</text
                        >{{ item.r1?.content }}
                      </view>
                      <view class="text-#999999">
                        *正常范围：{{ item.r1?.desc }}
                      </view>
                    </view>
                  </view>
                  <view class="bg-#D2D2D2 w-1rpx mt-20rpx" />
                  <view class="flex-1 ml-20rpx pt-20rpx">
                    <view v-show="tabIndex == 0" class="whitespace-pre-wrap text-28rpx">
                      {{ item.r2?.content }}
                    </view>
                    <view v-show="tabIndex == 1" class="text-center">
                      <view class="text-32rpx">
                        <text class="text-#D01615 text-28rpx">{{
                          item.r2?.icoin
                        }}</text
                        >{{ item.r2?.content }}
                      </view>
                      <view class="text-#999999">
                        *正常范围：{{ item.r2?.desc }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </view>
        </uni-collapse>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
::v-deep .uni-collapse-item__title-wrap {
  width: 80% !important;
}
::v-deep #collapse-bgdb .uni-collapse-item__title-box,
::v-deep .uni-collapse-item__title {
  background: #239ea3 !important;
  color: #fff !important;
  .uni-icons {
    color: #fff !important;
  }
}

::v-deep #collapse-bgdb .uni-collapse-item__title.uni-collapse-item-border {
  border: none !important;
}

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

.ckjg_active {
  background: #239ea3;
  color: #fff;
}
</style>
