<script setup lang="ts">
import { Notify } from '@/platform';
import { tryOnMounted, tryOnUnmounted, useCountdown } from '@vueuse/core';
import { useRequest } from 'alova/client';
import { useFlowStore, useVisitor } from '@/stores';
import { putPulseMethod } from '@/request/api/pulse.api';

import NavHomeSelect from '@/assets/images/nav-home.select.png?url';

type Operate = { title: string; countdown?: number; handle?: () => void };

const Visitor = useVisitor();
const Flow = useFlowStore();
const { flow } = storeToRefs(Flow);
/* 倒计时完成动作 */
const done = shallowRef<Operate>();
/* 下一动作可选 */
const next = shallowRef<Operate>();

const { remaining, start, stop } = useCountdown(5, {
  onComplete() {
    done.value?.handle?.();
  },
  immediate: false,
});
const countdown = computed(() => remaining.value.toString().padStart(2, '0'));

tryOnMounted(pulse);
tryOnUnmounted(stop);

const supported = ref(true);
const loading = ref(false);
const error = shallowRef({ message: '' });
async function pulse() {
  loading.value = true;
  try {
    const patientId = Visitor.patientId;
    const result = await Bridge.pulse(patientId!!);
    await submit(patientId, result);
  } catch (e) {
    done.value = { title: '返回首页', countdown: flow.value.done?.countdown ?? 20, handle: () => Flow.router.done() };
    next.value = flow.value.optional && !Flow.router.hasNext('/pulse/result') ? { title: '下一步', handle: () => Flow.router.push() } : void 0;
    if (e instanceof ReferenceError) {
      supported.value = false;
      error.value = { message: `当前环境不支持脉诊设备，请联系管理员！` };
      done.value.countdown = 5;
    } else {
      error.value = { message: `请再次测量脉诊` };
      done.value.countdown = 10;
    }
    if (done.value.countdown) start(done.value.countdown);
    if (error.value?.message) Notify.warning(error.value.message);
  }
  loading.value = false;
}

const finished = ref(false);
const previewable = ref(false);
const loadReport = computed(() => flow.value?.next === '/pulse/result');
const { data: report, loading: submitting, send: submit, } = useRequest((id, result) => putPulseMethod(id, result), { immediate: false }).onSuccess(({ data }) => {
  Visitor.updatePulseReport(data);
  if (loadReport.value) Flow.router.push();
  else {
    finished.value = true;
    done.value = { title: '返回首页', countdown: flow.value.done?.countdown ?? 10, handle: () => Flow.router.done() };
    next.value = flow.value.next ? { title: '获取健康调理方案', handle: () => Flow.router.push() } : void 0;
    if (!flow.value.done) {
      done.value = { ...done.value, ...next.value };
      next.value = void 0;
    }
    if (previewable.value) done.value.countdown = 0;
    if (done.value.countdown) start(done.value.countdown);
  }
});
</script>
<template>
  <div>
    <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">
          {{ finished ? '完成脉诊采集' : '脉诊采集' }}
        </div>
      </div>
      <div class="grow shrink-0 h-full min-w-16 flex items-center justify-end overflow-hidden">
        <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">
      <header></header>
      <main class="flex flex-col justify-evenly">
        <template v-if="finished && report">
          <img class="size-40 mx-auto" src="@/assets/images/tips.png" alt="" />
          <div>
            <div class="text-3xl text-center">恭喜您！</div>
            <div class="text-3xl text-center my-8">完成脉诊采集</div>
          </div>
          <AnalysisPulseComponent title="" v-bind="report" :disabled="!previewable">
            <template #exception>
              <div><!--空占位符--></div>
            </template>
          </AnalysisPulseComponent>
        </template>
        <div v-else-if="error.message" class="text-center">{{ error.message }}</div>
      </main>
      <footer class="flex flex-col justify-center items-center">
        <div v-if="supported && !report" class="van-button decorate" @click="!loading && pulse()">
          <div class="van-button__content">
            <van-loading v-if="loading || submitting" />
            <span v-else class="van-button__text">连接脉诊</span>
          </div>
        </div>
        <van-button v-if="next" class="decorate !text-xl" @click="next.handle">
          {{ next.title }}
        </van-button>
        <van-button v-if="done" class="decorate !text-xl !text-primary-400" @click="done.handle">
          {{ done.title }}
          <template v-if="done.countdown">({{ countdown }}s)</template>
        </van-button>
      </footer>
    </div>
  </div>
</template>
<style scoped lang="scss">
header {
  flex: 1 1 10%;
}

footer {
  flex: 1 1 30%;
}

main {
  position: relative;
  flex: 1 1 50%;
}

.decorate {
  margin: 24px 0;
}
</style>
