<!--Parent component-->
.
.
<region-map v-model="selectedFilterByDistrict" />
.
.


<script>
export default {
  props: ['list', 'listType', 'listService'],
  data() {
    return {
      selectedFilterByDistrict: null,
      selectedFilterByType: null,
      selectedFilterByService: null
    }
  },
  computed: {
    getList() {
      let filteredList = this.list

      if (this.selectedFilterByType) {
        filteredList = filteredList.filter(
          reference =>
            reference.ref_type &&
            reference.ref_type.id === this.selectedFilterByType
        )
      }

      if (this.selectedFilterByService) {
        filteredList = filteredList.filter(
          reference =>
            reference.ref_service &&
            reference.ref_service.find(
              ({ id }) => id === this.selectedFilterByService
            )
        )
      }

      if (this.selectedFilterByDistrict) {
        filteredList = filteredList.filter(
          reference =>
            reference.ref_county &&
            reference.ref_county.id === this.selectedFilterByDistrict
        )
      }

      return filteredList
    }
  },
  methods: {
    filterByType(id) {
      this.selectedFilterByDistrict = null
      this.selectedFilterByService = null
      this.selectedFilterByType = id
    },
    filterByService(id) {
      this.selectedFilterByDistrict = null
      this.selectedFilterByService = id
      this.selectedFilterByType = null
    },
    filterByDistrict(id) {
      this.selectedFilterByDistrict = id
      this.selectedFilterByService = null
      this.selectedFilterByType = null
    },
    debug(id) {
      alert('DEBUG - ', id)
    }
  },
  watch: {
    selectedFilterByDistrict() {
      this.selectedFilterByService = null
      this.selectedFilterByType = null
    }
  },
  mounted() {
    //console.log(this.list, 'list')
    // console.log(this.listType, 'listType')
    // console.log(this.listService, 'listService')
  }
}
</script>



<!--Child RegionMap-->
<script>
let pointersArr = []
for (let i = 1; i <= 14; i++) {
  pointersArr[i] = {
    filled: false
  }
}
export default {
  emits: ['update:modelValue'],
  props: ['modelValue'],
  data() {
    return {
      pointers: pointersArr
      //selectedRegion: null
    }
  },
  computed: {
    selectedRegion: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue', val)
      }
    }
  },
  methods: {
    fill(id) {
      this.pointers[id].filled = true
    },
    unfill(id) {
      if (this.selectedRegion && this.selectedRegion === id) {
        //
      } else {
        this.pointers[id].filled = false
      }
    },
    unfillAll() {
      for (let i = 1; i <= 14; i++) {
        this.pointers[i].filled = false
      }
    },
    selectRegion(id) {
      this.selectedRegion = id
    }
  },
  watch: {
    selectedRegion(id) {
      this.unfillAll()
      if (id) {
        this.fill(id)
      }
    }
  }
}
</script>