<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlLoading 加载</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基本使用</Title>
      <WlButton @onClick="onClick('base')" type="primary">打开弹窗</WlButton>
      <Title>提示文字修改</Title>
      <WlButton @onClick="onClick('tips')" type="primary">打开弹窗</WlButton>
      <Title>上传进度</Title>
      <WlButton @onClick="onClick('rate')" type="primary">打开弹窗</WlButton>
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "WlLoading-Example",
  components: { Title, Container },
  methods: {
    onClick(type) {
      if (type === "base") {
        this.$loading({ type: "show" });
        setTimeout(() => {
          this.$loading({ type: "hide" });
        }, 2000);
      } else if (type === "tips") {
        this.$loading({ type: "show", tips: "提示内容修改" });
        setTimeout(() => {
          this.$loading({ type: "hide" });
        }, 2000);
      } else if (type === "rate") {
        let percent = 0;
        this.$loading({ type: "show", rate: 0, needPercent: true });
        setInterval(() => {
          this.$loading({ type: "changePercent", percent: percent++ });
        });
        setTimeout(() => {
          this.$loading({
            type: "hide",
          });
        }, 2000);
      }
    },
  },
};
</script>
