<template>
    <el-cascader
      :placeholder= 'placeholder'
      :options="option"
      :filterable = 'filterable'
      :disabled = "disabled"
      v-model ="formatValue"
      :expand-trigger = "expandTrigger"
      :size = "size"
      :show-all-levels = 'showAllLevels'
      @active-item-change = '$emit("active-item-change")'
    ></el-cascader>
</template>
<script>
  import address from './address.json'
  import department from './department.json'
  import title from './title.json'
  export default {
    props: {
      format: Boolean,
      showAllLevels: {
        type: Boolean,
        default: true
      },
      expandTrigger: String,
      value: {
        type: String,
        required: true
      },
      options: {
        default: () => [],
        type: Array
      },
      type: {
        type: String
      },
      size: String,
      disabled: Boolean,
      filterable: Boolean,
      placeholder: String
    },
    computed: {
      option () {
        switch (this.type) {
          case 'address': return address
          case 'department': return department
          case 'title': return title
          default: return this.options
        }
      },
      formatValue: {
        get () {
          return this.value.split('-').length >= 2 ? this.value.split('-') : []
        },
        set (v) {
          if (this.showAllLevels) {
            this.$emit('input', v.join('-'))
          } else {
            this.$emit('input', v[v.length - 1])
          }
        }
      }
    }
  }
</script>
