<template>
  <div id="emojiList" class="emoji-list pub-scroll-box" :class="{'mini-emoji-wrap': isMini}" @scroll.passive="handleScroll">
    <p class="title" v-if="recentList.length">最近使用</p>
    <ul id="recent-emoji" v-if="recentList.length">
      <li v-for="(item, key) in recentList"
        :key="key"
        v-html="item.surrogates"
        @click="handleClick(item, $event)"></li>
    </ul>
    <div v-for="(arr, key) in emojiList" :key="key">
      <p class="title">{{key}}</p>
      <ul>
        <li v-for="(item, ind) in arr"
          :key="ind"
          v-html="item.surrogates"
          @click="handleClick(item, $event)"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { emojiList } from '@/util/emoji'
import twemoji from 'twemoji'

export default {
  name: 'emojiList',
  props: {
    isMini: {
      type: Boolean,
      default: false
    },
    emojiShow: Boolean // 识别emoji显示
  },
  data () {
    return {
      emojiList,
      recentList: [],
      index: 0
    }
  },
  watch: {
    emojiShow (isShow) {
      setTimeout(() => {
        this.handleScroll()
      }, 10)
    }
  },
  mounted () {
    this.recentList = JSON.parse(localStorage.getItem('recentEmoji')) || []
    var ul = document.getElementById('emojiList')

    this.$nextTick(() => {
      this.parseEmoji(ul)
    })
  },
  methods: {
    handleClick (item, event) {
      let name = item.names
      this.$emit('addEmoji', JSON.stringify(name))
      if (this.recentList.length > 9) {
        this.recentList.pop()
      }
      if (this.recentList.includes(item)) {
        let ind = this.recentList.indexOf(item)
        this.recentList.splice(ind, 1)
      }
      this.recentList.unshift(item)
      localStorage.setItem('recentEmoji', JSON.stringify(this.recentList))
      let ul = document.getElementById('recent-emoji')
      this.$nextTick(() => {
        this.parseEmoji(ul)
      })
    },
    parseEmoji (ul) {
      let emojiDefault = require('../../assets/icon-face.png')

      twemoji.parse(ul, {
        callback: function (icon, options) {
          return emojiDefault
        },
        attributes (icon, variant) {
          return {
            originurl: 'https://w2.meechat.me/emoji/' + variant + '.svg'
          }
        }
      })
    },
    handleScroll () {
      let emojiList = document.getElementById('emojiList')
      let imageArr = emojiList.querySelectorAll('img')

      imageArr.forEach(item => {
        let originUrl = item.getAttribute('originurl')
        let url = item.getAttribute('src')

        if (item.offsetTop - emojiList.scrollTop <= emojiList.clientHeight && originUrl != url) {
          if (originUrl != url) {
            item.setAttribute('src', originUrl)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.emoji-list {
  position: absolute;
  border-radius: 4px;
  border: 1px solid #d6d6d6;
  left: 4px;
  height: 240px;
  top: -248px;
  overflow: auto;
  background-color: #ffffff;
  width: 470px;
  overflow: auto;
  .title{
    font-size: 12px;
    padding: 0 14px;
    height: 30px;
    line-height: 30px;
    color: #999999;
  }
}
.emoji-list * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.emoji-list li {
  font-size: 28px;
  border-radius: 4px;
  display: inline-block;
  padding: 6px;
  cursor: pointer;
  &:hover{
    background: #eeeeee;
  }
}
.mini-emoji-wrap{
  &.emoji-list{
    left: 0;
    right: 0;
    width: auto;
    top: -242px;
  }
}
</style>
