<template>
  <div class="foot">
    <div class="foot_inner">
      <div class="talkfooter_inner">
        <div class="send_textarea">
          <div
            id="sendText"
            autofocus
            contenteditable="true"
            class="send_textarea_text"
            @input="getMessage"
            style="-webkit-user-select: auto; -webkit-user-select: text"
          />
          <div class="toggle_wrap" @click.stop="changeFaceShow">表情</div>
        </div>

        <div class="sendbtn">发送</div>
      </div>

      <div class="face" v-if="showFace">
        <ul class="row">
          <li
            class="col"
            v-for="(row,index) in 30"
            :key="index"
            unselectable="on"
            onmousedown="return false;"
            @click="selectFace(faseSrc(index))"
          >
            <img :src="faseSrc(index)" />
          </li>

          <div class="del_icon">
            <i class="iconfont icon-chat_bottom_delete_gray" />
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted } from 'vue'
  export default {
    setup() {
      let data = reactive({
        showFace: false,
        faseSrc: index => {
          let imgTag = `https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif`
          return imgTag
        }
      })

      function getMessage() {}

      /* function focusFun()         {
      setTimeout(() => {
        document.activeElement.blur()
      }, 100)
    } */

      function changeFaceShow() {
        data.showFace = !data.showFace
        if (data.showFace) {
        }
      }
      onMounted(() => {})

      function selectFace(row) {
        console.log(row, '===')
        const imgTag = `<img src="${row}" width="28px" height="28px">`
        // let imgTag = `<span calss='cccc'>3333</span>`
        document.execCommand('insertHTML', true, imgTag)
      }
      return {
        ...toRefs(data),
        getMessage,
        changeFaceShow,
        selectFace
      }
    }
  }
</script>

<style lang="scss" scoped>
  .foot {
    background: #eee;
    min-height: 100%;
    &_inner {
      padding: 5px 10px;
      background: #fff;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      position: fixed;
      left: 0;
      right: 0;
      background: #fff;
      bottom: 0;
      z-index: 555;
      .talkfooter_inner {
        margin: 8px 15px;
        display: flex;
        align-items: flex-end;
        .send_textarea {
          flex: 1;
          background: #f4f6f8;
          margin-right: 15px;
          border-radius: 6px;
          display: flex;
          align-items: flex-end;
          align-items: center;
          &_text {
            flex: 1;
            padding: 8px 10px;
            outline: none;
            border: none;
            overflow: hidden;
            overflow-y: auto;
            max-height: 72px;
            align-items: center;
            flex-wrap: wrap;
            word-break: break-word;
          }
          .toggle_wrap {
            font-size: 15px;
            padding-right: 10px;
          }
        }
        .sendbtn {
          position: relative;
          overflow: hidden;
          #fileId {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            right: 0;
            opacity: 0;
          }
        }
      }
      .row {
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        .col {
          cursor: pointer;
          width: 30px;
          height: 30px;
          overflow: hidden;
          display: flex;
          margin: 0 15px 15px 0;
          /* flex-wrap: wrap; */
          flex-direction: column;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          &:nth-child(8n + 8) {
            margin-right: 0;
          }
        }
        .del_icon {
          position: absolute;
          right: 15px;
          bottom: 20px;
          .icon-chat_bottom_delete_gray {
            color: #919499;
            font-size: 25px;
          }
        }
      }
    }
  }
</style>

兼容性说明，不兼容移动端 UC 浏览器，必须有光标才能插入表情