<template>
  <div>
    <div
      class="demo-box">
      <ui-button
        v-tooltip:hover="'字符串形式的传参'">
        测试指令点击试试
      </ui-button>
      <ui-button
        v-tooltip="{
          content: content,
          disabled: disabled,
        }"
        style="margin-left: 12px;">
        3秒后禁止指令
      </ui-button>
    </div>
    <div class="demo-box">
      <ui-button
        v-tooltip="{
          ref: saveRef,
          content: content,
          disabled: disabled,
        }">
        3秒后禁止指令, 5秒后更新内容
      </ui-button>
      <ui-button size="small">
        使用ref关闭
      </ui-button>
    </div>
  </div>
</template>
<script>
import isString from "lodash/isString"
import { Button } from "amumu-ui"

import PopperDirective from "amumu-ui/src/factory/popper-directive"
import "amumu-ui/src/components/popper/style"

// example
const TooltipComponent = {
  name: "tooltip-content", // 声明name  Vue Devtools 更容易调试
  props: {
    content: {
      type: String,
    },
  },
  mounted() {
    setTimeout(() => {
      this.$emit("loaded") // async 模式下你必须 emit 一个 loaded 的事件
    }, 3000)
  },
  methods: {
    clickHandler() {
      this.$emit("close")
    },
  },
  render(h) {
    return (
      <h3 style="padding: 12px;">
        {this.content} <span onClick={this.clickHandler}>x</span>
      </h3>
    )
  },
}

export default {
  components: {
    "ui-button": Button,
  },
  directives: {
    tooltip: PopperDirective(TooltipComponent, {
      async: true,
      trigger: "click",
      placement: "top",
      transformValue(value) {
        if (isString(value)) {
          return {
            content: value,
          }
        }
        return value
      },
    }),
  },
  data() {
    return {
      content: "3秒后发生变化",
      disabled: false,
    }
  },
  mounted() {
    setTimeout(() => {
      this.content = "内容是动态的"
    }, 5000)
    setTimeout(() => {
      this.disabled = true
    }, 3000)
  },
  methods: {
    saveRef(ref) {
      this.ref = ref
    },
  },
}
</script>
