<template>
  <d2-container>
    <article class="alert-demo">
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}alert`"
          target="_blank"
        >
          <h3>Alert 警告</h3>
        </ai-link>
      </header>

      <div>
        <ai-alert
          title="成功提示的文案"
          type="success"
        ></ai-alert>
        <ai-alert
          title="成功提示的文案"
          type="success"
          effect="dark"
        ></ai-alert>
        <ai-alert
          title="自定义 close-text"
          type="success"
          close-text="知道了"
        ></ai-alert>
        <ai-alert
          title="成功提示的文案"
          type="success"
          description="文字说明文字说明文字说明文字说明文字说明文字说明"
          show-icon
        ></ai-alert>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}loading#zheng-ye-jia-zai`"
          target="_blank"
        >
          <h3>Loading 加载</h3>
        </ai-link>
      </header>

      <ai-button
        type="primary"
        @click="openFullScreen"
        v-loading.fullscreen.lock="fullscreenLoading"
      >
        查看指令方式加载
      </ai-button>
      <ai-button
        type="primary"
        @click="openFullScreen"
      >
        查看服务方式加载
      </ai-button>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}message#ke-guan-bi`"
          target="_blank"
        >
          <h3>Message 消息提示</h3>
        </ai-link>
      </header>

      <div>
        <ai-button
          :plain="true"
          @click="openMessage1"
        >消息</ai-button>
        <ai-button
          :plain="true"
          @click="openMessage2"
        >成功</ai-button>
        <ai-button
          :plain="true"
          @click="openMessage3"
        >警告</ai-button>
        <ai-button
          :plain="true"
          @click="openMessage4"
        >错误</ai-button>
      </div>
    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}message-box`"
          target="_blank"
        >
          <h3>MessageBox 弹框</h3>
        </ai-link>
      </header>
      <div>
        <ai-button
          type="text"
          @click="openMessageBox1"
        >点击打开确认消息 Message Box</ai-button>
        <ai-button
          type="text"
          @click="openMessageBox2"
        >点击打开提交内容 Message Box</ai-button>
      </div>

    </article>

    <article>
      <header>
        <ai-link
          :underline="false"
          :href="`${aiVueUrl}notification#dai-you-qing-xiang-xing`"
          target="_blank"
        >
          <h3>Notification 通知</h3>
        </ai-link>
      </header>

      <ai-button
        plain
        @click="openNotification1"
      >成功</ai-button>
      <ai-button
        plain
        @click="openNotification2"
      >警告</ai-button>
      <ai-button
        plain
        @click="openNotification3"
      >消息</ai-button>
      <ai-button
        plain
        @click="openNotification4"
      >错误</ai-button>
    </article>
  </d2-container>
</template>

<script>
export default {
  name: "Notice",
  components: {},
  data() {
    return {
      aiVueUrl:
        process.env.VUE_APP_AIVUE_URL + process.env.VUE_APP_AIVUE_PATH,
      // loading 加载
      fullscreenLoading: false
    };
  },
  mounted() {},
  methods: {
    // 打开loading加载
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "ai-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
    // 消息
    openMessage1() {
      this.$message("这是一条消息提示");
    },
    // 成功消息
    openMessage2() {
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success"
      });
    },
    // 警告消息
    openMessage3() {
      this.$message({
        message: "警告哦，这是一条警告消息",
        type: "warning"
      });
    },
    // 错误消息
    openMessage4() {
      this.$message.error("错了哦，这是一条错误消息");
    },
    // MessageBox内容
    openMessageBox1() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    openMessageBox2() {
      this.$prompt("请输入邮箱", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: "邮箱格式不正确"
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的邮箱是: " + value
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    // Notification
    openNotification1() {
      this.$notify({
        title: "成功",
        message: "这是一条成功的提示消息",
        type: "success"
      });
    },

    openNotification2() {
      this.$notify({
        title: "警告",
        message: "这是一条警告的提示消息",
        type: "warning"
      });
    },

    openNotification3() {
      this.$notify.info({
        title: "消息",
        message: "这是一条消息的提示消息"
      });
    },

    openNotification4() {
      this.$notify.error({
        title: "错误",
        message: "这是一条错误的提示消息"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin margin($direction: right) {
  @if ($direction == right) {
    div,
    a,
    i {
      margin-right: 10px;
    }
  } @else {
    div,
    a,
    i {
      margin-bottom: 10px;
    }
  }
}
.alert-demo {
  width: 480px;
  @include margin(bottom);
}
.Message-demo {
  @include margin(right);
}
.container-item {
  display: flex;
  align-items: center;
  i,
  a {
    margin-right: 10px;
  }
}
</style>
