<script setup lang="ts">
import NavHomeSelect from '@/assets/images/nav-home.select.png?url';
import NavScheme     from '@/assets/images/nav-scheme.png?url';
import SchemeMedia               from '@/modules/report/SchemeMedia.vue';
import { getReportSchemeMethod } from '@/request/api/report.api';
import { useRouteParams }        from '@vueuse/router';
import { useWatcher }            from 'alova/client';
import { useRouter } from 'vue-router';


const id = useRouteParams<string>('id');
const { data, loading } = useWatcher(() => getReportSchemeMethod(id.value), [ id ], {
  initialData: {
    children: [],
  },
  immediate: true,
});

const router = useRouter();

function toggle() {
  const path = router.currentRoute.value.fullPath.replace('/scheme', '');
  router.replace({ path });
}
</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">
          调理方案
        </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">
      <!--{{ data }}-->
      <van-skeleton class="flex-auto" title :row="3" :loading>
        <div class="flex-auto px-6 overflow-y-auto">
          <div class="card my-6 text-lg" v-for="item in data.children" :key="item.id">
            <div class="card__title mb-3 text-primary text-2xl font-bold">{{ item.title }}</div>
            <div class="card__content">
              <div class="my-4" v-for="card in item.children" :key="card.id">
                <div class="text-xl text-center text-primary">{{ card.title }}</div>
                <SchemeMedia :media="card.media"></SchemeMedia>
                <div v-if="card.description">{{ card.description }}</div>
                <div v-for="(item,index) in card.descriptions ">
                  <span class="text-primary">【{{ item.title }}】</span>
                  <span v-html="item.description"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-skeleton>
      <div class="flex-none flex justify-between py-2 nav-wrapper" style="background-color: #12312c;">
        <div class="m-auto min-w-16 text-center hover:text-primary" @click="toggle()">
          <img :src="NavScheme" alt="健康报告">
          <div class="mt-2">健康报告</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  padding: 24px;
  border-radius: 24px;
  box-shadow: inset 0 0 80px 0 #34a76b60;
}

.van-button.decorate {
  font-size: 20px;
  height: 62px;
  width: 240px;
  background-size: 80%;
  letter-spacing: 2px;
}

.text-grey {
  color: #e3e3e3;
}
</style>
