<template>
  <view class="render-remark" :class="[`render-remark--${align}`]">
    <view class="render-remark__content">{{ content }}</view>
    <view class="render-remark__tags">
      <template v-for="(tag, index) in tags">
        <view class="tag-item">
          <u-tag :key="index" :text="tag" plain plain-fill shape="circle" size="mini" />
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  props: {
    value: String,
    align: {
      type: String,
      default: 'left', // right, left
    }
  },
  computed: {
    ...mapGetters(['dictList']),
    remarkArr() {
      return `${this.value || ''}`.split(';');
    },
    content() {
      return this.remarkArr[0] || '';
    },
    tags() {
      const tagStr = this.remarkArr[1] || '';
      return tagStr.split(',').filter(i => i);
    }
  },
}
</script>

<style lang="scss">
.render-remark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  word-break: break-all;
  &__tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: $padding-xs;
    .tag-item {
      margin-bottom: $padding-xs;
      margin-right: $padding-xs;
    }
  }
  &--right {
    align-items: flex-end;
    justify-content: flex-end;
    .tag-item {
      margin-bottom: $padding-xs;
      margin-left: $padding-xs;
      margin-right: auto;
    }
  }
}
</style>