<template>
  <el-row>
    <el-col :span ="7">
      <el-select v-model="code"  placeholder="请选择区号"  filterable @change ="updateValue">
        <el-option :label="item.label" :value='item.code' :key ="index" v-for = "(item, index) in codeList"></el-option>
      </el-select>
    </el-col>
    <el-col :span ="1" class = 'ta-c'>-</el-col>
    <el-col :span ="11">
      <el-input v-model ="number" type ="number" placeholder="请填写电话号码"  @change ="updateValue"></el-input>
    </el-col>
    <el-col :span = '1' class ="ta-c">-</el-col>
    <el-col :span = "4">
      <el-input placeholder ="分机号"  type ="number" v-model = "child"  @change ="updateValue"></el-input>
    </el-col>
  </el-row>
</template>
<script>
  import codeList from './code.json'
  export default {
    data () {
      return {
        codeList: codeList,
        code: this.value.split('-', 3)[0] ? this.value.split('-', 3)[0] : '',
        number: this.value.split('-', 3)[1] ? this.value.split('-', 3)[1] : '',
        child: this.value.split('-', 3)[2] ? this.value.split('-', 3)[2] : ''
      }
    },
    methods: {
      updateValue () {
        let value = this.code.concat('-', this.number, '-', this.child)
  
        this.$emit('input', value)
      }
    },
    props: {
      value: {
        type: String,
        default: '--'
      }
    }
  }
</script>
