<template>
  <div ref="inputlocation" v-clickoutside="closeModal">
    <el-input
      :ref="refs"
      v-model="modelValues"
      style="width:100%"
      :type="type"
      :placeholder="placeholder"
      :name="name"
      :tabindex="tabindex"
      :auto-complete="autoComplete"
      :validate-event="validate"
      @focus="onFocus"
    >
      <img
        v-if="isImage"
        slot="prefix"
        style="margin: 6px 7px 6px 6px; width: 26px"
        :src="url"
      >
      <img
        v-if="isImage"
        slot="prefix"
        style="padding-top: 4px"
        src="@/assets/images/login_link.png"
      >
    </el-input>
    <!-- <input type="text" ref="refss"   v-model="modelValue" @focus="onFocus"> -->
    <div v-show="showKeyboard" ref="keyboard" class="keyboard-content" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
      <div style="border-radius:15px" class="keyboard">
        <div style="height:15px" />
        <!--eslint-disable-next-line vue/require-v-for-key-->
        <p v-for="keys in keyList">
          <!--eslint-disable-next-line vue/require-v-for-key-->
          <template v-for="key in keys">
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-if="key === 'top'" style="width:130px" @click.stop="clickKey">CapsLock</i>
            <!-- <i v-else-if="key === '123'" @click.stop="clickKey" class="tab-num">123</i> -->
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-else-if="key === 'back'" class="tab-num" @click.stop="clickKey">返回</i>
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-else-if="key === 'del'" class="key-delete" @click.stop="clickKey">del</i>
            <!-- <i v-else-if="key === 'del'" class="key-delete" @click.stop="clickKey" /> -->
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-else-if="key === 'blank'" style="width:300px" class="iconfont icon-konggejian-jianpanyong tab-blank" @click.stop="clickKey" />
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-else-if="key === 'symbol'" class="tab-symbol" @click.stop="clickKey">符</i>
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-else-if="key === 'point'" class="tab-point" @click.stop="clickKey">·</i>
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-else-if="key === 'enter'" style="width:100px;" @click.stop="clickKey">Enter</i>
            <!--eslint-disable-next-line vue/require-v-for-key-->
            <i v-else class="keyStyle" @click.stop="clickKey">{{ key }}</i>
          </template>
        </p>
      </div>
      <img src="@/assets/move.png" style="width:14px;height:14px;position:absolute;bottom:3px;right:3px;opacity:0.5" alt="">
    </div>
  </div>
</template>
<script>
import clickoutside from '../directives/clickoutside'
export default {
  name:"keyBoardNum",
  directives: { clickoutside },
  props: {
    isImage:{
      type:Boolean,
      default(){
        return false
      }

    },
    url:{
      type:String,
      default(){
        return ""
      }

    },
    tabindex:{
      type:Number,
      default(){
        return null
      }
    },
    refs:{
      type:String,
      default(){
        return ""
      }
    },
    // eslint-disable-next-line vue/require-prop-types
    modelValue:{
      // type:Number,
      default(){
        return null;
      }
    },
    type:{
      type:String,
      default(){
        return "text"
      }
    },
    placeholder:{
      type:String,
      default(){
        return ""
      }
    },
    name:{
      type:String,
      default(){
        return ""
      }
    },
    autoComplete:{
      type:String,
      default(){
        return "on"
      }
    },
    left:{
      type:String,
      default(){
        return "0%"
      }
    },
    validate:{
      type:Boolean,
      default(){
        return false
      }
    }
  },
  data() {
    return {
      moveDataelse:{},
      ismouseUp:true,
      // modelValues:this.modelValue,
      keyList: [],
      showKeyboard:false,
      sourceDom: '',
      status: 0, //0 小写 1 大写 2 数字 3 符号
      lowercase: [
        [ 1, 2, 3],
        [ 4, 5, 6],
        [ 7, 8, 9],
        [0, '.', 'del']
      ],
      uppercase: [
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['top', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del'],
        [',', 'blank', 'symbol', 'enter']
      ],
      equip:!!navigator.userAgent.toLocaleLowerCase().match(/ipad|mobile/i)//是否是移动设备
    }
  },
  computed:{
    showKeyboards(){
      return this.showKeyboard;
    },
    modelValues:{
      // return this.modelValue;
      get() {
          //console.log("############",this.id)
          return this.modelValue
        },
        set(s) {
          //console.log("@@@@@@@@@@@@@@@@@@")
          this.$emit('update:modelValue', s);
          this.$emit("keyUp", {refs:this.refs, val:s})
        }
    }
  },
  watch:{
    showKeyboards(val){
      if(!val){
        this.$emit("onblur")
      }

    }

  },
  created() {},
  mounted(){
    this.$refs.keyboard.style.left = this.left;
    this.keyList = this.lowercase;
  },
  methods: {
    getInputValue(val) {
      // eslint-disable-next-line no-console
      console.log("val", val);
      // eslint-disable-next-line no-console
      console.log("this.modelValue", this.modelValues)
      let modelVal = this.modelValues+'';
      if(val === 'delete'){
        // this.$emit("update:modelValue", modelVal.slice(0, modelVal.length -1))
        this.modelValues=modelVal.slice(0, modelVal.length -1)
      }else{
        // this.$emit("update:modelValue", this.modelValues +val);
        this.$emit("keyUp", {refs:this.refs, val:this.modelValues +val})
        this.modelValues=this.modelValues +val
      }
    },

    onblur(){
      // if(!this.showKeyboard){
      //   this.$emit("onblur")
      // }

    },

    onFocus(event) {
      // eslint-disable-next-line no-console
      console.log("eventOnfOCUES",
       this.$refs.inputlocation.offsetLeft,
       this.$refs.inputlocation.offsetTop,
       event
       )
      this.showKeyboard=true;
      this.ismouseUp=true;
    },

    //获取光标位置
    getCursorPosition() {
      let doc = this.$refs[this.refs]
      if (doc.selectionStart) return doc.selectionStart
      return -1
    },

    tabHandle({ value = '' }) {
      if(value.indexOf('tab-num') > -1){
         this.status = 2
         //数字键盘数据
      }else if(value.indexOf('tab-blank') > -1){
        this.getInputValue(' ')
      }else if(value.indexOf('tab-point') > -1){
        this.getInputValue('.')
      }else if(value.indexOf('tab-symbol') > -1){
        this.status = 3
      }else if(value.indexOf('tab-top') > -1){
        if(this.status === 0){
          this.status = 1
          this.keyList = this.uppercase
        }else{
          this.status = 0
          this.keyList = this.lowercase
        }
      }
    },

    clickKey(event) {
      // eslint-disable-next-line no-console
      console.log("$event", event)
      this.$refs[this.refs].focus();
      if(event.type === 'click' && this.equip) return
      let value = event.srcElement.innerText
      // eslint-disable-next-line no-console
      console.log("222", event.srcElement.classList)
      if(value && value =='符'){
        this.keyList = [
          [",", ".", "!", "@", "#", "$", "%", "|"],
          ["\\", "^", "&", "*", "(", ")", "[", "]", "?", ";"],
          [":", "<", ">", "~", "~", "_", "-", "+", "=", 'del'],
          ['back', 'blank', 'enter']
        ]
      }else if(value && value == 'Enter'){
         this.getInputValue('\n')
        this.$emit("keyUpEnter", this.modelValue + value)
      }else if(value && value == 'del'){
         this.getInputValue('delete')
      }
      value && value !== '符' && value !== '·' && value !== '123' && value!= 'Enter' && value != 'del'? this.getInputValue(value) : this.tabHandle(event.srcElement.classList)
    },

    closeModal(e) {
      if (e.target !== this.sourceDom) {
        this.showKeyboard = false
      }
    },

    mousedown(event){
      this.ismouseUp=false;
      // eslint-disable-next-line no-console
      console.log("event", event)
      // this.moveDataelse.x = event.pageX - this.$refs.keyboard.offsetLeft
      // this.moveDataelse.y = event.pageY - this.$refs.keyboard.offsetTop
      this.moveDataelse.x = event.x - this.$refs.keyboard.offsetLeft
      this.moveDataelse.y = event.y - this.$refs.keyboard.offsetTop
      event.currentTarget.style.cursor = 'point'

    },
    touchstart(event){
      this.ismouseUp=false;
      // eslint-disable-next-line no-console
      console.log("event", event)
      // this.moveDataelse.x = event.pageX - this.$refs.keyboard.offsetLeft
      // this.moveDataelse.y = event.pageY - this.$refs.keyboard.offsetTop
      this.moveDataelse.x = event.changedTouches[0].pageX - this.$refs.keyboard.offsetLeft
      this.moveDataelse.y = event.changedTouches[0].pageY - this.$refs.keyboard.offsetTop
      event.currentTarget.style.cursor = 'point'
    },
    mouseup(event){
      this.onmousemove = null
      event.currentTarget.style.cursor = 'point'
      this.ismouseUp = true;

    },
    touchend(event){
      this.onmousemove = null
      event.currentTarget.style.cursor = 'point'
      this.ismouseUp = true;

    },

    mousemove(event){
      if(this.ismouseUp){
        return;
      }
     // eslint-disable-next-line no-console
      console.log("event11", event)
      // let moveLeft = event.x - this.moveDataelse.x;
      // let moveTop = event.y - this.moveDataelse.y;
      // this.$refs.keyboard.style.left = moveLeft  + 'px'
      // this.$refs.keyboard.style.top = moveTop + 'px'
      let moveLeft = event.x - this.moveDataelse.x;
      let moveTop = event.y - this.moveDataelse.y;
      // eslint-disable-next-line no-console
      console.log("moveTop", moveTop, "moveLeft", moveLeft)
      this.$refs.keyboard.style.left = moveLeft + 'px'
      this.$refs.keyboard.style.top = moveTop + 'px'

    },
    touchmove(event){
      if(this.ismouseUp){
        return;
      }
     // eslint-disable-next-line no-console
      console.log("event11", event)
      // let moveLeft = event.x - this.moveDataelse.x;
      // let moveTop = event.y - this.moveDataelse.y;
      // this.$refs.keyboard.style.left = moveLeft  + 'px'
      // this.$refs.keyboard.style.top = moveTop + 'px'
      let moveLeft = event.changedTouches[0].pageX - this.moveDataelse.x;
      let moveTop = event.changedTouches[0].pageY - this.moveDataelse.y;
      // eslint-disable-next-line no-console
      console.log("moveTop", moveTop, "moveLeft", moveLeft)
      this.$refs.keyboard.style.left = moveLeft + 'px'
      this.$refs.keyboard.style.top = moveTop + 'px'

    }

  }
}
</script>
<style lang="scss" scoped>
.keyboard {
  width: 227px;
  // margin: 0px auto;
  border-radius: 20px;
  padding: 20px;
  font-size: 18px;
  border-radius: 2px;
  padding-top: 0.5em;
  // background-color: #e5e6e8;
  background-color: rgba(255,255,255,0.4);
  user-select: none;

  z-index: 999;
  pointer-events: auto;
  p {
    width: 95%;
    margin: 0 auto;
    height: 45px;
    margin-bottom: 0.5em;
    display: flex;
    display: -webkit-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    i {
      display: block;
      // margin: 0 1%;
      margin: 0 5px;
      height: 45px;
      line-height: 45px;
      font-style: normal;
      font-size: 24px;
      border-radius: 3px;
      width: 50px;
      background-color: #181818;
      background: linear-gradient(to bottom #292929 0%, #111111 100%);
      color: #c5c5c5;
      border: 1px solid #373737;
      border-radius: 7px;
      box-shadow: 0 0 0 1px #373737,0 0 0 2px #191B1A, 0 2px 0 2px #202221;
      font-family: Arial, Helvetica, sans-serif;

      text-align: center;
      // flex-grow: 1;
      // flex-shrink: 1;
      // flex-basis: 0;
      // -webkit-box-flex: 1;
      &:active {
        background-color: darken(#ccc, 10%);
      }
    }
    .tab-top {
      width: 50px;
      margin: 0 1%;
      background: #cccdd0;
      color: #fff;
      font-size: 24px;
    }
    .key-delete {
      width: 50px;
      // margin: 0 1%;
      // color: #827f7f;
      // background: #d7d7d8;
    }
    .tab-num {
      font-size: 18px;
      background: #dedede;
      color: #5a5959;
    }
    .tab-point {
      width: 20px;
    }
    .tab-blank {
      width: 80px;
      font-size: 12px;
      padding: 0 15px;
      color: #5a5959;
      line-height: 60px;
    }
    .tab-symbol {
      width: 20px;
      font-size: 18px;
    }
    .tab-enter {
      font-size: 30px;
      line-height: 54px;
    }
    // &:nth-child(2) {
    //   width: 93%;
    // }
    // &:nth-child(3) {
    //   width: 91%;
    // }
    // &:nth-child(4) {
    //   width: 93%;
    // }
    // &:nth-child(5) {
    //   width: 87%;
    // }
    // &:nth-child(6) {
    //   width: 90%;
    // }
  }
}
.keyboard-content{
    // background: url("../assets/bgimage.png");
    background: #679fc2;
    // background-size: 100% 100%;
    width: 227px;
    // height: 310px;
    height: 260px;
    // padding: 20px;
    border-radius: 15px;
    position: fixed;
    bottom: 30%;
    left: 0;
    right: 0;
    // margin: 0 auto;
    z-index: 99999999999999;
}


</style>
