<template>
  <el-tag class="mu-tag" effect="plain"
          :type="currentConfig.type"
          :size="sizeOption[currentConfig.size]"
          :class="{is_radius:currentConfig.radiusable}"
          :closable="currentConfig.closable">
    <span v-if="!$slots.default && !!currentConfig.text ">{{ currentConfig.text }}</span>
    <slot></slot>
  </el-tag>
</template>

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

  type tagType = 'normal' | 'success' | 'warning' | 'error';

  interface TagConfig {
    type: tagType,
    text?: string,
    size?: string,
    radiusable?: boolean,
    closable?: boolean
  }

  @Component({
    name: 'mcTag'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config?: TagConfig;
    private defaultConfig: any = {
      type: 'normal',
      size: 'small',
      radiusable: true
    };
    private sizeOption: any = {
      "small": 'mini',
      "medium": 'small',
      "large": 'medium'
    };

    // 合并默认数据
    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>
