<template>
  <div>
    <section class="demo-section">
      <h4>基础用法</h4>
      <div>
        <x-poptip
          ref="poptip1"
          placement="top-start"
          title="标题"
          :width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
        </x-poptip>

        <x-poptip
          ref="poptip2"
          placement="bottom-start"
          :width="200"
          trigger="click"
          :visible-arrow="false"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
        </x-poptip>

        <x-button v-poptip:poptip1>hover 激活</x-button>
        <x-button v-poptip:poptip2>click 激活</x-button>

        <x-poptip
          placement="right"
          title="标题"
          :width="200"
          trigger="focus"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
          <x-button slot="reference">focus 激活</x-button>
          <span slot="title">我是title</span>
        </x-poptip>
        
        <x-poptip
          placement="right"
          title="标题"
          :width="200"
          trigger="mousedown"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
          <x-button slot="reference">mousedown 激活</x-button>
          <span slot="title">我是title</span>
        </x-poptip>

        <x-poptip
          placement="right"
          title="标题"
          :width="200"
          confirm
          trigger="manual"
          :ok-text="'yes'"
          :cancel-text="'no'"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
          v-model="visible4">
          <x-button slot="reference" @click="visible4 = !visible4">manual 激活</x-button>
        </x-poptip>

        <x-poptip
          placement="left-start"
          title="标题"
          :width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
          <x-button slot="reference">left</x-button>
        </x-poptip>
      </div>
    </section>
    <section class="demo-section">
      <h4>嵌套操作</h4>
      <div>
        <x-poptip
          ref="poptip5"
          placement="bottom-start"
          :width="180"
          v-model="visible2">
          <p>这是一段内容这是一段内容确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <x-button type="text" @click="visible2 = false">取消</x-button>
            <x-button type="primary" @click="visible2 = false">确定</x-button>
          </div>
        </x-poptip>
        <x-button v-poptip:poptip5>删除</x-button>
      </div>

      <x-poptip
          placement="top-start" theme="dark"
          title="标题"
          :width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
          <x-button slot="reference">暗黑主题</x-button>
        </x-poptip>
    </section>

    <section class="demo-section">
      <h4>自定义元素</h4>
      <div>
        <x-poptip placement="top-start" :width="200" position-fixed>
          <div @click="type = 2" class="box" v-if="type===1">内容</div>
          <div v-if="type === 2"><i class="ab">我是绝对定位</i></div>
          <x-button slot="reference">自定义</x-button>
        </x-poptip>
      </div>
    </section>

    <div>
      <x-poptip
        confirm
        title="提示标题"
        trigger="click">
        <x-button type="ghost" slot="reference">confirm</x-button>
      </x-poptip>
    </div>
  </div>
</template>

<script>
  import { xButton } from '../../vue-button/src'
  import { xPoptip } from '../src'

  export default {
    components: { xButton, xPoptip },
    data () {
      return {
        visible2: false,
        visible3: false,
        visible4: false,

        type: 1
      }
    },
    methods: {
      click () {
        console.log('d')
      }
    }
  }
</script>

<style lang="scss">
.box {
  position: relative;
  height: 200px;
  .ab {
    position: absolute;
  }
}
</style>
