import { subareaQueryAll } from '@/api/subarea'
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: 'subareaAreaList' }" 
          :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'
    },
    // 只能选择分区，如果区域下无分区不能选择
    onlySubarea:{
      type: Boolean,
      default: false
    },
    // true可选择一级、二级，false只能选择叶子节点
    changeOnSelect:{
        type: Boolean,
        default: true
    },
    // 只显示那一级数据，空全部显示
    showLeve:{
      type: String,
      default: ''
    }
  },
  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 () {
      subareaQueryAll().then(res => {
            if (res.status == 200) {
                // 显示一级二级
                if(this.showLeve == ''){
                  res.data&&res.data.map(item => {
                    item.name = item.subareaName
                    item.areaSn = item.subareaSn
                    if(item.subareaAreaList){
                      item.subareaAreaList.map(cd => {
                        cd.name = cd.subareaAreaName
                        cd.areaSn = cd.subareaAreaSn
                      })
                    }else{
                      if(this.onlySubarea){
                        item.disabled = true
                      }
                    }
                  })
                  this.list = res.data
                }
                
                // 只显示一级
                if(this.showLeve == 1){
                  const ret = []
                  res.data&&res.data.map(item => {
                    item.name = item.subareaName
                    item.areaSn = item.subareaSn
                    delete item.subareaAreaList
                    ret.push(item)
                  })
                  this.list = ret
                }

                // 只显示二级
                if(this.showLeve == 2){
                  const ret = []
                  res.data&&res.data.map(item => {
                    if(item.subareaAreaList){
                      item.subareaAreaList.map(cd => {
                        cd.name = cd.subareaAreaName
                        cd.areaSn = cd.subareaAreaSn
                        ret.push(cd)
                      })
                    }
                  })
                  this.list = ret
                }
                
            }
        })
    },
    clearData(){
       this.handleChange([],null)
    }
  },
};

export default AreaList