<template>
  <div class="demo-dialog-prompt">
    <div class="item">
      <ui-button @click="handleAlert">
        输入邮箱
      </ui-button>
    </div>
    <div class="item">
      <ui-button @click="handleValidator">
        设置密码
      </ui-button>
    </div>
  </div>
</template>

<script>
import { Button } from "amumu-ui"
import { dialog, message } from "amumu-ui/src/factory"

export default {
  components: {
    "ui-button": Button,
  },
  methods: {
    handleAlert() {
      dialog
        .prompt({
          title: "提示",
          message: "请输入邮箱",
          fieldProps: {
            rules: [
              {
                required: true,
                message: "邮箱格式不正确",
                pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
              },
            ],
          },
        })
        .then(({ value }) => {
          message.success(`邮箱账户：${value} 提交成功`)
        })
    },
    handleValidator() {
      dialog
        .prompt({
          title: "提示",
          inputProps: {
            type: "password",
            placeholder: "请输入八位数密码",
          },
          fieldProps: {
            rules: [
              {
                required: true,
                validator: (rule, value, callback) => {
                  if (value.length !== 8) {
                    callback("请输入八位数密码")
                  }
                  callback()
                },
              },
            ],
          },
        })
        .then(() => {
          message.success("设置成功")
        })
    },
  },
}
</script>

<style lang="scss">
.demo-dialog-prompt {
  .item {
    margin-bottom: 10px;
  }
}
</style>
