<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-06-14 09:34:23
 * @LastEditors: Heloise
 * @LastEditTime: 2022-08-08 14:37:43
-->
<template>
  <div class="el-custom-title">
    <div v-if="type === 'little-title'" :class="`el-custom-title__${type}`">
      <div class="el-custom-title--line"></div>
      <label>{{ label }}</label>
      <el-tooltip v-if="tipShow" placement="top" :disabled="!$slots.content">
        <i class="bi-iconfont-help" @click="clickTip"></i>概览说明
        <div slot="content">
          <slot name="content"></slot>
        </div>
      </el-tooltip>
    </div>
    <div v-else :class="`el-custom-title__${type}`">
      <div class="el-custom-title--icon"><slot></slot></div>
      <label>{{ label }}</label>
      <el-tooltip v-if="tipShow" placement="top" :disabled="!$slots.content">
      
      <span class="el-custom-title--text" @click="clickTip">
        <i class="bi-iconfont-help"></i>
        <slot name="tooltipName"></slot>
      </span>
        
        <div slot="content">
          <slot name="content"></slot>
        </div>
      </el-tooltip>
      <div v-if="tipTxt" class="el-custom-title--tip">
        <i class="bi-iconfont-error-circle"></i>
        <span>{{ tipTxt }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElCustomTitle',
  props: {
    type: {
      type: String,
      default: 'big-title'
    },
    tipShow: {
      type: Boolean,
      default: true
    },
    label: String,
    tipTxt: {
      type: String,
      default: ''
    }
  },
  methods: {
    clickTip() {
      this.$emit('clickTip');
    }
  }
};
</script>
