<template>
  <div>
    <span>{{provinceShow}}</span>
    <span>{{cityShow}}</span>
    <span>{{countyShow}}</span>
  </div>
</template>
<script>
  import address from './address.json'
  export default {
    computed: {
      provinceShow () {
        if (this.province) {
          console.log('province')
          return this.address.filter((item) => {
            return item.value === this.province
          })[0].label
        }
        return ''
  
      },
      cityShow () {
        if (this.city) {
          console.log('city')
          return this.address.filter((item) => {
            return item.value === +this.city.toString().slice(0, 2)
          })[0].children.filter((item) => {
            return item.value === this.city
          })[0].label
        }
        return ''
  
      },
      countyShow () {
        if (this.county) {
          console.log('county')
          return this.address.filter((item) => {
            return item.value === +this.county.toString().slice(0, 2)
          })[0].children.filter((item) => {
            return item.value === +this.county.toString().slice(0, 4)
          })[0].label
        }
        return ''
  
      }
    },
    props: {
      province: Number,
      city: Number,
      county: Number
    },
    data () {
      return {
        address: address
      }
    }
  }
</script>

