<template>
  <div class="flex flex-col">
    <div class="bg-[url(/images/medical/people-bg.png)] aspect-[750/868] w-full bg-center bg-no-repeat custom-bg-size pt-[60rpx] pr-[30rpx] flex justify-end">
      <ul class="flex flex-col gap-[24rpx]">
        <li class="w-[320rpx] h-[164rpx] rounded-[24rpx] border-[3rpx] border-solid border-[#fff] bg-[#eaf8f8] flex flex-col justify-between p-[20rpx]">
          <div class="flex items-center">
            <span class="text-[34rpx] text-[#333] mr-[10rpx]">血压</span>
            <div class="bg-[#d3efee] rounded-full w-[94rpx] h-[38rpx] flex items-center justify-center">
              <div class="w-[10rpx] h-[10rpx] rounded-full bg-[#41B9B7] mr-[8rpx]"></div>
              <span class="text-[26rpx] text-[#41B9B7] font-400">正常</span>
            </div>
          </div>
          <div class="flex">
            <div class="flex flex-col">
              <span class="text-[40rpx] font-700 mb-[4rpx]">107</span>
              <span class="text-[#666] text-[26rpx] font-400">收缩压</span>
            </div>
            <div class="flex flex-col ml-[62rpx]">
              <span class="text-[40rpx] font-700 mb-[4rpx]">107</span>
              <span class="text-[#666] text-[26rpx] font-400">舒张压</span>
            </div>
          </div>
        </li>

        <li class="w-[320rpx] h-[164rpx] rounded-[24rpx] border-[3rpx] border-solid border-[#fff] bg-[#eaf8f8] flex flex-col justify-between p-[20rpx]">
          <div class="flex items-center">
            <span class="text-[34rpx] text-[#333] mr-[10rpx]">血氧</span>
            <div class="bg-[#d3efee] rounded-full w-[94rpx] h-[38rpx] flex items-center justify-center">
              <div class="w-[10rpx] h-[10rpx] rounded-full bg-[#41B9B7] mr-[8rpx]"></div>
              <span class="text-[26rpx] text-[#41B9B7] font-400">正常</span>
            </div>
          </div>
          <div class="flex">
            <div class="flex flex-col">
              <span class="text-[40rpx] font-700 mb-[4rpx]">94%</span>
              <span class="text-[#666] text-[26rpx] font-400">血氧比例</span>
            </div>
            <div class="flex flex-col ml-[62rpx]">
              <span class="text-[40rpx] font-700 mb-[4rpx]">--</span>
              <span class="text-[#666] text-[26rpx] font-400">距正常值</span>
            </div>
          </div>
        </li>

        <li class="w-[320rpx] h-[164rpx] rounded-[24rpx] border-[3rpx] border-solid border-[#fff] bg-[#eaf8f8] flex flex-col justify-between p-[20rpx]">
          <div class="flex items-center">
            <span class="text-[34rpx] text-[#333] mr-[10rpx]">心率</span>
            <div class="bg-[#F03B25] rounded-full w-[94rpx] h-[38rpx] flex items-center justify-center">
              <div class="w-[10rpx] h-[10rpx] rounded-full bg-[#fff] mr-[8rpx]"></div>
              <span class="text-[26rpx] text-[#fff] font-400">偏高</span>
            </div>
          </div>
          <div class="flex">
            <div class="flex flex-col">
              <span class="text-[40rpx] font-700 mb-[4rpx]">60</span>
              <span class="text-[#666] text-[26rpx] font-400">次/分</span>
            </div>
            <div class="flex flex-col ml-[62rpx]">
              <div class="text-[40rpx] font-700 mb-[4rpx] flex items-center text-[#F03B25]">
                <span>2%</span>
                <MoveUp class="w-[28rpx] h-[40rpx] font-700" />
              </div>
              <span class="text-[#666] text-[26rpx] font-400">高于正常值</span>
            </div>
          </div>
        </li>

        <li class="w-[320rpx] h-[164rpx] rounded-[24rpx] border-[3rpx] border-solid border-[#fff] bg-[#eaf8f8] flex flex-col justify-between p-[20rpx]">
          <div class="flex items-center">
            <span class="text-[34rpx] text-[#333] mr-[10rpx]">呼吸率</span>
            <div class="bg-[#F03B25] rounded-full w-[94rpx] h-[38rpx] flex items-center justify-center">
              <div class="w-[10rpx] h-[10rpx] rounded-full bg-[#fff] mr-[8rpx]"></div>
              <span class="text-[26rpx] text-[#fff] font-400">偏高</span>
            </div>
          </div>
          <div class="flex">
            <div class="flex flex-col">
              <span class="text-[40rpx] font-700 mb-[4rpx]">107</span>
              <span class="text-[#666] text-[26rpx] font-400">次/分</span>
            </div>
            <div class="flex flex-col ml-[62rpx]">
              <div class="text-[40rpx] font-700 mb-[4rpx] flex items-center text-[#F03B25]">
                <span>8%</span>
                <MoveDown class="w-[28rpx] h-[40rpx] font-700" />
              </div>
              <span class="text-[#666] text-[26rpx] font-400">低于正常值</span>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="w-full rounded-[48rpx_48rpx_0_0] bg-[#F5F5F5CC] backdrop-blur-md flex-auto mt-[-60rpx] p-[30rpx]">
      <div class="rounded-[24rpx] bg-white h-[330rpx] px-[30rpx] pt-[30rpx] pb-[20rpx] flex flex-col justify-between">
        <div class="flex items-center">
          <span class="text-[34rpx] text-[#333] font-700">睡眠</span>
          <div class="bg-[#d3efee] rounded-full w-[94rpx] h-[38rpx] flex items-center justify-center ml-[10rpx]">
            <div class="w-[10rpx] h-[10rpx] rounded-full bg-[#41B9B7] mr-[8rpx]"></div>
            <span class="text-[26rpx] text-[#41B9B7] font-400">正常</span>
          </div>
          <div class="ml-auto flex items-center">
            <div class="text-[26rpx] text-[#666] font-400">较昨日</div>
            <div class="text-[26rpx] font-700 mb-[4rpx] flex items-center text-[#F03B25] ml-[4rpx]">
              <span>2%</span>
              <MoveDown class="w-[28rpx] h-[40rpx] font-700" />
            </div>
          </div>
        </div>

        <div class="flex justify-between">
          <div class="flex flex-col flex-auto">

            <div class="flex items-center justify-between">
              <div class="flex flex-col justify-center">
                <div class="text-[40rpx] font-700">21:10</div>
                <div class="text-[26rpx] font-400 text-[#666] mt-[12rpx]">入睡时间</div>
              </div>
              <div class="text-[40rpx] text-[#999]">~</div>
              <div class="">
                <div class="text-[40rpx] font-700">7:28</div>
                <div class="text-[26rpx] font-400 text-[#666] mt-[12rpx]">醒来时间</div>
              </div>
            </div>

            <div class="border-dashed border-b-[2rpx] border-b-[#ccc] my-[22rpx]"></div>

            <div class="flex items-center justify-between">
              <div class="flex flex-col justify-center">
                <div class="text-[40rpx] font-700">6:32</div>
                <div class="text-[26rpx] font-400 text-[#666] mt-[12rpx]">深睡时长</div>
              </div>
              <div class="text-[40rpx] text-[#999]">~</div>
              <div class="">
                <div class="text-[40rpx] font-700">2:21</div>
                <div class="text-[26rpx] font-400 text-[#666] mt-[12rpx]">浅睡时长</div>
              </div>
            </div>

          </div>

          <div class="flex flex-col items-center justify-center">
              <Pie class="w-[154rpx] mx-[80rpx] flex items-center"></Pie>
              <span class="text-[26rpx] text-[#666] font-400">深睡率</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { MoveUp, MoveDown } from "lucide-vue-next";
  import Pie from "./components/pie.vue";
</script>

<style lang="scss" scoped>
  .custom-bg-size {
    background-size: cover;
  }
</style>
