<template>
  <div class="emoji-box">
    <div class="swiper-container" ref="emojiList">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(list, index) in emojiArr" :key="index">
          <ul class="list">
            <li class="item" v-for="(item, index) in list" :key="index">
              <div class="icon-item" v-if="item.index != 0" @click="_addText(item.icon)">
                <i
                  class="icon-emoji"
                  :style="{
                    backgroundPositionY: -30 * (item.index - 1) + 'px'
                  }"
                ></i>
              </div>
              <div class="icon-item" v-else @click="_remText">
                <i class="icon-emoji" :style="{ backgroundPosition: 'left bottom' }"></i>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="swiper-pagination" ref="emojiPagination"></div>
    </div>
  </div>
</template>

<script>
import emoji_icon from '@/plugins/Filters/emoji/icons';
export default {
  name: 'pc-send-emoji',
  props: {
    value: {}
  },
  data() {
    return {
      swiper: null
    };
  },
  computed: {
    content: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    },
    emojiArr() {
      const arr = [];
      const num = 20;
      for (const key in emoji_icon) {
        if (emoji_icon.hasOwnProperty(key)) {
          const index = parseInt((key - 1) / num, 10);
          if (!arr[index]) {
            arr[index] = [];
          }
          arr[index].push({ index: key, icon: emoji_icon[key] });
          if (key >= num && key % num === 0) {
            arr[index].push({ index: 0, icon: '删除' });
          }
        }
      }
      return arr;
    }
  },
  mounted() {
    this._initSwiper();
  },
  methods: {
    _initSwiper() {
      if (!this.swiper) {
        const option = {
          direction: 'horizontal',
          pagination: {
            el: this.$refs.emojiPagination
          }
        };
        this.swiper = new this.$swiper(this.$refs.emojiList, option);
      }
    },
    _addText(str) {
      this.content += `#${str}#`;
    },
    _remText() {
      let text = this.content;
      const reg = /(#)[\u4e00-\u9fa5A-Za-z0-9.]+(#)$/;
      if (text) {
        if (text.match(reg) != null) {
          text = text.replace(reg, '');
        } else {
          text = text.substring(0, text.length - 1);
        }
      }
      this.content = text;
    }
  }
};
</script>

<style lang="less" scoped>
.emoji-box {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 5px;
  height: 140px;
  background: #fff;
  .swiper-container {
    width: 100%;
    height: 100%;
    .swiper-slide {
      height: 100%;
    }
  }
  .swiper-pagination {
    bottom: 0;
    ::v-deep .swiper-pagination-bullet-active {
      background-color: var(--main-color);
    }
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  .item {
    flex: 0 0 auto;
    width: 100% / 7;
    height: 40px;
    line-height: 40px;
    text-align: center;
    .icon-item {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
    }
  }
  .icon-emoji {
    display: block;
    margin: auto;
    width: 30px;
    height: 30px;
    background-position: left top;
    background-size: 30px auto;
    background-repeat: no-repeat;
    background-image: var(--newqq-list);
  }
}
</style>
