<template>
  <div :class="['editor-bar', editorStyle]">
    <div class="block">
      <template v-for="(action, index) in actions">
        <popover
          v-if="action.show && action.icon === 'emoji'"
          :key="index"
          :visible="showEmoji"
          class="svg"
          @hidePop="e => $emit('hidePop', e)"
        >
          <template v-slot:pop>
            <emoji-list @selectEmoji="e => $emit('selectActions', e)" />
          </template>
          <template
            v-slot:activeNode
          ><svg-icon
            :type="action.icon"
            style="font-size: 20px"
            @click="$emit('onActions', action.toggle)"
          /></template>
        </popover>
        <popover
          v-if="action.show && action.icon === 'topic'"
          :key="index"
          :visible="showTopic"
          class="svg"
          @hidePop="e => $emit('hidePop', e)"
        >
          <template v-slot:pop>
            <topic-list @selectedTopic="e => $emit('selectActions', e)" />
          </template>
          <template v-slot:activeNode>
            <svg-icon
              :type="action.icon"
              style="font-size: 20px"
              @click="$emit('onActions', action.toggle)"
            />
          </template>
        </popover>
        <svg-icon
          v-else-if="action.show && action.icon === 'call'"
          :key="index"
          :type="action.icon"
          class="svg"
          style="font-size: 20px"
          @click="$emit('onActions', action.toggle)"
        />
      </template>
    </div>
    <div class="block">
      <template v-for="(resource, index) in resources">
        <svg-icon
          v-if="resource.show"
          :key="index"
          :type="resource.icon"
          class="svg"
          style="font-size: 20px"
          @click="$emit('addResource', resource.toggle)"
        />
      </template>
    </div>
    <div class="publish-container">
      <span v-if="textLimit" class="tip">{{
        textLimit >= textLength
          ? $t("post.note", { num: textLimit - textLength })
          : $t("post.exceed", { num: textLength - textLimit })
      }}</span>
      <el-button
        class="button-publish"
        :loading="onPublish"
        type="primary"
        size="small"
        @click="$emit('publish')"
      >{{ $t("post.post") }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditorToolBar',
  props: {
    actions: {
      type: Array,
      default: () => []
    },
    showEmoji: {
      type: Boolean,
      default: false
    },
    showTopic: {
      type: Boolean,
      default: false
    },
    resources: {
      type: Array,
      default: () => []
    },
    textLimit: {
      type: [Number, String],
      default: 450
    },
    textLength: {
      type: [Number, String],
      default: 0
    },
    onPublish: {
      type: Boolean,
      default: false
    },
    editorStyle: {
      type: String,
      default: 'post'
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";

.editor-bar {
  width: 100%;
  height: 45px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  background: #ffffff;
  position: sticky;
  top: 65px;
  z-index: 6;
  border-bottom: 1px solid $border-color-base;

  &.chat {
    background: $background-color-grey;
  }

  .block {
    display: flex;
    padding: 0 10px;

    &:first-child {
      border: 0;
    }

    .svg {
      cursor: pointer;
      margin-left: 20px;

      &:first-child {
        margin-left: 0;
      }
    }
  }

  .publish-container {
    margin-left: auto;
    > .button-publish {
      margin-left: auto;

      ::v-deep span {
        font-size: 14px;
      }
    }

    > .tip {
      margin-right: 10px;
      color: #d0d4dc;
    }
  }
}
</style>
