<!--选择分机号-->
<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-radio-group v-model="currentExten" size="small">
          <el-radio v-for="exten of extenList" :key="exten" :label="exten" border>{{ exten }}</el-radio>
        </el-radio-group>
      </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: 'ChooseExten',
  props: {
    extenList: { // 在线坐席列表
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false, // 对话框显示状态
      currentExten: '' // 选中分机号
    }
  },
  methods: {
    // 初始化对话框,type=in表示内呼，out表示外呼
    initDialog() {
      this.currentExten = ''
      this.dialogVisible = true
    },
    submit() {
      this.$emit('finish', this.currentExten)
      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>-->