<script setup lang="ts">
import NavBar                    from '@/modules/report/NavBar.vue';
import SchemeMedia               from '@/modules/report/SchemeMedia.vue';
import { getReportSchemeMethod } from '@/request/api/report.api';
import { useRouteParams }        from '@vueuse/router';
import { useWatcher }            from 'alova/client';


const id = useRouteParams<string>('id');
const { data, loading } = useWatcher(() => getReportSchemeMethod(id.value), [ id ], {
  initialData: {
    children: [],
  },
  immediate: true,
});
</script>
<template>
  <div class="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>
    <NavBar class="flex-none"></NavBar>
  </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>
