<template>
  <el-cascader
    filterable
    v-model="sValue"
    :options="cityList"
    :disabled="disabled"
    size="small"
    placeholder="请选择区划"
    :props="{ checkStrictly: true,value:'id',
              label:'name' ,emitPath:false}"
    clearable></el-cascader>
</template>

<script>
  import userApi from '@/api/system/lscity'

  export default {
    name: "driverAreaSelect",
    data() {
      return {
        cityList:[],
        sValue:''
      }
    },
    props:{
      value: {
        default() {
          return '';
        }
      },
      disabled:{
        type:Boolean,
        default() {
          return false;
        }
      },
      clearValidate:{
        type:Function
      }
    },
    watch:{
      sValue(){
        this.$emit('input', this.sValue)
        if(this.sValue&&this.clearValidate){
          this.clearValidate()
        }
      },
      value(){
        this.sValue=this.value
      }
    },
    mounted() {
      this.sValue=this.value
      this.getBaseData()
    },
    methods:{
      getBaseData(call) {
        userApi.getCityList().then(res => {
          let filterCityList = res.data.filter(item => item.pid == 3201)
          filterCityList.map(item => {
            let childList = this.filterCity(item.id,res.data)
            if(childList.length>0){
              item.children =childList
            }
          })
          this.cityList = filterCityList
        }).catch(e => {
          this.cityList = []
        })
      },
      filterCity(pid,area_list) {
        let list = area_list.filter(item => item.pid == pid)
        list.map(item => {
          let childList = this.filterCity(item.id,area_list)
          if(childList.length>0){
            item.children = childList
          }
        })
        return list
      },
    }
  }
</script>

<style scoped>

</style>
