<script setup lang="ts">
import NavBar                                  from '@/modules/report/NavBar.vue';
import PhysiqueChart                           from '@/modules/report/PhysiqueChart.vue';
import SyndromeChart                           from '@/modules/report/SyndromeChart.vue';
import { getReportMethod, updateReportMethod } from '@/request/api/report.api';
import { useRouteParams }                      from '@vueuse/router';
import { useRequest, useWatcher }              from 'alova/client';


const id = useRouteParams<string>('id');
const { data, loading } = useWatcher(() => getReportMethod(id.value), [ id ], {
  initialData: {
    descriptionsTable: { column: [], data: [] },
    tongueTable: { column: [], data: [] },
    tongueException: [],
    tongueAnalysis: {},
    faceAnalysis: {},
  },
  immediate: true,
});

const { loading: uploading, send: upload } = useRequest(() => updateReportMethod(id.value, data.value), {
  immediate: false,
  middleware(_, next) {
    const hasConstitutionGroupImg = data.value.constitutionGroupImg;
    const hasFactorItemRadarImg = data.value[ '中医证素' ]?.length ? data.value.factorItemRadarImg : true;
    if ( hasConstitutionGroupImg && hasFactorItemRadarImg ) { next(); }
  },
});
</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"></div>
    </div>
    <div class="page-content flex flex-col overflow-hidden">
      <van-skeleton class="flex-auto" title :row="3" :loading>
        <div class="flex-auto overflow-y-auto">
          <div class="my-6 text-primary text-2xl text-center">报告日期：{{ data.date }}</div>
          <div class="card m-6 text-lg">
            <div class="card__title text-primary text-3xl font-bold"></div>
            <div class="card__content flex">
              <div class="flex-auto">
                <div class="flex items-center my-2">
                  <span class="text-primary">结果显示您是：</span>
                  <van-button class="decorate !text-primary-400">{{ data[ '结果' ] }}</van-button>
                </div>
                <div class="flex items-center my-2" v-if="data[ '程度' ]">
                  <span class="text-grey">程度：</span>
                  <span class="px-4 py-2 rounded-lg border border-primary-400 text-primary">{{ data[ '程度' ] }}</span>
                </div>
                <div class="my-2 text-grey" v-if="data[ '表现' ]">表现：{{ data[ '表现' ] }}</div>
                <div class="my-2 text-grey" v-if="data[ '体质' ]">体质：{{ data[ '体质' ] }}</div>
              </div>
              <div class="flex-none size-48 ml-4">
                <img class="size-full object-cover" src="@/assets/images/report-cover.png" alt="封面">
              </div>
            </div>
          </div>
          <div class="card m-6 text-lg">
            <div class="card__title mb-3 text-primary text-2xl font-bold">体质分析</div>
            <div class="card__content">
              <PhysiqueChart
                :dataset="data['体质图表']"
                v-model:snapshot="data.constitutionGroupImg" @update:snapshot="upload()"
              />
              <div class="my-2 text-primary" v-if="data[ '体质描述' ]">{{ data[ '体质描述' ] }}</div>
              <table class="mt-8 mb-2 w-full table-auto border border-collapse  border-primary">
                <thead>
                <tr>
                  <th class="border border-primary min-w-[140px]"
                      v-for="(value, i) in data.descriptionsTable.column" :key="i"
                      v-html="value"
                  ></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in data.descriptionsTable?.data" :key="item[0]">
                  <td class="py-4 px-2 border border-primary min-w-[140px]"
                      :class="{'text-grey': i, 'text-primary': !i}"
                      v-for="(value, i) in item" :key="i"
                      v-html="value"
                  ></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="card m-6 text-lg">
            <div class="card__title mb-3 text-primary text-2xl font-bold">舌象分析</div>
            <div class="card__content">
              <table class="mt-8 mb-2 w-full table-auto border border-collapse  border-primary">
                <thead>
                <tr>
                  <th class="py-4 px-2 text-primary border border-primary"
                      v-for="(value, i) in data.tongueTable.column" :key="i"
                      v-html="value"
                  >
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in data.tongueTable?.data" :key="item[0]">
                  <td class="py-4 px-2 border border-primary text-center text-grey"
                      v-for="(value, i) in item" :key="i"
                      v-html="value"
                  ></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="grid grid-rows-1 grid-cols-2 gap-8 m-6">
            <div class="card text-lg" v-for="item in data.tongueException">
              <div class="card__title mb-3 text-primary text-2xl font-bold">{{ item.title }}</div>
              <div class="card__content">
                <div class="flex my-6 justify-center">
                  <img class="flex-none w-2/4 object-scale-down" :src="item.cover" alt="舌象">
                  <div class="flex-none ml-8">
                    <div class="my-2 px-4 py-2 rounded-lg border border-primary-400 text-primary"
                         v-for="value in item.tags" :key="value"
                    >{{ value }}
                    </div>
                  </div>
                </div>
                <div class="my-2 text-grey" v-for="value in item.descriptions" :key="value">{{ value }}</div>
              </div>
            </div>
          </div>
          <div class="card m-6 text-lg" v-if="data.faceAnalysis?.['结果']">
            <div class="card__title mb-3 text-primary text-2xl font-bold">面象分析</div>
            <div class="card__content flex">
              <div class="flex-auto text-grey mt-6">{{ data.faceAnalysis?.[ '结果' ] }}</div>
              <div class="flex-none w-2/4 max-h-96 ml-4">
                <img class="size-full object-scale-down" :src="data.faceAnalysis?.['面象']" alt="面象">
              </div>
            </div>
          </div>
          <div class="card m-6 text-lg" v-if="data['中医证素']?.length">
            <div class="card__title mb-3 text-primary text-2xl font-bold">中医证素</div>
            <div class="card__content">
              <SyndromeChart
                :dataset="data['中医证素']"
                v-model:snapshot="data.factorItemRadarImg" @update:snapshot="upload()"
              />
              <table class="mt-8 mb-2 w-full table-auto border border-collapse  border-primary">
                <tbody>
                <tr v-for="item in data['中医证素']" :key="item.label">
                  <td class="py-4 px-2 border border-primary text-primary text-center" v-html="item.label"></td>
                  <td class="py-4 px-2 border border-primary text-grey" v-html="item.value"></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="card m-6 text-lg" v-if="data['中医证型']?.length">
            <div class="card__title mb-3 text-primary text-2xl font-bold">中医证型</div>
            <div class="card__content">
              <div class="my-6 text-grey" v-for="item in data['中医证型']" :key="item.label">
                <div class="my-2 text-primary" v-html="item.label"></div>
                <div style="text-indent: 2em;" v-html="item.value"></div>
              </div>
            </div>
          </div>
        </div>
      </van-skeleton>
      <NavBar class="flex-none"></NavBar>
    </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>
