<template>
  <el-tooltip
    effect="light"
    :popper-class="popperClass"
    :content="tipText"
    :placement="placement">
<!--    <div :class="iconStyleClass" @click="onClick">-->
<!--      <i :class="icon"></i>-->
<!--    </div>-->
    <FNButton size="small" circle :type="type" :disabled="disabled" @click="onClick">
      <template slot="icon">
        <svg-icon v-if="isSvg" :icon-class="icon" />
        <i v-else :class="icon"></i>
      </template>
    </FNButton>
  </el-tooltip>
</template>

<script>
import FNButton from '@/components/FNButton/index'

/**
 * 封装带有提示的按钮
 * 参数说明：
 *  type：primary 是蓝色，success 是绿色，info 是灰色，warning 是橘色，danger 是红色
 *  isSvg: 是否是svg，如果是icon的值为svg的路径
 *  icon：icon 的样式，参考el icon图标值
 *  tipText: 提示的文字
 *  placement：提示的位置 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
*/
export default {
  components: {
    FNButton
  },
  props: {
    // 类型，primary 是蓝色，success 是绿色，info 是灰色，warning 是橘色，danger 是红色
    type: {
      type: String,
      default: 'primary'
    },
    // icon 的样式，参考el图标值
    icon: {
      type: String,
      require: true,
      default: 'el-icon-edit-outline'
    },
    isSvg: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tipText: {
      type: String,
      default: ''
    },
    // 提示文字的位置
    placement: {
      type: String,
      default: 'top'
    }
  },
  data() {
    return {
      // 按钮的颜色样式
      iconStyleClass: 'icon-style-default',
      // 提示框的颜色样式
      popperClass: 'custom-tool-tip-popper'
    }
  },
  created() {
    // console.log('created ==== ')
    this.initStyle()
  },
  methods: {
    // 点击方法回调
    onClick() {
      this.$emit('onClick')
    },
    // 初始化样式
    initStyle() {
      if (this.type === 'primary') {
        this.iconStyleClass += ' icon-style-default-primary icon-blue'
        this.popperClass += ' custom-tool-tip-popper-primary'
      } else if (this.type === 'success') {
        this.iconStyleClass += ' icon-style-default-success icon-green'
        this.popperClass += ' custom-tool-tip-popper-success'
      } else if (this.type === 'info') {
        this.iconStyleClass += ' icon-style-default-info icon-gray'
        this.popperClass += ' custom-tool-tip-popper-info'
      } else if (this.type === 'warning') {
        this.iconStyleClass += ' icon-style-default-warning icon-orange'
        this.popperClass += ' custom-tool-tip-popper-warning'
      } else if (this.type === 'danger') {
        this.iconStyleClass += ' icon-style-default-danger icon-red'
        this.popperClass += ' custom-tool-tip-popper-danger'
      } else {
        this.iconStyleClass += ' icon-style-default-primary icon-blue'
        this.popperClass += ' custom-tool-tip-popper-primary'
      }
    }
  }
}
</script>

<style lang="scss">
  .custom-tool-tip-popper-danger {
    color: #FF6565;
  }
  .custom-tool-tip-popper-info {
    color: #909399;
  }
  .custom-tool-tip-popper-primary {
    color: #409eff;
  }
  .custom-tool-tip-popper-success {
    color: #67c23a;
  }
  .custom-tool-tip-popper-warning {
    color: #FFBB00;
  }
  .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;
    line-height: 17px;

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

<style scoped lang="scss">
  .icon-style-default {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  icon-style-default-primary {
    border-radius: 50%;
    background-color: transparent;
    border-color: transparent;
  }
  .icon-style-default-primary:hover {
    background-color: #409eff;
    color: white;
    border-radius: 50%;
  }

  icon-style-default-success {
    border-radius: 50%;
    background-color: transparent;
    border-color: transparent;
  }
  .icon-style-default-success:hover {
    background-color: #67c23a;
    color: white;
    border-radius: 50%;
  }

  icon-style-default-info {
    border-radius: 50%;
    background-color: transparent;
    border-color: transparent;
  }
  .icon-style-default-info:hover {
    background-color: #909399;
    color: white;
    border-radius: 50%;
  }

  icon-style-default-warning {
    border-radius: 50%;
    background-color: transparent;
    border-color: transparent;
  }
  .icon-style-default-warning:hover {
    background-color: #e6a23c;
    color: white;
    border-radius: 50%;
  }

  icon-style-default-danger {
    border-radius: 50%;
    background-color: transparent;
    border-color: transparent;
  }
  .icon-style-default-danger:hover {
    background-color: #FF6565;
    color: white;
    border-radius: 50%;
  }

  .icon-blue {
    color: #409eff;
  }
  .icon-green {
    color: #67c23a;
  }
  .icon-gray {
    color: #909399;
  }
  .icon-orange {
    color: #e6a23c;
  }
  .icon-red {
    color: #FF6565;
  }
</style>
