<script setup lang="ts">
import NavHomeSelect from '@/assets/images/nav-home.select.png?url';
import NavNextSelect from '@/assets/images/next-step.svg?url';

import { useFlowStore } from '@/stores';

import { useRouteQuery } from '@vueuse/router';
import { useRequest } from 'alova/client';
import { getPulseMethod } from '@/request/api/pulse.api';

const id = useRouteQuery<string>('id');

const Flow = useFlowStore();
const { flow } = storeToRefs(Flow);
const handle = () => Flow.router.push();
const done = () => Flow.router.done();

const { data, error, loading, send } = useRequest(getPulseMethod, { immediate: false, initialData: { date: '', pulse: {}, } });

async function load() {
  if (id.value) await send(id.value);
  else { /* 从 Visitor 中获取 */ }
}

watch(id, (value, oldValue) => { if (value !== oldValue || value == null) load(); }, { immediate: true });

const scrollable = computed(() => true);
</script>
<template>
  <div class="report-wrapper">
    <div class="page-header flex py-4 px-4">
      <div class="grow shrink-0 h-full min-w-16"></div>
      <div class="grow-[3] shrink mx-2 flex flex-col justify-center overflow-hidden">
        <div class="font-bold text-3xl text-nowrap text-center tracking-wide overflow-ellipsis overflow-hidden">脉象分析报告</div>
      </div>
      <div class="grow shrink-0 h-full min-w-16">
        <router-link :to="{ path: '/screen' }" replace>
          <img class="size-8 object-scale-down" :src="NavHomeSelect" alt="返回首页" />
        </router-link>
      </div>
    </div>
    <div class="page-content flex flex-col overflow-hidden">
      <van-skeleton class="flex-auto" v-if="!error" title :row="3" :loading>
        <div class="flex-auto" :class="{ 'overflow-y-auto': scrollable }">
          <div class="my-6 text-primary text-2xl text-center" v-if="data.date">报告日期：{{ data.date }}</div>
          <AnalysisPulseComponent title="脉象分析" v-bind="data.pulse"></AnalysisPulseComponent>
        </div>
      </van-skeleton>
      <div class="flex-none flex justify-between py-2 nav-wrapper" style="background-color: #12312c">
        <div v-if="flow.next" class="nav m-auto min-w-16 text-center hover:text-primary" @click="handle">
          <img class="nav-img" :src="NavNextSelect" alt="下一步" />
          <div class="mt-2">获取健康调理方案</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.van-button.decorate {
  font-size: 20px;
  height: 62px;
  width: 240px;
  background-size: 80%;
  letter-spacing: 2px;
}

.text-grey {
  color: #e3e3e3;
}

.report-wrapper {
  .panel-content {
    padding: 0 var(--van-floating-panel-header-height) var(--van-floating-panel-header-height);
  }

  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.5s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>
<style lang="scss">
.report-wrapper .card {
  padding: 24px;
  border-radius: 24px;
  box-shadow: inset 0 0 80px 0 #34a76b60;
}

.nav-wrapper {
  img {
    margin: auto;
    width: 36px;
    height: 36px;
    object-fit: scale-down;
  }
}
</style>
