<template>
  <div class="small-components-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-divider content-position="left">小组件</el-divider>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header">
            <span>snow</span>
          </div>
          <vab-snow></vab-snow>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header">
            <span>profile</span>
            <el-button
              style="float: right; padding: 3px 0;"
              type="text"
              @click="handleProfile"
              >重载
            </el-button>
          </div>
          <vab-profile
            v-if="profileShow"
            avatar="https://picsum.photos/80/80?random=2"
            user-name="chuzhixin"
          ></vab-profile>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <div slot="header">
            <span>charge</span>
          </div>
          <vab-charge :start-val="startVal" :end-val="endVal"></vab-charge>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VabSnow from "@/components/VabSnow";
import VabProfile from "@/components/VabProfile";
import VabCharge from "@/components/VabCharge";

export default {
  name: "Sticky",
  components: {
    VabSnow,
    VabProfile,
    VabCharge,
  },
  data() {
    return {
      profileShow: true,
      faultTextShow: true,
      solidTextShow: true,
      startVal: 0,
      endVal: 20,
      timeInterval: null,
    };
  },
  mounted() {
    this.handleProfile();
    this.handleSolidText();
    this.timeInterval = setInterval(() => {
      if (this.endVal < 100) {
        this.startVal = this.endVal;
        this.endVal++;
      }
    }, 5000);
  },
  beforeDestroy() {
    if (this.clearInterval) {
      clearInterval(this.timeInterval);
    }
  },
  methods: {
    handleProfile() {
      this.profileShow = false;
      setTimeout(() => {
        this.profileShow = true;
      });
    },
    handleSolidText() {
      this.solidTextShow = false;
      setTimeout(() => {
        this.solidTextShow = true;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.small-components-container {
  ::v-deep {
    .el-card__body {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
      height: 430px;
    }
  }
}
</style>