<!--选择坐席-->
<template>
  <div id="root">
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal = "false"
      :title="dialogTitles[type]"
      width="350px"
      append-to-body>
      <div class="pinPage">
        <el-radio-group v-if="seatList.length>0" v-model="tel" size="small">
          <el-radio v-for="seat of seatList" v-if="seat.exten!=self" :key="seat.exten" :label="seat.exten" class="seat-radio" border>{{ seat.exten }}[{{ seat.name }}]</el-radio>
        </el-radio-group>
        <div v-else>
          暂无可转移分机
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :disabled="seatList.length==0" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ChooseSeats',
  props: {
    seatList: { // 在线坐席列表
      type: Array,
      default: function() {
        return []
      }
    },
    self: {
      type: String,
      default: ''
    } // 排除自己
  },
  data() {
    return {
      type: 'in', // 内呼in, 会议meeting, 转接transfer
      dialogTitles: {
        in: '内呼',
        meeting: '三方通话',
        transfer: '转接'
      },
      dialogVisible: false, // 对话框显示状态
      tel: '', // 电话
      currentNumber: '' // 当前数字
    }
  },
  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;*/
  }
  .seat-radio{
    margin-bottom:10px;
    margin-left:10px;
    display: block;
  }
</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>-->