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

<template>
  <div class="content">
    <h2 class="j-mb-20">消息提示组件</h2>

    <!-- 常规按钮高度 -->
    <div class="left">
      <p class="nav">常规提示</p>
      <jr-button @click="tips(1)">提示</jr-button>

      <p class="nav">位置</p>
      <jr-button @click="tips(2)">顶部显示</jr-button>

      <p class="nav">类型</p>
      <jr-button @click="tips(3)" type="plain">警示</jr-button>
      <jr-button @click="tips(4)" class="j-ml-10" type="plain">提示</jr-button>

      <p class="nav">回调</p>
      <jr-button @click="tips(6)" type="plain">带回调</jr-button>

      <p class="nav">返回Promise对象</p>
      <jr-button @click="tips(5)">返回Promise</jr-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "messageView",
  label: "message消息提示",
  methods: {
    tips(type) {
      switch (type) {
        case 1:
          this.$msg("提交成功");
          break;
        case 2:
          this.$msg("提交成功", 1500, () => {}, {
            align: "top",
          });
          break;
        case 3:
          this.$msg("非法提交", 1500, () => {}, {
            color: "dange",
          });
          break;
        case 4:
          this.$msg("自动保存成功", 1500, () => {}, {
            color: "warn",
          });
          break;
        case 5:
          this.promise();
          break;
        case 6:
          this.$msg("准备回调", 1500, () => {
            this.$msg("已回调", 1500);
          }, {
            color: "warn",
          });
          break;
      }
    },
    async promise() {
      await this.$msg("Loading... 敌军还有3秒到达战场", 1000);
      await this.$msg("6", 500);
      await this.$msg("5", 500);
      await this.$msg("4", 500, null, { color: "warn" });
      await this.$msg("3", 500, null, { color: "warn" });
      await this.$msg("2", 500, null, { color: "dange" });
      await this.$msg("1", 500, null, { color: "dange" });
      await this.$msg("await 1s 后 取代callback回调", 1000);
      await this.$msg("亚索 Q斩钢闪.", 800);
      await this.$msg("亚索 W风之障壁..", 800);
      await this.$msg("亚索 EQ二连，打的漂亮...", 800);
      await this.$msg("提莫被击飞.", 200);
      await this.$msg("提莫被击飞..", 200);
      await this.$msg("提莫被击飞...", 200);
      await this.$msg("提莫被击飞....", 200);
      await this.$msg("提莫被击飞.....", 200);
      await this.$msg("提莫被击飞......", 200);
      await this.$msg("亚索 R狂风绝息斩...", 800);
      await this.$msg("亚索 R狂风绝息斩1刀.", 800);
      await this.$msg("亚索 R狂风绝息斩2刀..", 800);
      await this.$msg("亚索 R狂风绝息斩3刀...", 800);
      await this.$msg("打的漂亮.", 200);
      await this.$msg("打的漂亮..", 200);
      await this.$msg("打的漂亮...", 200);
      await this.$msg("victory", 1000);
    }
  },
};
</script>

<style lang="scss">
@import "./message.scss";
</style>