<template>
  <div class="by-area">
    <el-row>
      <el-col :span="8">
        <div class="area-box first">
          <div class="left-label">省：</div>
          <div class="right-area">
            <el-select v-model="provinceCode" clearable :disabled="attrs.disabled" class="areaSelect" :class="{'error':provinceError}" @change="onProvince" placeholder="请选择省">
              <el-option
                v-for="item in optionsProvince"
                :key="item.addrCode"
                :label="item.province"
                :value="item.addrCode">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="8" v-if="!attrs.show || attrs.show != 'province'">
        <div class="area-box">
          <div class="left-label">市：</div>
          <div class="right-area">
            <el-select v-model="cityCode" clearable :disabled="attrs.disabled" class="areaSelect" :class="{'error':cityError}" @change="onCity" placeholder="请选择市">
              <el-option
                v-for="item in optionsCity"
                :key="item.addrCode"
                :label="item.city"
                :value="item.addrCode">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="8" v-if="!attrs.show || (attrs.show != 'province' && attrs.show != 'city')">
        <div class="area-box last">
          <div class="left-label">区/县：</div>
          <div class="right-area">
            <el-select v-model="countyCode" clearable :disabled="attrs.disabled" class="areaSelect" :class="{'error':countyError}" @change="onCounty" placeholder="请选择区/县">
              <el-option
                v-for="item in optionsCounty"
                :key="item.addrCode"
                :label="item.district"
                :value="item.addrCode">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <!-- <el-col :span="6" v-if="!attrs.show || (attrs.show != 'province' && attrs.show != 'city' && attrs.show != 'county')" >
        <div class="area-box last">
          <div class="left-label">街道：</div>
          <div class="right-area">
            <el-select v-model="townCode" clearable :disabled="attrs.disabled" class="areaSelect" @change="onTown" size="small" placeholder="请选择街道">
              <el-option
                v-for="item in optionsTown"
                :key="item.id"
                :label="item.extName"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col> -->
    </el-row>
  </div>
</template>

<script setup>
/*
  config:{
    attr:{
      province:'' //省
      provinceCode:'' //省编码
      city:''   //市
      cityCode:''  //市编码
      county:''  //县/区
      countyCode:''   //县/区编码
      town:''  //街道
      townCode:''  //街道编码
      show:'province/city/county'   //显示的层级
    }
  }
*/

  import { computed,getCurrentInstance,nextTick,onUnmounted  } from "vue";
  import $bus from '@/benyun/utils/bus.js'
  const { proxy } = getCurrentInstance();
  const value = ref('')
  const config = ref({})
  const emit = defineEmits();
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })

  const provinceCode=ref('');
  const cityCode=ref('');
  const countyCode=ref('');
  const townCode=ref('');
  const province=ref('');
  const city=ref('');
  const county=ref('');
  const town=ref('');
  const area=ref('');
  const areaCode=ref('');
  const optionsProvince=ref([]);
  const optionsCity=ref([]);
  const optionsCounty=ref([]);
  const optionsTown=ref([]);
  const provinceError = ref(false);
  const cityError = ref(false);
  const countyError = ref(false);

  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }
   //获取配置
   const getConfig = () => {
    return lodash.cloneDeep(config.value)
  }

  const setAllValue = (data) => {
    if(data[attrs.value.areaCode]){
      provinceCode.value=data[attrs.value.areaCode].substring(0,2) + '0000000000';
      cityCode.value=data[attrs.value.areaCode].substring(0,4) + '00000000';
      countyCode.value=data[attrs.value.areaCode].substring(0,6) + '000000';
      if(provinceCode.value){
        getCity(provinceCode.value);
      }
      if(cityCode.value){
        getCounty(cityCode.value);
      }
    }


    // if(attrs.value.province){
    //   province.value=data[attrs.value.province];
    // }
    // if(attrs.value.provinceCode){
    //   provinceCode.value=data[attrs.value.provinceCode];
    // }
    // if(attrs.value.city){
    //   city.value=data[attrs.value.city];
    // }
    // if(attrs.value.cityCode){
    //   cityCode.value=data[attrs.value.cityCode];
    //   if(provinceCode.value){
    //     getCity(provinceCode.value);
    //   }
    // }
    // if(attrs.value.county){
    //   county.value=data[attrs.value.county];
    // }
    // if(attrs.value.countyCode){
    //   countyCode.value=data[attrs.value.countyCode];
    //   if(cityCode.value){
    //     getCounty(cityCode.value);
    //   }
    // }
    // if(attrs.value.town){
    //   town.value=data[attrs.value.town];
    // }
    // if(attrs.value.townCode){
    //   townCode.value=data[attrs.value.townCode];
    //   if(countyCode.value){
    //     getTown(countyCode.value);
    //   }
    // }
    if(attrs.value.areaCode){
      areaCode.value=data[attrs.value.areaCode];
    }
    if(attrs.value.area){
      area.value=data[attrs.value.area];
    }
  }
  const setValue = v => {
    setAllValue(props.parentValue);
  }
  const clearValue = () => {
    provinceCode.value='';
    cityCode.value='';
    countyCode.value='';
    townCode.value='';
    province.value='';
    city.value='';
    county.value='';
    town.value='';
    area.value='';
    areaCode.value='';
    optionsCity.value=[];
    optionsCounty.value=[];
    optionsTown.value=[];
  }
  const onProvince = v => {
    province.value = '';
    area.value = '';
    for(const item of optionsProvince.value){
      if(item.addrCode == v){
        province.value = item.province;
        area.value = item.addrInfo;
      }
    }
    city.value='';
    cityCode.value = '';
    county.value='';
    countyCode.value = '';
    optionsCity.value = [];
    optionsCounty.value = [];
    townCode.value = '';
    town.value = '';
    optionsTown.value=[];
    areaCode.value = v;
    provinceError.value = false;
    if(v){
      getCity(v);
    }
    onChange();
  }
  const onCity = v => {
    city.value = '';
    area.value = '';
    for(const item of optionsCity.value){
      if(item.addrCode == v){
        city.value = item.city;
        area.value = item.addrInfo;
      }
    }
    county.value='';
    countyCode.value = '';
    optionsCounty.value = [];

    areaCode.value = v;
    cityError.value = false;
    if(v){
      getCounty(v);
    }
    onChange();
  }
  const onCounty = v => {
    county.value = '';
    area.value = '';
    for(const item of optionsCounty.value){
      if(item.addrCode == v){
        county.value = item.district;
        area.value = item.addrInfo;
      }
    }
    // townCode.value = '';
    // town.value = '';
    // optionsTown.value=[];
    
    areaCode.value = v;
    countyError.value = false;
    // if(v){
    //   getTown(v);
    // }
    onChange();
  }
  const onTown = v => {
    town.value = '';
    area.value = '';
    for(const item of optionsTown.value){
      if(item.id == v){
        town.value = item.extName;
      }
    }
    areaCode.value = v;
    onChange();
  }
  const getValue = () => {
    let obj={};
    if(attrs.value.province){
      obj[attrs.value.province]=province.value;
    }
    if(attrs.value.provinceCode){
      obj[attrs.value.provinceCode]=provinceCode.value;
    }
    if(attrs.value.city){
      obj[attrs.value.city]=city.value;
    }
    if(attrs.value.cityCode){
      obj[attrs.value.cityCode]=cityCode.value
    }
    if(attrs.value.county){
      obj[attrs.value.county]=county.value;
    }
    if(attrs.value.countyCode){
      obj[attrs.value.countyCode]=countyCode.value
    }
    // if(attrs.value.town){
    //   obj[attrs.value.town]=town.value;
    // }
    // if(attrs.value.townCode){
    //   obj[attrs.value.townCode]=townCode.value
    // }
    if(attrs.value.areaCode){
      obj[attrs.value.areaCode]=areaCode.value;
    }
    if(attrs.value.area){
      obj[attrs.value.area]=area.value;
    }
    return obj;
  }
  const onChange = () => {
    let data = getValue()
    emit('onChange', data);
    let objData = {
      provinceCode: provinceCode.value,
      cityCode: cityCode.value,
      countyCode: countyCode.value,
      townCode: townCode.value,
      province: province.value,
      city: city.value,
      county: county.value,
      town: town.value,
      area: area.value,
      areaCode: areaCode.value
    }
    $bus.emit('areaEvent',objData);// 提供数据
  }
  //获取省数据
  const getProvince = () => {
    request({
      params:{
        level:'province'
      },
      success:data => {
        optionsProvince.value = data;
      }
    })
  }
  //获取市
  const getCity = v => {
    request({
      params:{
        code:v,
        level:'city'
      },
      success:data => {
        optionsCity.value = data;
      }
    })
  }
  //获取县/区
  const getCounty = v => {
    request({
      params:{
        code:v,
        level:'zone'
      },
      success:data => {
        optionsCounty.value = data;
      }
    })
  }
  // //获取街道
  // const getTown = v => {
  //   request({
  //     params:{
  //       pid:v
  //     },
  //     success:data => {
  //       optionsTown.value = data;
  //     }
  //   })
  // }
  const request = data => {
    let parame = {
      url:'/plan/getAddrCategory',
      method: 'GET',
    };
    parame.params = data.params;

    proxy.request(parame).then(res => {
      data.success(res.data);
    }).catch(err => {})
  }
  onUnmounted(() => {
      $bus.off('areaEvent');
  });

  defineExpose({
    getValue,setValue,getConfig,setConfig,clearValue
  })
  nextTick(() => {
    if(props && props.propConfig){
      setConfig(props.propConfig)
    }
    if(props && props.parentValue){
      setAllValue(props.parentValue);
    }

    getProvince();
  })
  
</script>

<style lang="scss" scoped>
.by-area{
  width: 100%;
  .area-box{
    padding: 0 4px;
    display: flex;
    align-items: center;
    .left-label{
      width: 80px;
      text-align: right;
      // flex-shrink: 0;
      // .require{
      //   color: #F00;
      //   padding: 0 2px;
      // }
    }
    .right-area{
      width: 100%;
    }
  }
  .first{
    padding-left: 0;
  }
  .last{
    padding-right: 0;
  }
}
</style>