<template>
  <el-tooltip :visible-arrow="currentConfig.arrow" :placement="currentConfig.placement"
              :popper-class="'mu-tooltip' + ' ' + (!currentConfig.tip ? 'mu-tooltip-none' : '')">
    <div slot="content" v-html="currentConfig.tip" v-if="currentConfig.tip"></div>
    <slot></slot>
  </el-tooltip>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';

  interface TipConfig {
    tip: string,
    placement?: string,
    arrow?: boolean
  }

  @Component({
    name: 'mcTooltip'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config!: TipConfig;
    private defaultConfig: any = {
      placement: 'bottom',
      arrow: false
    };

    // 合并默认数据
    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }

  }
</script>
