<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/07/28. -->

<template>
  <div>
    <div class="lc-rich-text" v-if="isNotEmptyArray">
      <div v-for="v in configList">
        <lc-rich-text-text v-if="v.type=='text' && v.value"
                            :text-value="v.value"
                            :text-style="v.style"
                            :has-text-margin="hasTextMargin"
                            :text-theme="v.theme"></lc-rich-text-text>
<!-- 210687 【TS:202005251022-平台业委会(云基础)_郭凌波-light-ui h51、richtext的LcRi】 -->
        <lc-rich-text-link v-if="v.type=='link' && v.href && v.value"  @LcRichTextLinkClick="onLinkClick"
                            :link-value="v.value"
                            :link-href="v.href"
                            :link-style="v.style"
                            :has-text-margin="hasTextMargin"
                            :link-theme="v.theme"></lc-rich-text-link>

        <lc-rich-text-icon v-if="v.type=='icon' && v.src"
                            :icon-src="v.src"
                            :icon-style="v.style"></lc-rich-text-icon>

        <lc-rich-text-tag v-if="v.type=='tag' && v.value"
                           :tag-value="v.value"
                           :tag-theme="v.theme"
                           :tag-style="v.style"></lc-rich-text-tag>
      </div>
    </div>
    <text class="default-text" v-if="isString">{{configList}}</text>
  </div>
</template>

<style scoped>
  .lc-rich-text {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    flex-shrink: 1;
  }

  .default-text {
    color: #A5A5A5;
    font-size: 24px;
    line-height: 30px;
  }
</style>

<script>
  import Utils from '../utils';

  export default {
    components: {
      LcRichTextText: require('./lc-rich-text-text.vue'),
      LcRichTextLink: require('./lc-rich-text-link.vue'),
      LcRichTextIcon: require('./lc-rich-text-icon.vue'),
      LcRichTextTag: require('./lc-rich-text-tag.vue')
    },
    props: {
      configList: {
        type: [Array, String],
        default: function () {
          return []
        }
      },
      hasTextMargin: {
        type: Boolean,
        default: true
      }
    },
    data: () => ({}),
    computed: {
      isNotEmptyArray () {
        return Utils.isNonEmptyArray(this.configList);
      },
      isString () {
        return Utils.isString(this.configList);
      }
    },
    methods: {
      // 210687 【TS:202005251022-平台业委会(云基础)_郭凌波-light-ui h51、richtext的LcRi】
      onLinkClick (e) {
        this.$emit('LcRichTextLinkClick', e);
      }
    },
  };
</script>
