<script setup lang="ts">
import { Notify } from '@/platform';
import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';

import { useRequest } from 'alova/client';
import { putPulseMethod } from '@/request/api/pulse.api';
import { processMethod3 } from '@/request/api';
import type { Flow } from '@/request/model';

import { useVisitor } from '@/stores';

import NavHomeSelect from '@/assets/images/nav-home.select.png?url';
import HandLeft from '@/assets/images/pulse-hand-left.png?url';
import HandRight from '@/assets/images/pulse-hand-right.png?url';

const router = useRouter();
const Visitor = useVisitor();

const pending = ref(false);
const finished = ref(false);
const supported = ref(true);

async function handle() {
  if (pending.value) return;
  pending.value = true;
  clearInterval(timer);

  const patientId = Visitor.patientId;
  try {
    await load();
    const result = await Bridge.pulse(patientId!!);
    await submit(patientId, result);
  } catch (e: any) {
    let message = e.message;
    if (e instanceof ReferenceError) {
      supported.value = false;
      message = '当前环境不支持脉诊设备，请联系管理员';
    }
    if (!supported.value || process.value?.current?.optional) {
      done.value = next.value?.optional
        ? { ...next.value, countdown: 5 }
        : {
            title: '返回首页',
            route: '/screen',
            countdown: 5,
          };
      next.value = void 0;
      start();
    } else {
      done.value = void 0;
      message = '请再次测量脉诊';
    }
    Notify.warning(message);
  }
  pending.value = false;
}

const done = shallowRef<Partial<Flow> & { countdown: number }>();
const next = shallowRef<Partial<Flow>>();

const {
  data: process,
  loading,
  send: load,
} = useRequest(processMethod3, { immediate: false }).onSuccess(({ data }) => {
  if (data.next.route === '/screen') {
    done.value = { title: '返回首页', route: '/screen', countdown: 30 };
    next.value = void 0;
  } else if (data.next.route === '/pulse/result') {
    done.value = data.next.optional ? { title: '返回首页', route: '/screen', countdown: 10 } : void 0;
    next.value = { title: data.next.title || '查看报告', route: data.next.route };
  } else {
    done.value = { title: data.next.title || '获取健康调理方案', route: data.next.route, countdown: 10 };
    next.value = void 0;
  }
});

const {
  data: report,
  loading: submitting,
  send: submit,
} = useRequest((id, result) => putPulseMethod(id, result), { immediate: false }).onSuccess(({ data }) => {
  Visitor.updatePulseReport(data);
  finished.value = true;
  start();
});

let timer: ReturnType<typeof setInterval>;
const countdown = ref(5);

function start(value?: number) {
  if (!done.value) return;
  countdown.value = value ?? done.value.countdown ?? 3;
  timer = setInterval(() => {
    const _countdown = countdown.value - 1;
    if (_countdown <= 0) {
      replace(done.value?.route);
    } else {
      countdown.value = _countdown;
    }
  }, 1000);
}

function replace(path: string = '/screen') {
  return router.replace({ path });
}

tryOnMounted(() => {
  setTimeout(() => handle(), 300);
});
tryOnUnmounted(() => {
  clearInterval(timer);
});
</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>
            <template #exception>
              <div><!--空占位符--></div>
            </template>
          </AnalysisPulseComponent>
        </template>
      </main>
      <footer class="flex flex-col justify-center items-center">
        <van-button
          v-if="!pending && finished && next"
          class="decorate !text-xl !text-primary-400"
          @click="replace(next.route)"
        >
          {{ next.title }}
        </van-button>
        <van-button
          v-if="!pending && done"
          class="decorate !text-xl !text-primary-400 !mb-6"
          @click="replace(done.route)"
        >
          {{ done.title }}({{ countdown }})
        </van-button>
        <div v-if="supported && !finished" class="van-button decorate" @click="handle()">
          <div class="van-button__content">
            <van-loading v-if="loading || pending || submitting" />
            <span v-else class="van-button__text">连接脉诊</span>
          </div>
        </div>
      </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>
