<template>
  <div>
    <input id="input" type="text" v-model="comValue" placeholder="请输入" />

    <div class="imojibox">
      <span
        v-for="(item,index) in imoji"
        :key="index"
        @click="focusInsert(item)"
        >{{item}}</span
      >
    </div>

    <div @click="handleBackspace">删除</div>
  </div>
</template>

<script>
  import { reactive, toRefs } from 'vue'
  export default {
    setup() {
      let data = reactive({
        comValue: '初始化的文字啊，很多呢'
      })

      let imoji = [
        '[微笑]',
        '[嘻嘻]',
        '[哈哈]',
        '[可爱]',
        '[可怜]',
        '[挖鼻]',
        '[吃惊]',
        '[害羞]',
        '[挤眼]',
        '[闭嘴]',
        '[鄙视]',
        '[爱你]',
        '[泪]',
        '[偷笑]',
        '[亲亲]',
        '[生病]',
        '[太开心]',
        '[白眼]',
        '[右哼哼]',
        '[左哼哼]',
        '[嘘]',
        '[衰]',
        '[委屈]',
        '[吐]',
        '[哈欠]',
        '[抱抱]',
        '[怒]',
        '[疑问]',
        '[馋嘴]',
        '[拜拜]',
        '[思考]',
        '[汗]',
        '[困]',
        '[睡]',
        '[钱]',
        '[失望]',
        '[酷]',
        '[色]',
        '[哼]',
        '[鼓掌]',
        '[晕]',
        '[悲伤]',
        '[抓狂]',
        '[黑线]',
        '[阴险]',
        '[怒骂]',
        '[互粉]',
        '[心]',
        '[伤心]',
        '[猪头]',
        '[熊猫]',
        '[兔子]',
        '[ok]',
        '[耶]',
        '[good]',
        '[NO]',
        '[赞]',
        '[来]',
        '[弱]',
        '[草泥马]',
        '[神马]',
        '[囧]',
        '[浮云]',
        '[给力]',
        '[围观]',
        '[威武]',
        '[奥特曼]',
        '[礼物]',
        '[钟]',
        '[话筒]',
        '[蜡烛]',
        '[蛋糕]'
      ]

      function focusInsert(imojiStr) {
        var obj = document.getElementById('input')
        let result
        let val = obj.value
        if (document.selection) {
          result = document.selection.createRange()
          document.selection.empty()
          result.text = imojiStr
        } else {
          result = [
            val.substring(0, obj.selectionStart),
            imojiStr,
            val.substr(obj.selectionEnd)
          ]
          // obj.value = result.join('')
          data.comValue = result.join('')
        }
      }

      function handleBackspace() {
        if (!data.comValue.length) return
        data.comValue = Array.from(data.comValue).slice(0, -1).join('')

        //根据最后的指定字符串删除
        let str =
          'WX[微笑]你是怎么啦<img src="img/src.png" alt="">WX[傻笑]啦啦22WX[不生气]我不知WX[很生气]道啊'
        let pos = str.lastIndexOf('WX[')
        let delstr = str.substring(0, pos)
      }

      return {
        ...toRefs(data),
        imoji,
        focusInsert,
        handleBackspace
      }
    }
  }
</script>
<style lang="scss" scoped>
  #input {
    width: 400px;
    max-height: 300px;
    overflow-y: auto;
  }
  .imojibox {
    margin: 20px;
    span {
      margin: 10px;
      display: inline-block;
    }
  }
</style>