/**
this.tooltip({
        target: this.$refs.btn.$el,
        msg: '信息内容',
        handler: (os) => {
          console.log(os)
        }
      })
*/
<template>
  <div v-click-outside="onOutClick"
       @mouseenter="handleMouseenter"
       @mouseleave="handleMouseleave">
    <slot></slot>
    <p v-if="!options.list || options.list.length===0"
       :style="msgStyle()">
      {{ options.msg }}</p>
    <ul class="tip-list"
        v-else>
      <template v-for="(item,index) in options.list">
        <li class="list-item"
            v-if="item && item !== null"
            :key="`${_uid}_${index}`"
            @click="onItemClick(item)">
          <Icon :type="item.icon"
                :custom="item.icon" />
          <span>{{item[labelField]}}</span>
        </li>
      </template>
    </ul>
    <p v-if="options.confirm"
       style="padding:10px 5px 5px 30px;">
      <Button size="small"
              @click="onClick('no')"
              style="margin-right:10px;">取消</Button>
      <Button size="small"
              type="primary"
              @click="onClick('ok')">确认</Button>
    </p>
  </div>
</template>

<script>
import $ from 'zepto'
export default {
  name: 'ToolTip',
  props: {
    target: null,
    options: {
      type: Object,
      default: () => { }
    },
    labelField: {
      type: String,
      default: 'text'
    },
    handler: Function
  },
  methods: {
    msgStyle () {
      return 'max-width:260px;padding:5px 10px 5px 10px'
    },
    onClick (os) {
      this.handler(os)
    },
    onOutClick (event) {
      /*       console.log($(event.target))
            console.log($(event.target).closest(this.target)) */
      if ($(event.target).closest(this.target).length === 0) {
        this.handler('out')
      }
    },
    onItemClick (item) {
      // console.log(item)
      this.handler('ok', item)
    },
    handleMouseenter () {
      this.$emit('mouseenter')
    },
    handleMouseleave () {
      this.$emit('mouseleave')
    }
  },
  created () {
    this.$emit('created')
  }
}
</script>
<style lang="less" scoped>
ul,
li {
  list-style: none;
}
.tip-list {
  min-width: 60px;
  .list-item {
    min-width: 80px;
    padding: 0px 9px 0px 9px;
    height: 30px;
    line-height: 30px;
    cursor: default;
    color: #333;
    font-family: 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
    font-size: 14px;
    text-shadow: none;
    &:hover {
      color: #fff;
      background: #2d8cf0;
    }
    .ivu-icon {
      margin-right: 8px;
      font-size: 18px;
    }
  }
}
</style>