<template>
  <div id="root">
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal = "false"
      title="拨号"
      width="350px"
      append-to-body>
      <div class="pinPage">
        <el-row>
          <el-col>
            <el-button class="keyboard-input" >{{ tel }}</el-button>
            <!--<el-input :value="tel" type="text" class="keyboard-input" autofocus/>-->
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col v-for="(item, key) in buttons" :key = "key" :span="8">
            <div class="inputBtnList">
              <el-button :class="{'active-btn':item==currentNumber}" class="keyboard-btn" @click="traceNumber">{{ item }}</el-button>
            </div>
          </el-col>
        </el-row>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Keyboard',
  data() {
    return {
      type: 'in', // 内呼or 外呼
      dialogVisible: false, // 对话框显示状态
      tel: '', // 电话
      currentNumber: '', // 当前数字
      buttons: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '清空', 0, '回退']
    }
  },
  created() {

  },
  methods: {
    // 初始化对话框,type=in表示内呼，out表示外呼
    initDialog(type) {
      this.onKeyEvent()
      this.tel = ''
      this.type = type
      this.currentNumber = ''
      this.dialogVisible = true
    },
    traceNumber: function(event) {
      const btnText = event.target.textContent
      this.currentNumber = btnText
      if (btnText === '清空') {
        this.tel = ''
      } else if (btnText === '回退') {
        this.tel = this.tel.substring(0, this.tel.length - 1)
      } else {
        this.tel += btnText
      }
    },
    onKeyEvent() {
      const keyboard = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
      document.onkeydown = e => {
        const _key = window.event.keyCode
        console.log(_key)
        if (_key === 13) { // 回车键
          this.submit()
        } else if (_key === 8) {
          this.tel = this.tel.substring(0, this.tel.length - 1)
        } else if (_key >= 48 && _key <= 57) {
          this.currentNumber = keyboard[_key - 48]
          this.tel += this.currentNumber
        }
      }
    },
    submit() {
      this.$emit('call', this.type, this.tel)
      this.handleClose()
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .pinPage{
    overflow: hidden;
    width: 100%;
    /*height: 200px*/
  }
  .inputBtnList{
    margin: 0 auto;
    /*width: 100px;*/
    /*height: 100px;*/
    box-sizing: border-box;
  }
  .keyboard-btn{
    width: 100%;
    height: 60px;
    font-size:18px;
    font-weight: 600;
  }
  .active-btn{
    background-color: #ecf5ff !important;
    color: #409eff !important;
  }
  .keyboard-input {
    height:50px;
    width: 100%;
    font-size:18px;
  }
  .keyboard-btn:focus{
    background-color: #ffffff;
    color: #606266;
    border-color:#dcdfe6
  }
  input{
    /*background-color: transparent;*/
  }
</style>
<!--<style rel="stylesheet/scss" lang="scss">-->
  <!--.keyboard-input {-->
    <!--height:50px;-->
    <!--width: 100%;-->
    <!--font-size:18px;-->
    <!--.el-input__inner{-->
      <!--height:50px !important;-->
    <!--}-->
    <!--input{-->
      <!--font-size:18px;-->
      <!--text-align: center;-->
    <!--}-->
  <!--}-->
<!--</style>-->