<template>
  <div class="dsk-skeleton-outer-container">
    <el-skeleton :animated="true" class="dsk-skeleton-inner-container">
      <template slot="template">
        <template v-for="item of count">
          <div :key="item">
            <el-skeleton-item variant="text" style="width: 60%;" />
            <el-skeleton-item variant="text" style="width: 100%;" />
            <el-skeleton-item variant="text" style="width: 100%;" />
            <el-skeleton-item variant="text" style="width: 100%;" />
          </div>
        </template>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
export default {
  name: 'dskSkeleton',
  data() {
    return {
      count: 0
    };
  },
  created() {
    this.getSkeletonCount();
  },
  methods: {
    async getSkeletonCount() {
      try {
        await this.$nextTick();
        const skeletonContainer = this.$el.querySelector(".dsk-skeleton-inner-container");
        const height = skeletonContainer.offsetHeight;
        // 160高度为一组
        const group = Math.round(height / 160);
        this.count = group;
      } catch (error) {

      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dsk-skeleton-outer-container {
  padding: 0px 16px;
  background: #fff;
  z-index: 999;

  .dsk-skeleton-inner-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.el-skeleton__item {
  height: 20px;
  border-radius: 0;
  margin-top: 16px;
  background: #f0f0f0;
}

.el-skeleton {
  .el-skeleton__item:last-of-type {
    /* margin-bottom: 16px; */
  }
}
</style>
