<template>
  <view>
    <view :class="[avatarClass, animationClass]" class="lx-skeleton" v-show="loading">
      <view :class="[avatarShapeClass, bannerClass]" :style="{ width: avatarSize, height: avatarSize }" class="avatar-class"></view>
      <view :style="{ width: rowWidth }" class="row">
        <view class="row-class lx-skeleton_title" v-if="title"></view>
        <view :key="index" class="row-class" v-for="(item, index) in row"></view>
      </view>
    </view>
    <slot v-if="!loading"></slot>
  </view>
</template>

<script setup>
import { computed } from 'vue';
/**
 * skeleton 骨架屏
 * @description 用于加载数据时占位图显示，跟Vant-UI用法相似，但比Vant-UI更灵活
 * @property {Boolean} loading 是否显示骨架屏，默认为true
 * @property {Number | String} row 段落行数，默认为3
 * @property {Boolean | Number} rowWidth 段落行宽度，默认为100%
 * @property {Boolean | String} title 是否显示标题，默认为false
 * @property {Boolean | String} banner 是否显示banner，默认为false
 * @property {Boolean | String} animate 是否开启动画，默认为false
 * @property {Boolean | String} avatar 头像位置
 * @property {String} avatarSize 头像大小
 * @property {String} avatarShape 头像形状，默认为circle
 *
 * */
const props = defineProps({
  loading: {
    type: Boolean,
    default: true,
  },
  row: {
    type: Number,
    default: 3,
  },
  title: {
    type: String,
    default: '',
  },
  avatar: {
    type: String,
    default: '',
  },
  animate: {
    type: Boolean,
    default: false,
  },
  avatarSize: { type: String },
  rowWidth: {
    type: String,
    default: '100%',
  },
  avatarShape: {
    type: String,
    default: 'circle',
  },
  banner: {
    type: Boolean,
    default: false,
  },
  // avator-size:{
  // 	type: String,
  // 	defualt: '32px'
  // }
});

const avatarClass = computed(() => {
  if (props.avatar === 'top') {
    return ['lx-skeleton_avator__top'];
  }
  if (props.avatar === 'left') {
    return ['lx-skeleton_avator__left'];
  } return '';
});
const animationClass = computed(() => [props.animate ? 'lx-skeleton_animation' : '']);
const slotClass = computed(() => [!props.loading ? 'show' : 'hide']);
const avatarShapeClass = computed(() => [props.avatarShape == 'round' ? 'lx-skeleton_avator__round' : '']);
const bannerClass = computed(() => [props.banner ? 'lx-skeleton_banner' : '']);
</script>

<style lang="scss" scoped>
.lx-skeleton {
  background-color: #fff;
  padding: 12px;
}

.lx-skeleton_avator__left {
  display: flex;
  width: 100%;
}

.lx-skeleton_avator__left .avatar-class,
.lx-skeleton_avator__top .avatar-class {
  background-color: #f2f3f5;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.lx-skeleton_avator__left .avatar-class.lx-skeleton_avator__round,
.lx-skeleton_avator__top .avatar-class.lx-skeleton_avator__round {
  border-radius: 0;
  width: 32px;
  height: 32px;
}

.lx-skeleton_avator__left .avatar-class {
  margin-right: 16px;
}

.lx-skeleton_avator__top .avatar-class {
  margin: 0 auto 12px auto;
}

.row-class {
  width: 100%;
  height: 16px;
  background-color: #f2f3f5;
  margin-top: 12px;
}

.row-class:first-child {
  margin-top: 0;
}

.row {
  flex: 1;
}

.lx-skeleton_avator__left .row {
  width: calc(100% - 48px);
}

.row-class:last-child {
  width: 60%;
}

.lx-skeleton_animation .row-class {
  animation-duration: 1.5s;
  animation-name: blink;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes blink {
  50% {
    opacity: 0.6;
  }
}

.lx-skeleton_title {
  width: 40%;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.lx-skeleton .lx-skeleton_banner {
  width: 92%;
  margin: 10px auto;
  height: 64px;
  border-radius: 0;
  background-color: #f2f3f5;
}
</style>
