<template>
  <div class="m-chat-emoji">
    <div class="emoji-content">
      <div class="cnt">
        <span class="emoji-item" :class="{'pinup-item':item.type==='pinup'}" v-for="item in currEmoji.list" @click.stop="selectEmoji(item)">
          <img :src="item.img">
        </span>
      </div>
    </div>
    <div class="emoji-channel">
      <span class="emoji-album" :class="{active: item.name==currAlbum}" v-for="item in emoji" @click.stop="selectAlbum(item)">
        <img :src="item.album">
      </span><span v-if="type==='session'" class="emoji-album" :class="{active: item.name==currAlbum}" v-for="item in pinup" @click.stop="selectAlbum(item)">
        <img :src="item.album">
      </span>
    </div>
  </div>
</template>

<script>
import emojiObj from '../../configs/emoji'
import util from '../../utils'
import config from '../../configs'
import pageUtil from '../../utils/page'

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: {
    type: String,
    scene: String,
    to: String
  },
  data () {
    return {
      currType: 'emoji',
      currAlbum: 'emoji'
    }
  },
  computed: {
    emoji () {
      return genEmojiList('emoji', emojiObj.emojiList)
    },
    pinup () {
      return genEmojiList('pinup', emojiObj.pinupList)
    },
    currEmoji () {
      if (this.currType === 'emoji') {
        return this.emoji[this.currAlbum]
      } else if (this.currType === 'pinup') {
        return this.pinup[this.currAlbum]
      }
      return []
    }
  },
  methods: {
    selectAlbum (album) {
      this.currType = album.type
      this.currAlbum = album.name
    },
    selectEmoji (emoji) {
      if (this.currType === 'emoji') {
        // 由触发父组件事件，增加表情文案
        this.$emit('add-emoji', emoji.key)
      } else if (this.currType === 'pinup') {
        if (this.type === 'session') {
          this.$store.dispatch('sendMsg', {
            type: 'custom',
            scene: util.parseSession(window.localStorage.sessionId).scene,
            to: util.parseSession(window.localStorage.sessionId).to,
            pushContent: '[贴图表情]',
            content: {
              type: 3,
              data: {
                catalog: this.currAlbum,
                chartlet: emoji.key
              }
            }
          })
        } else if (this.type === 'chatroom') {
          this.$store.dispatch('sendChatroomMsg', {
            type: 'custom',
            pushContent: '[贴图表情]',
            content: {
              type: 3,
              data: {
                catalog: this.currAlbum,
                chartlet: emoji.key
              }
            }
          })
        }
        this.$emit('hide-emoji')
      }
       pageUtil.scrollChatListDown() 
    }
   
  }
}
</script>

<style type="text/css">
.m-chat-emoji {
    position: absolute;
    top: -200px;
    height: 200px;
    left: 0;
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    z-index: 2017;
}
.m-chat-emoji .emoji-channel {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 5px;
}
.m-chat-emoji .emoji-channel .emoji-album {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-top: 5px;
    cursor: pointer;
}
.m-chat-emoji .emoji-channel .emoji-album img {
    margin: 0;
    display: block;
    width: 30px;
    height: 30px;
}
.m-chat-emoji .emoji-channel .emoji-album img.active {
    background-color: #f0f0f0;
}
.emoji-content {
    position: relative;
    width: 100%;
    height: 10rem;
    background-color: #f0f0f0;
    overflow-y: auto;
}
.emoji-content .cnt {
    position: relative;
    display: block;
    margin: 0.4rem auto;
    text-align: left;
}
.emoji-content::-webkit-scrollbar{
    width: 4px;  
    height: 4px;  
    background-color: #F5F5F5;  
}
/*定义滚动条的轨道，内阴影及圆角*/
.emoji-content::-webkit-scrollbar-track{
    background-color: #F5F5F5;  
}
/*定义滑块，内阴影及圆角*/
.emoji-content::-webkit-scrollbar-thumb{
    border-radius: 20px;
    background-color: transparent;  
    margin-bottom: 24px;
}
.emoji-content:hover::-webkit-scrollbar-thumb{
    border-radius: 20px;
    background-color: #aaa;  
    margin-bottom: 24px; 
} 
.emoji-item {
    display: inline-block;
    width: 28px;
    height: 28px;
    padding: 2px;
    vertical-align: middle;
    margin: 3px 5px;
    /*border: 1px solid #fff;*/
    /*margin-left: -1px;*/
    /*margin-bottom: -1px;*/
}
.emoji-item img {
    width: inherit;
    height: inherit;
}
.pinup-item {
    width: 44px;
    height: 44px;
}
</style>