<template>
  <view>
    <view v-if="loading" class="cv-skeleton" :class="{ animate: animate }" :style="{ justifyContent: flexType }">
      <!-- 轮播图 -->
      <view v-if="imgTitle" class="cv-skeleton-imgTitle"></view>
      <!-- 头像图 -->
      <block v-if="showAvatar && !imgTitle">
        <view
          class="cv-skeleton-avatar"
          v-for="(item, index) in nameRow"
          :key="index"
          :class="[avatarShape]"
          :style="{ width: avatarSize, height: avatarSize }"
        ></view>
      </block>
      <!-- 文字条 -->
      <view class="cv-skeleton-content" v-if="showTitle && !imgTitle">
        <view class="cv-skeleton-title" :style="{ width: titleWidth }"></view>
        <view class="cv-skeleton-rows">
          <view class="cv-skeleton-row-item" v-for="(item, index) in rowList" :key="index" :style="{ width: item.width }"></view>
        </view>
      </view>
    </view>
    <view v-else>
      <slot></slot>
    </view>
  </view>
</template>

<script>
const DEFAULT_ROW_WIDTH = '100%';
const DEFAULT_LAST_ROW_WIDTH = '60%';
/**
 * 骨架屏幕
 * 文档说明：https://ext.dcloud.net.cn/plugin?id=926
 */
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvSkeleton',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    imgTitle: {
      type: Boolean,
      default: false
    },
    nameRow: {
      type: Number,
      default: 1
    },
    flexType: {
      type: String,
      default: 'flex-start' // center	居中	√		space-between	两端对齐	√		space-around	子元素拉手分布	√		flex-start	居左		flex-end	居右
    },
    showAvatar: {
      type: Boolean,
      default: true
    },
    avatarSize: {
      type: String,
      default: '50px'
    },
    avatarShape: {
      type: String,
      default: 'round' // square | round
    },
    showTitle: {
      type: Boolean,
      default: false
    },
    titleWidth: {
      type: String,
      default: '40%'
    },
    row: {
      type: Number,
      default: 3
    },
    animate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  computed: {
    rowList() {
      let list = [];
      for (let i = 0; i < this.row; i++) {
        list.push({
          width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH
        });
      }
      return list;
    }
  }
};
</script>

<style>
.cv-skeleton {
  display: flex;
  padding: 8px;
  width: 100%;
}

.cv-skeleton-imgTitle {
  flex-wrap: wrap;
  background-color: #f2f3f5;
  margin: 0rpx auto;
  width: 95%;
  border-radius: 10px;
  height: 100px;
  display: block;
}

.cv-skeleton-avatar {
  flex-shrink: 0;
  background-color: #f2f3f5;
  margin-right: 8px;
}

.cv-skeleton-avatar.round {
  border-radius: 50%;
}

.cv-skeleton-content {
  width: 100%;
}

.cv-skeleton-title {
  background-color: #f2f3f5;
  height: 16px;
}

.cv-skeleton-title + .skeleton-rows {
  margin-top: 16px;
}

.cv-skeleton-rows {
}

.cv-skeleton-row-item {
  background-color: #f2f3f5;
  height: 32rpx;
}

.cv-skeleton-row-item:not(:first-child) {
  margin-top: 32rpx;
}

.cv-skeleton.animate {
  animation: cv-skeleton-blink 1.2s ease-in-out infinite;
}

@keyframes cv-skeleton-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}
</style>
