<template>
  <div>
<!--    <avue-cascader-->
<!--      ref="cascaderAddr"-->
<!--      v-model="selected"-->
<!--      :dic="data"-->
<!--      key-value="value"-->
<!--      @change="handleAddressFun"-->
<!--      @blur="handleAddressFun"-->
<!--      :props="{ checkStrictly: true }"-->
<!--    ></avue-cascader>-->
<!--    <avue-cascader v-model="selected" :dic="data" key-value="value" @change="$emit('change', $event)"></avue-cascader>-->
    <el-cascader
      v-model="selected"
      :options="data"
      key-value="value"
      @change="handleAddressFun"
      :props="props"
      clearable>
    </el-cascader>
  </div>
</template>

<script>
  import {areaData} from "./areaData.js";

  export default {
    name: "cy-area-select",
    data(){
      return {
        data:areaData
      }
    },
    model: {
      prop: 'selected',
      event: 'change'
    },
    props: {
      selected: {
        type: Array
      },
      props: {
        type: Object,
        default: {}
      }
    },
    mounted() {
      let _this = this;
    },
    methods: {
      handleAddressFun(value, b, c){
        let _this = this;
        let labelArr = [];
        let regionProvince = '', regionCity = '', regionArea = '';
        if (value){
          if (value.length > 0){
            regionProvince = value[0];
            regionCity = value[1];
          }
          if (value.length > 1){
            regionArea = value[2];
          }
          for (let i = 0; i < _this.data.length; i++) {
            let province = _this.data[i];
            if (province.value == regionProvince){
              labelArr.push(province.label);
              // debugger
              for (let j = 0; j < province.children.length; j++) {
                let city = province.children[j];
                if (city.value == regionCity) {
                  labelArr.push(city.label);
                  // debugger
                  for (let k = 0; k < city.children.length; k++) {
                    let area = city.children[k];
                    if (area.value == regionArea){
                      labelArr.push(area.label);
                      // debugger
                      break;
                    }
                  }
                  break;
                }
              }
              break
            }
          }
          value.push({label:labelArr.join('-')});
          this.$emit('change', value)
        }
      },
    }
  }
</script>

<style scoped>

</style>
