<template>
  <el-skeleton :animated="animated" class="longjoe-skeleton card user-sel-none">
    <template #template>
      <LjHeader v-if="label" class="flx-1" :title="label" />
      <template v-if="type == 'function'">
        <div class="flx-start mt-16">
          <div class="flx-col mr-16" v-for="item in 3" :key="item">
            <el-skeleton-item variant="circle" style="width: 48px; height: 48px" />
            <el-skeleton-item variant="text" class="mt-8" />
          </div>
        </div>
      </template>
      <template v-else-if="type == 'dashboard'">
        <div class="flx-start mt-16">
          <div class="flx-col flx-1 mr-16" v-for="item in 4" :key="item">
            <el-skeleton-item variant="h3" style="width: 50%" />
            <el-skeleton-item variant="h1" class="mt-8" style="width: 80px" />
            <el-skeleton-item variant="text" class="mt-8" style="width: 80%" />
          </div>
        </div>
      </template>
      <template v-else-if="type == 'table'">
        <div class="flx-justify-between mt-16">
          <el-skeleton-item variant="text" class="mr-16" style="width: 20%" />
          <el-skeleton-item variant="text" class="mr-16" />
          <el-skeleton-item variant="text" style="width: 20%" />
        </div>
        <div class="flx-col mt-12">
          <div class="flx-justify-between">
            <el-skeleton-item variant="h1" v-for="item in 5" :key="item" style="width: 18%" />
          </div>
          <div class="flx-justify-between" v-for="item in 3" :key="item">
            <el-skeleton-item variant="text" class="mt-6" v-for="itm in 5" :key="itm" style="width: 18%" />
          </div>
        </div>
      </template>
      <template v-else-if="type == 'list'">
        <el-skeleton-item variant="text" class="mt-16" style="height: 64px" />
        <el-skeleton-item variant="text" class="mt-8" style="height: 64px" />
        <el-skeleton-item variant="text" class="mt-8" style="height: 64px" />
      </template>
      <template v-else>
        <el-skeleton-item variant="text" class="mt-16" />
        <el-skeleton-item variant="text" class="mt-8" style="width: 50%" />
        <div class="flx-justify-between mt-16">
          <el-skeleton-item variant="text" style="margin-right: 16px" />
          <el-skeleton-item variant="text" style="width: 20%" />
        </div>
      </template>
    </template>
  </el-skeleton>
</template>

<script setup lang="tsx" name="HomeLayoutSkeleton">
import LjHeader from "@/components/LjHeader/index.vue";

interface LayoutSkeletonProps {
  /**
   * @description 标题
   */
  label?: string;
  /**
   * @description 骨架屏自定义类型
   */
  type?: "function" | "dashboard" | "table" | "list" | "" | undefined;
  /**
   * @description 骨架屏是否显示动画
   */
  animated?: boolean;
}

withDefaults(defineProps<LayoutSkeletonProps>(), {
  label: "",
  animated: true,
  type: "function"
});
</script>

<style lang="scss" scoped>
.longjoe-skeleton {
  box-shadow: unset;
  // cursor: move;
  padding-top: 10px;

  & + & {
    margin-top: $space-b2;
  }

  .lj-define-header {
    // padding-bottom: $space-b2;
    border-bottom: 1px solid $color-text-dividers;
  }
}
</style>
