import { getAreaAll } from '@/api/data'
import { arrayToTree } from '@/utils/util'
const AreaList = {
  template: `
     <a-cascader
          :size="size"
          :changeOnSelect="changeOnSelect"
          :show-search="{ filter }"
          @change="handleChange"
          :value="defaultVal"
          expand-trigger="hover"
          :allowClear="allowClear"
          :options="list"
          :field-names="{ label: 'name', value: defValKey, children: 'children' }" 
          :id="id"
          :placeholder="placeholder" 
          style="width: 100%;" />
    `,
  props: {
    value: {
      type: Array,
      defatut: function(){
        return []
      }
    },
    id: {
      type: String,
      default: ''
    },
    defValKey: {
      type: String,
      default: 'areaSn'
    },
    placeholder: {
      type: String,
      default: '请选择省/市/区'
    },
    allowClear: {
        type: Boolean,
        default: true
    },
    size: {
        type: String,
        default: 'default'
    },
    changeOnSelect:{
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
      defaultVal: this.value,
      list: []
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.defaultVal = newValue
    },
  },
  mounted() {
    this.getArea()
  },
  methods: {
    filter(inputValue, path) {
        return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    handleChange (value, selectedOptions) {
        this.defaultVal = value
        this.$emit('input', this.defaultVal)
        this.$emit('change', this.defaultVal, selectedOptions)
    },
    //  省/市/区
    getArea () {
        getAreaAll().then(res => {
            if (res.status == 200) {
                this.list = arrayToTree(res.data,0)
            }
        })
    },
    clearData(){
       this.handleChange([],null)
    }
  },
};

export default AreaList