<template>
    <el-cascader
      :placeholder= 'placeholder'
      :options="options"
      :filterable = 'filterable'
      :disabled = "disabled"
      :value ="value"
      :expand-trigger = "expandTrigger"
      :size = "size"
      :show-all-levels = 'showAllLevels'
      @active-item-change = '$emit("active-item-change")'
      @change="updateValue"
    ></el-cascader>
</template>
<script>
  import address from './address.json'
  export default {
    props: {
      format: Boolean,
      showAllLevels: {
        type: Boolean,
        default: true
      },
      expandTrigger: String,
      value: [String, Array],
      size: String,
      disabled: Boolean,
      filterable: Boolean,
      placeholder: String
    },
    data () {
      return {
        options: address
      }
    },
    computed: {
      formatValue: {
        get () {
          return this.value.split('-')
        }
      }
    },
    methods: {
      updateValue (item) {
        if (this.format) {
          this.$emit('input', this.formatItem(item))
        }
        this.$emit('input', item)
        this.$emit('change', item)
      },
      formatItem (arr) {
        var result = ''
  
        arr.reduce((before, now, index) => {
          let val = before.filter((item) => {
            return item.value === now
          })
  
          result += '-' + val[0].label
  
          return val[0].children
        }, address)
        return result.substring(1)
      }
    }
  }
</script>
