<script setup lang="ts">
import {
  Col as VanCol,
  Icon as VanIcon,
  Row as VanRow,
  Skeleton as VanSkeleton,
} from 'vant'

const { title, describe, extra, loading, statusBar } = defineProps<{
  title?: string
  describe?: string
  extra?: string
  loading?: boolean
  statusBar?: { icon: string, color: string }
}>()
</script>

<template>
  <div class="main">
    <VanSkeleton title :row="20" :loading="loading" class="skeleton-box">
      <VanIcon
        v-if="statusBar"
        :color="statusBar.color"
        :name="statusBar.icon"
        class="status-icon animate__animated animate__rotateInDownRight"
        size="70"
      />
      <VanRow class="detail-header">
        <VanCol span="16">
          <slot name="detailHeaderTitle">
            <div class="detail-header-title">
              {{ title }}
            </div>
          </slot>
          <slot name="detailHeaderDescribe">
            <div class="detail-header-describe">
              {{ describe }}
            </div>
          </slot>
        </VanCol>
        <VanCol span="8">
          <span class="detail-header-extra">
            {{ extra }}
          </span>
        </VanCol>
      </VanRow>
      <div class="detail-content-box">
        <slot name="detailContent" />
      </div>
      <slot name="extraAction" />
    </VanSkeleton>
  </div>
</template>

<style scoped lang="less">
.main {
  background-color: #f7f8fa;
  overflow-y: auto;
  height: 92vh;
  .skeleton-box {
    margin-top: 1vh;
  }
  .status-icon {
    opacity: 0.5;
    position: absolute;
    top: 13vh;
    right: 3vh;
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  .status-icon:before {
    opacity: 0.5;
    transform: rotate(-20deg);
  }
  .status-icon:after {
    opacity: 0.5;
    transform: rotate(-20deg);
  }
  .detail-header {
    margin-top: 1vh;
    padding: 1vh 2vh 1vh 2vh;
    background-color: white;
    .detail-header-title {
      font-size: 15px;
      margin-bottom: 5px;
    }
    .detail-header-describe {
      font-size: 13px;
      color: var(--van-text-color-2);
    }
    .detail-header-extra {
      width: 100%;
      display: inline-block;
      text-align: right;
      font-size: 28px;
      color: #1989fa;
      font-weight: bold;
    }
  }
  .detail-content-box {
    background-color: white;
    margin-top: 1vh;
    padding: 1vh 2vh 2vh 2vh;
  }
}
</style>
