<template>
  <div class="chat-emoji">
    <popup :reverse="isReverse" :height="height" v-model="show" :mask="mask" :history-model="historyModel" id="chat-emoji-popup" @on-hide="onPopupHide" @on-show="onPopupShow" style="overflow:scroll">
      <ul class="emoji-list">
        <li @click="clickEmoji(item)" class="item" v-for="item in emoji.emoji.list"><img :src="item.img"></li>
      </ul>
    </popup>
  </div>
</template>
<script>
import emojiObj from './emoji.js'

function genEmojiList(type, emojiList) {
  let result = {}
  for (let name in emojiList) {
    let emojiMap = emojiList[name]
    let list = []
    for (let key in emojiMap) {
      list.push({
        type,
        name,
        key,
        img: emojiMap[key].img
      })
    }
    if (list.length > 0) {
      result[name] = {
        type,
        name,
        list,
        album: list[0].img
      }
    }
  }
  return result
}

export default {
  props: {
    value: Boolean
  },
  data() {
    return {
      isReverse: false,
      mask: false,
      height: '200',
      show:this.value,
      historyModel:false
    }
  },
  methods: {
    onPopupHide() {},
    onPopupShow() {},
    clickEmoji(emojiObj) {
      this.$emit('on-click-emoji', emojiObj)
    }
  },
  computed: {
    emoji() {
      let emoji = genEmojiList('emoji', emojiObj.emojiList)
      return emoji
    }
  },
  watch:{
    value(val) {
      this.show = val
    }
  }
}
</script>
