<script setup lang="ts">
import { useRequest } from 'alova/client';
import { getAnalysisResultsMethod } from '@/request/api';
import { useFlowStore } from '@/stores';
import { Dialog } from '@/platform';

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

import MiniProgram from '@/components/MiniProgram.vue';

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

const miniProgramRef = useTemplateRef<InstanceType<typeof MiniProgram>>('mini-program');
const scrollable = ref(true);
const closeable = computed(() => !data.value.payLock || !!flow.value.next);
const { data, loading, error } = useRequest(getAnalysisResultsMethod, { initialData: { tongue: {}, face: {} } })
  .onSuccess(({ data }) => {
    if (data?.miniProgramURL && data.payLock) {
      scrollable.value = false;
      nextTick(() => miniProgramRef.value?.open());
    }
  })
  .onError(async ({ error }) => {
    await Dialog.show({
      message: error.message,
      theme: 'round-button',
      showCancelButton: false,
      confirmButtonText: '好的',
      width: '350px',
    });
    await Flow.router.push(`/camera`);
  });
</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="[scrollable ? 'overflow-y-auto' : 'overflow-hidden']">
          <div class="my-6 text-primary text-2xl text-center" v-if="data.date">报告日期：{{ data.date }}</div>
          <AnalysisComponent title="舌象分析" exception-type="list" v-bind="data.tongue"></AnalysisComponent>
          <AnalysisComponent title="面象分析" exception-type="group" v-bind="data.face"></AnalysisComponent>
        </div>
      </van-skeleton>
      <div class="flex-none flex justify-between py-2 nav-wrapper" style="background-color: #12312c">
        <mini-program ref="mini-program" :url="data.miniProgramURL" :closeable="closeable"></mini-program>
        <div v-if="flow.next && !loading" 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">
.nav-img {
  margin: auto;
  width: 36px;
  height: 36px;
  object-fit: scale-down;
}
.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;
}
</style>
