<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'
import country from './country.json'
import country_cn from './country_cn.json'
export default {
  props: {
    format: Boolean,
    showAllLevels: {
      type: Boolean,
      default: true
    },
    level: {
      default: 3
    },
    expandTrigger: String,
    value: {
      type: String,
      required: true
    },
    options: {
      default: () => [],
      type: Array
    },
    type: {
      type: String
    },
    size: String,
    disabled: Boolean,
    filterable: Boolean,
    placeholder: String,
    language: {
      default: 'EN',
      type: String
    }
  },
  computed: {
    option () {
      if (this.type === 'address') {
        if (this.level === 1) {
          return address.map((item) => {
            return {
              value: item.value,
              label: item.label
            }
          })
        }
        if (this.level === 2) {
          return address.map((item) => {
            return {
              value: item.value,
              label: item.label,
              children: item.children && item.children.length && item.children.map((innerItem) => {
                return {
                  value: innerItem.value,
                  label: innerItem.label
                }
              })
            }
          })
        }
        if (this.level !== 1 || this.level !== 2) {
          return address
        }
      }
      if (this.type === 'department') {
        return department
      }
      if (this.type === 'title') {
        return title
      }
      if (this.type === 'country') {
        if (this.language === 'CN') {
          return country_cn
        } 
        return country
      }
      return this.options
    },
    formatValue: {
      get () {
        return this.value.split('-')
      },
      set (v) {
        if (this.showAllLevels) {
          this.$emit('input', v.join('-'))
        } else {
          this.$emit('input', v[v.length - 1])
        }
      }
    }
  }
}
</script>
