<template>
  <div class="icon-text" :style="{ color }">
    <!-- 加载菊花 -->
    <el-icon v-if="loading" class="is-loading" :style="{ marginRight: `${props.margin}px` }">
      <ep-loading> </ep-loading>
    </el-icon>
    <!-- 前边图标 -->
    <el-icon v-if="!loading && icon" key="el-icon-2" :style="{ marginRight: `${props.margin}px` }">
      <component :is="icon"></component>
    </el-icon>
    <!-- 文字 -->
    <span v-if="text">{{ text }}</span>
    <!-- 后边图标 -->
    <el-icon v-if="rIcon" key="el-icon-3" class="is-loading" :style="{ marginLeft: `${props.margin}px` }">
      <component :is="icon"></component>
    </el-icon>
  </div>
</template>

<script setup lang="ts">
  import EpLoading from '~icons/ep/loading';
  const props = defineProps({
    /** 加载状态 */
    loading: { type: Boolean, default: false },
    /** 文字前面的图标 */
    icon: { type: [String, Object] as PropType<Component | string>, default: '' },
    /** 文字前面的图标 */
    rIcon: { type: [String, Object] as PropType<Component | string>, default: '' },
    /** 图标和文字的颜色 */
    color: { type: String, default: 'inherit' },
    /** 显示的文字 */
    text: { type: String, default: '' },
    /** 文字和图标之间的间距 */
    margin: { type: Number, default: 4 }, // 间距
  });
</script>

<style lang="scss" scoped>
  .icon-text {
    @include flex(row, nowrap, center, center, center);
  }
</style>
