<template>
  <div class="demo-page">
    <h2>Loading</h2>
    <h3>Default</h3>
    <div
      v-loading.body="loading"
      class="loader-demo"
    >
      Content
    </div>
    <h3>With text</h3>
    <div
      v-loading.body="loading"
      element-loading-text="Loading..."
      class="loader-demo"
    >
      Content
    </div>

    <h3>Fullscreen Loading</h3>
    <TfButton
      v-loading.fullscreen.lock="fullscreenLoading"
      type="primary"
      @click="openFullScreen"
    >
      Full screen loading for 3 seconds
    </TfButton>

    <hr>

    <h2>Copy Link Container</h2>
    <CopyLinkContainer
      text="Acme Corporation RFP share link"
      link="carrierportal.threeflow.com/project/1234"
    />

    <hr>

    <h2>Modal (ElDialog)</h2>
    <TfButton
      type="primary"
      @click="dialogVisible = true"
    >
      Open Modal
    </TfButton>

    <ElDialog
      title="Example Modal"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>This is some sample modal text. Nothing fancy, just a few words
        to fill the space. Lorem ipsum dolor ezreal lux et azeroth arda hyrule
        mako gryffindor infinitus.</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <TfButton
          type="secondary"
          @click="dialogVisible = false"
        >Cancel</TfButton>
        <TfButton
          type="primary"
          @click="dialogVisible = false"
        >Confirm</TfButton>
      </span>
    </ElDialog>
  </div>
</template>

<script>
  export default {
    name: 'Misc',
    data: () => ({
      loading: true,
      fullscreenLoading: false,
      dialogVisible: false,
    }),
    methods: {
      /**
       * Show a Fullscreen loading indicator
       */
      openFullScreen() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 3000);
      },
    },
  };
</script>

<style>
  .loader-demo {
    min-height: 69px;
    background: #eee;
  }
</style>
