<template>
  <div class="demo-page">
    <h1>Buttons</h1>
    <p>
      <strong>
        You shouldn't be using these anymore. Use
        <RouterLink
          :to="{ name: 'Tooltips2' }"
          v-text="'Tooltips v2'"
        /> instead
      </strong>
    </p>

    <h2>Large</h2>

    <table class="demo-table">
      <tbody>
        <tr>
          <td class="demo-label">
            Dark
          </td>
          <td>
            <ElTooltip
              content="Top center"
              placement="top"
            >
              <TfButton>Dark</TfButton>
            </ElTooltip>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Light
          </td>
          <td>
            <ElTooltip
              content="Bottom center"
              placement="bottom"
              effect="light"
            >
              <TfButton>Light</TfButton>
            </ElTooltip>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Hover to activate
          </td>
          <td>
            <ElPopover
              ref="popover1"
              placement="top-start"
              title="Title"
              width="200"
              trigger="hover"
              content="this is content, this is content, this is content"
            />
            <TfButton v-popover:popover1>
              Hover
            </TfButton>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Click to Activate
          </td>
          <td>
            <ElPopover
              ref="popover2"
              placement="bottom"
              title="Title"
              width="200"
              trigger="click"
              content="this is content, this is content, this is content"
            />

            <TfButton v-popover:popover2>
              Click
            </TfButton>
          </td>
        </tr>
        <tr>
          <td class="demo-label">
            Tooltip modal
          </td>
          <td>
            <ElPopover
              ref="popover5"
              v-model="visible2"
              placement="top"
              width="200"
            >
              <p>Are you sure to delete this?</p>
              <div style="text-align: right; margin: 0">
                <TfButton
                  type="secondary"
                  @click="visible2 = false"
                >
                  cancel
                </TfButton>
                <TfButton
                  type="primary"
                  size="mini"
                  @click="visible2 = false"
                >
                  confirm
                </TfButton>
              </div>
            </ElPopover>
            <TfButton v-popover:popover5>
              Delete
            </TfButton>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'Tooltips',
    data: () => ({ visible2: false }),
  };
</script>
