<script setup lang="ts">
import NavHomeSelect                               from '@/assets/images/nav-home.select.png?url';
import { Dialog }                                  from '@/platform';
import { getAnalysisResultsMethod, processMethod } from '@/request/api';
import { useRequest }                              from 'alova/client';
import { useRouter }                               from 'vue-router';


const router = useRouter();

const { data, loading, error } = useRequest(getAnalysisResultsMethod, { initialData: { tongue: {}, face: {} } })
  .onSuccess(({ data }) => {
    if ( data?.miniProgramURL ) {
      panelProps.anchors[ 0 ] = 100;
      if ( data.payLock ) panelOpen(100);
    }
  })
  .onError(async ({ error }) => {
    await Dialog.show({
      message: error.message,
      theme: 'round-button',
      showCancelButton: false,
      confirmButtonText: '好的',
      width: '350px',
    });
    await router.replace(`/camera`);
});

const panelHeight = ref(0);
const panelProps = reactive({
  anchors: [0, window.innerWidth],
  contentDraggable: false,
  lockScroll: true,
});
const panelOpen = (min?: number) => {
  if ( min ) panelProps.anchors[ 0 ] = min;
  panelHeight.value = panelProps.anchors[1];
};

const scrollable = computed(() => !data.value.payLock &&
                                  panelHeight.value < panelProps.anchors[ 1 ] || panelHeight.value === 0,
);


const { data: path, loading: nextLoading } = useRequest(processMethod).onSuccess((data) => {
  console.log(data);
});

const showNext = computed(() => path.value && path.value !== '/screen');

function next() {
  console.log(path);
  router.replace({ path: path.value });
}
</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>
          <AnalysisComponent title="舌象分析" exception-type="list" v-bind="data.tongue"></AnalysisComponent>
          <AnalysisComponent title="面象分析" exception-type="group" v-bind="data.face"></AnalysisComponent>
          <div class="m-4" v-if="!nextLoading && showNext">
            <div class="m-auto size-16 cursor-pointer">
              <img class="size-full" src="@/assets/images/next-step.svg" alt="提交" @click="next()">
            </div>
          </div>
          <div :style="{ height: panelHeight + 'px' }"><!--补偿面板打开高度--></div>
        </div>
      </van-skeleton>
    </div>
    <van-floating-panel v-model:height="panelHeight" v-bind="panelProps">
      <template #header>
        <div class="van-floating-panel__header !justify-between">
          <div></div>
          <div class="van-floating-panel__header-bar"></div>
          <div>
            <van-icon v-if="!data.payLock" name="cross" @click.stop="panelHeight = panelProps.anchors[0];" />
          </div>
        </div>
      </template>
      <Transition>
        <div class="panel-content">
          <img
            class="size-full object-contain"
            v-if="panelHeight === panelProps.anchors[1] || panelHeight > panelProps.anchors[0] * 1.5"
            :src="data.miniProgramURL"
            alt="小程序码"
          />
          <div class="flex justify-center items-center" v-else @click="panelOpen()">
            <img class="h-10 w-10" src="@/assets/images/mini-program.svg" alt="小程序" />
            <span class="text-lg ml-2">小程序</span>
          </div>
        </div>
      </Transition>
    </van-floating-panel>
  </div>
</template>
<style scoped lang="scss">
.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>
