/****************************************************************************
所属系统: 组件库 所属模块: 操场 - 按钮组件 创建时间: 2020年3月10日10:50:28
维护人: 陈泽光 *┌──────────────────────────────────────────────────────────────┐
*│　此技术信息为本公司机密信息，未经本公司书面同意禁止向第三方披露．│
*│　版权所有：杰人软件(深圳)有限公司　 　　　　　　　　　　 │
*└──────────────────────────────────────────────────────────────┘
***************************************************************************/

<template>
  <div class="j-container">
    <div class="j-pt-50">
      <jr-button @click="handleLoadingStep()">全局loading</jr-button>
      <jr-button class="j-ml-40" @click="handleLoadingStep(true)"
        >全局白屏loading</jr-button
      >
      <jr-button @click="visible = !visible" type="plain" class="j-ml-40"
        >开关局部loading</jr-button
      >
      <jr-button @click="isLoading = !isLoading" type="plain" class="j-ml-40"
        >开关指令局部loading</jr-button
      >
      <jr-button @click="isLoading2 = !isLoading2" type="plain" class="j-ml-40"
        >开关指令局部loading2</jr-button
      >
      <div class="test-box">
        <div class="content">
          一般局部loading
          <jr-loading-petal :visible="visible"></jr-loading-petal>
        </div>

        <div v-loading="isLoading" class="content">
          指令局部loading
        </div>

        <div v-loading="isLoading2" class="content">
          指令局部loading2
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loadingView",
  label: "loading",
  isDev: true,
  data() {
    return {
      visible: false,
      isLoading: false,
      isLoading2: false
    };
  },
  methods: {
    handleLoadingStep(whiteMask) {
      this.$loading(true, whiteMask);
      // 测试开启的时候连续调用会不会影响到白屏的效果
      this.$loading();
      this.$loading();
      this.$loading();
      setTimeout(() => {
        this.$loading(false);
      }, 2000);
    },

    handleLoadingPetal() {}
  }
};
</script>

<style lang="scss" scoped>
.test-box {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  .content {
    width: 30%;
    height: 300px;
    border: solid 1px #dedede;
    border-radius: 4px;
    margin-top: 10px;
  }
}
</style>