<template>
  <div>
    <transition name="body" >
      <div v-show="showEmoji" class="emoji-container">
        <div class="emoji-item-container">

          <span class="emoji-item"
                v-for="(item, index) in EMOJI[emojiIndex].emote"
                :key="index"
                @click="addEmoji(item.text)">
            <div v-if="item.url.indexOf('http')==-1" class="emoji">{{item.text}}</div>
            <img v-if="item.url.indexOf('http')!=-1" class="emoji" :src="item.url" :title="item.text" width="24px" height="24px"/>
          </span>
        </div>
        <div class="emoji-list-container">
          <span class="emoji-item"
              v-for="(item, index) in EMOJI"
              :key="item.url"
              @click="(emojiIndex=index)">
          <img  class="emoji" :src="item.url" :title="item.text" width="24px" height="24px"/>
        </span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    props: {
      showEmoji: {
        type: Boolean
      }
    },
    data() {
      return {
        emojiIndex:0,
      };
    },
    created() {

    },
    methods: {
      addEmoji(key) {
        this.$emit("addEmoji", key);
      },
      changeEmoji(index){

      }
    }
  }
</script>

<style scoped>
  .emoji-container{
    user-select: none;
    width: 280px;
    position: absolute;
    background: var(--background);
    border: 1px solid var(--maxLightRed);
  }
  .emoji-item-container{
    width: 100%;
    max-height: 160px;
    overflow-y: scroll;
  }
  .emoji-item {
    cursor: pointer;
    display: inline-block;
  }
  .emoji-list-container{
    background: var(--maxLightGray);
  }
  .emoji-item:hover {
    transition: all 0.2s;
    border-radius: 0.25rem;
    background: var(--lightGray);
  }

  .emoji {
    margin: 0.25rem;
    /* 把此元素放置在父元素的中部 */
    vertical-align: middle;
  }
  div.emoji{
    font-size: 10px;
    font-weight: 100;
    margin: 8px;
  }
  .body-enter-active, .body-leave-active {
    transition: all 0.3s;
  }

  .body-enter, .body-leave-to {
    opacity: 0;
  }
</style>
