<template>
  <div class="demo-page">
    <h2>Alerts</h2>
    <h3>Standard</h3>
    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Neutral
          </td>
          <td>
            <ElAlert
              title="Info alert"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Success
          </td>
          <td>
            <ElAlert
              title="Success alert"
              type="success"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Warning
          </td>
          <td>
            <ElAlert
              title="Warning alert"
              type="warning"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Error
          </td>
          <td>
            <ElAlert
              title="Error alert"
              type="error"
            />
          </td>
        </tr>
      </tbody>
    </table>

    <h3>With icons</h3>

    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Info
          </td>
          <td>
            <ElAlert
              show-icon
              title="Info alert"
              type="info"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Success
          </td>
          <td>
            <ElAlert
              show-icon
              title="Success alert"
              type="success"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Warning
          </td>
          <td>
            <ElAlert
              show-icon
              title="Warning alert"
              type="warning"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Error
          </td>
          <td>
            <ElAlert
              show-icon
              title="Error alert"
              type="error"
            />
          </td>
        </tr>
      </tbody>
    </table>

    <h3>With a contact support CTA</h3>

    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Info
          </td>
          <td>
            <ElAlert
              type="info"
            >
              Error alert. Please <TfCtaEmailSupport type="primary" />.
            </ElAlert>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Success
          </td>
          <td>
            <ElAlert
              type="success"
            >
              Error alert. Please <TfCtaEmailSupport type="success" />.
            </ElAlert>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Warning
          </td>
          <td>
            <ElAlert
              type="warning"
            >
              Error alert. Please <TfCtaEmailSupport type="warning" />.
            </ElAlert>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Error
          </td>
          <td>
            <ElAlert
              type="error"
            >
              Error alert. Please <TfCtaEmailSupport type="danger" />.
            </ElAlert>
          </td>
        </tr>
      </tbody>
    </table>

    <h3>With descriptions</h3>

    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Info
          </td>
          <td>
            <ElAlert
              title="Info alert"
              type="info"
              description="This is a description."
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            success
          </td>
          <td>
            <ElAlert
              title="Success alert"
              type="success"
              description="This is a description."
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Warning
          </td>
          <td>
            <ElAlert
              title="Warning alert"
              description="This is a description."
              type="warning"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Error
          </td>
          <td>
            <ElAlert
              title="Error alert"
              description="This is a description."
              type="error"
            />
          </td>
        </tr>
      </tbody>
    </table>

    <h3>With icons and descriptions</h3>

    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Info
          </td>
          <td>
            <ElAlert
              show-icon
              title="Info alert"
              type="info"
              description="This is a description."
              :closable="false"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            success
          </td>
          <td>
            <ElAlert
              show-icon
              title="Success alert"
              type="success"
              description="This is a description."
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Warning
          </td>
          <td>
            <ElAlert
              show-icon
              title="Warning alert"
              description="This is a description."
              type="warning"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Error
          </td>
          <td>
            <ElAlert
              show-icon
              title="Error alert"
              description="This is a description."
              type="error"
            />
          </td>
        </tr>
      </tbody>
    </table>

    <h4>Simple Alerts</h4>
    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Success
          </td>
          <td>
            <ElAlert
              class="alert-simple"
              title="Alert"
              type="success"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Warning
          </td>
          <td>
            <ElAlert
              class="alert-simple"
              title="Warning alert"
              type="warning"
            />
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Success
          </td>
          <td>
            <ElAlert
              class="alert-simple"
              title="Error alert"
              type="error"
            />
          </td>
        </tr>
      </tbody>
    </table>

    <h2>Messageboxes</h2>
    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Success
          </td>
          <td>
            <TfButton
              :plain="true"
              @click="alertOpenSuccess"
            >
              Trigger Success Messagebox
            </TfButton>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Warning
          </td>
          <td>
            <TfButton
              :plain="true"
              @click="alertOpenWarning"
            >
              Trigger Warning Messagebox
            </TfButton>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Message
          </td>
          <td>
            <TfButton
              :plain="true"
              @click="alertOpenMessage"
            >
              Trigger Message Messagebox
            </TfButton>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Error
          </td>
          <td>
            <TfButton
              :plain="true"
              @click="alertOpenError"
            >
              Trigger Error Messagebox
            </TfButton>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'MessagesboxesDialogs',
    methods: {
      /**
       * Trigger Message Messagebox
       */
      alertOpenMessage() {
        this.$message({
          showClose: true,
          message: 'This is a message.',
        });
      },
      /**
       * Trigger Success Messagebox
       */
      alertOpenSuccess() {
        this.$message({
          showClose: true,
          message: 'Congrats, this is a success message.',
          type: 'success',
        });
      },
      /**
       * Trigger Warning Messagebox
       */
      alertOpenWarning() {
        this.$message({
          showClose: true,
          message: 'Warning, this is a warning message.',
          type: 'warning',
        });
      },
      /**
       * Trigger Error Messagebox
       */
      alertOpenError() {
        this.$message.error({
          showClose: true,
          message: 'Oops, this is a error message.',
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .demo-page {
    max-width: 600px;
  }

  .demo-page .el-alert + .el-alert {
    margin-top: 20px;
  }
</style>
