<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">WlNotice 提示框</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基本使用</Title>
      <WlButton @onClick="onClick('base')" type="primary">打开弹窗</WlButton>
      <Title>信息提示</Title>
      <WlButton @onClick="onClick('alert')" type="primary">打开弹窗</WlButton>
      <Title>警告提示</Title>
      <WlButton @onClick="onClick('warning')" type="primary">打开弹窗</WlButton>
      <Title>错误提示</Title>
      <WlButton @onClick="onClick('error')" type="primary">打开弹窗</WlButton>
      <Title>修改弹窗停留时长</Title>
      <WlButton @onClick="onClick('time')" type="primary">打开弹窗</WlButton>
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
import WlNotice from "@packages/components/Common/WlNotice";
export default {
  name: "WlNotice-Example",
  components: { Title, Container },
  methods: {
    onClick(type) {
      if (type === "base") {
        WlNotice({ message: "成功提示", type: "success" });
      } else if (type === "alert") {
        WlNotice({ message: "信息提示", type: "alert" });
      } else if (type === "warning") {
        WlNotice({ message: "警告提示", type: "warning" });
      } else if (type === "error") {
        WlNotice({ message: "错误提示", type: "error" });
      } else if (type === "time") {
        WlNotice({ type: "success", duration: 5000 });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.pic-wrap {
  width: 100%;
}
.pic-tx-wrap {
  width: j(100);
  height: j(100);
}
</style>
