<template>
  <el-tooltip :style="toolTipStyle" :popper-class="popperClass"
              effect="light"
              :content="content" :placement="placement">
    <i :class="iconStyleClass">
      <svg-icon v-if="iconClass" :icon-class="iconClass" />
    </i>
    <slot />
  </el-tooltip>
</template>

<script>
/**
 * 封装element ui的tool tip
 * 参数：
 * content: 显示的文字内容
 * tool-tip-style：设置提示的总体样式，如左边距等
 * popper-class： 弹出气泡的class，默认为：custom-tool-tip-popper（管理后台基本能上使用此样式）
 * icon-style-class：图标样式（颜色，可选值：icon-blue，icon-red，icon-white）
 * icon-class：图标类型，默认为：question, 为空代表不同图标，可通过slot传入其他内容
 * placement：气泡位置，默认为top
 */
export default {
  name: 'CustomToolTip',
  props: {
    content: {
      type: String,
      default: ''
    },
    popperClass: {
      type: String,
      default: 'custom-tool-tip-popper'
    },
    extraClass: {
      type: String,
      default: 'el-tooltip-need-padding-left-10'
    },
    placement: {
      type: String,
      default: 'top'
    },
    iconStyleClass: {
      type: String,
      default: 'icon-blue'
    },
    iconClass: {
      type: String,
      default: 'question'
    },
    toolTipStyle: {
      type: Object,
      default: () => ({
        paddingLeft: 10 + 'px'
      })
    }
  }
}
</script>

<style lang="scss">
.custom-tool-tip-popper {
  max-width: 156px;
  box-shadow: rgb(136, 136, 136) 0 0 8px;
  border: 0 solid #FFFFFF !important;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #3DA2FF;
  line-height: 17px;

  .popper__arrow {
    border: 0 solid #FFFFFF !important;
    box-shadow: rgb(136, 136, 136) 0 0 5px;
  }
}

.custom-tool-tip-popper2 {
  @extend .custom-tool-tip-popper;
  max-width: 243px;
}
</style>

<style scoped lang="scss">
.icon-blue {
  color: #3DA2FF;
}
.icon-red {
  color: #FF4242;
}
.icon-white {
  color: #FFF;
}
</style>
