<!-- 目前有骨架屏有二种样式
    1 卡片（type: "card"），卡片标题为固定，下面内容可以配置条数（通过bottomLength），bottomFlag为true，最后一行宽度60%，false时宽度为100%。
    卡片包括两种样式，我的异常还有异常记录，异常记录下面多一行左右结构的(cardId为1代表我的异常卡片结构，为2代表异常记录结构)
    2 详情list（type: "detailList"），detailLength为在一个卡片中的骨架个数，detailCardLength连续相同骨架的卡片个数。
 -->
<template>
  <div class="meta-skeleton-wrap">
    <div v-if="skeletonShow" style="margin-top: 1.2vh">
      <div v-for="list in skeletonList" :key="list.id">
        <div v-if="list.type == 'card'">
          <meta-card v-for="(card,index) in list.cardLehght" :key="index" class="card-list">
            <div class="clearfix card-top">
              <van-skeleton :row="2" class="fl top-left-width"> </van-skeleton>
              <van-skeleton :row="2" class="fl top-center-width"></van-skeleton>
              <van-skeleton :row="2" class="fr top-right-width"></van-skeleton>
            </div>
            <van-skeleton
              v-if="!list.bottomFlag"
              class="list card-list"
              :class="list.bottomFlag ? 'list-hide' : ''"
              :row="list.bottomLength + 1"
            >
            </van-skeleton>
            <van-skeleton
              class="list card-list"
              :class="list.bottomFlag ? 'list-hide' : ''"
              v-if="list.bottomFlag"
              :row="list.bottomLength"
            >
            </van-skeleton>
            <div class="clearfix card-list" v-if="list.addFlag">
              <van-skeleton :row="2" class="fl bottom-left-width"> </van-skeleton>
              <van-skeleton :row="2" class="fr bottom-right-width"></van-skeleton>
            </div>
          </meta-card>
        </div>
        <div v-if="list.type == 'detailList'">
          <meta-card class="card-list" v-for="detailList in list.detailCardLength" :key="detailList">
            <div v-for="(detail,index) in list.detailLength" :key="detail" class="clearfix" :class="index != 0 ? 'card-list' : ''">
                <van-skeleton
                :row="2"
                class="fl detail-left"
                >
                </van-skeleton>
                <van-skeleton
                :row="2"
                class="fr detail-right"
                >
                </van-skeleton>
            </div>
          </meta-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MetaSkeleton",
  props: {
    skeletonShow: {
      type: Boolean,
      default: true,
    },
    skeletonList: {
      type: Array,
      dafault: [],
    },
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.meta-skeleton-wrap {
  :deep .van-skeleton__row:last-child {
    display: none;
  }
  :deep .van-skeleton__row {
    background: #F0F0F0;
    border-radius: 1.6vw; //设置圆角
  }
  .card-list {
    margin-top: 1.2vh;
  }
  .list.list-hide {
    :deep .van-skeleton__row:last-child {
      display: block;
    }
  }
  .card-top {
    border-bottom: 0.5vw solid #E5E5E5;
    padding-bottom: 0.8vh;
    :deep .van-skeleton__row {
      height: 2.7vh;
    }
    .top-left-width {
      width: 10vw;
      height: 3vh;
      margin-left: -4vw;
      :deep .van-skeleton__row {
        border-top-left-radius: 0; //设置右上角
        border-bottom-left-radius: 0; //设置左下角
      }
    }
    .top-center-width {
      width: calc(100% - 40vw);
      margin-left: 4vw;
    }
    .top-right-width {
      width: 20vw;
    }
  }
  .detail-left {
    width: 20vw
  }
  .detail-right {
    width: 30vw;
  }
  .bottom-left-width {
    width: 30vw;
    height: 2.7vh;
  }
  .bottom-right-width {
    width: 25vw;
    height: 2.7vh;
  }
}
</style>