<template>
  <selector v-model="valueSync" :options="countryList" value-field="tel" key-field="id" :label-field="item => item.nameZh + item.tel" filterable clearable />
</template>
<script>
import { list } from '@/api/country'
import selector from '@/components/Selector'
export default {
  components: { selector },
  props: {
    value: String
  },
  data() {
    return {
      valueSync: '',
      countryList: []
    }
  },
  watch: {
    valueSync() {
      this.$emit('input', this.valueSync)
    },
    value() {
      this.valueSync = this.value
    }
  },
  created() {
    if (this.value) {
      this.valueSync = this.value
    }
    list().then(res => {
      this.countryList = res.data
    })
  },
  methods: {

  }
}
</script>
