<template>
  <el-cascader
    v-model="regionNames"
    style="width:240px"
    :options="regions"
    :props="{ checkStrictly: true }"
    placeholder="行政区域"
    @change="emitSelectValue"
    clearable
  />
</template>

<script>
import { getRegions } from "@/api/region";
export default {
  data() {
    return {
      regionNames: [],
      regions: []
    };
  },
  //   props:['organizationAttribution','permanentResidenceRegion','permanentResidenceTown'],
  props: ["_regionNames"],
  created() {
    this.getList();
    this.regionNames = this._regionNames;
    // console.log(233);
    // console.log(this.regionNames);
  },
  mounted(){
    // console.log(244);
  },
  methods: {
    getList() {
      getRegions().then(res => {
        const tempData = res.d;
        const countyArr = []; // 县,1
        tempData.map(county => {
          const countyObj = {
            value: county.root.name,
            label: county.root.name,
            disabled: true,
            children: []
          };
          countyArr.push(countyObj);
          county.node.map(town => {
            const townObj = {
              value: town.root.name,
              label: town.root.name,
              disabled: !town.root.check,
              children: []
            };
            countyObj.children.push(townObj);
            town.node.map(country => {
              townObj.children.push({
                value: country.root.name,
                label: country.root.name,
                disabled: !country.root.check,
              });
            });
          });
        });
        this.regions = countyArr;
      });
    },
    emitSelectValue(val) {
      this.$emit("input", val);
    }
  }
};
</script>

<style></style>
