Untitled

<template>
  <q-toggle
    v-model="advancedSearch"
    checked-icon="check"
    unchecked-icon="clear"
    label="Filter Lanjutan"
    style="margin-left: -8px; margin-bottom: 8px"
  />

  <div v-if="advancedSearch">
    <div class="flex items-end text-primary" style="gap: 4px">
      <q-icon name="place" size="sm" />
      <div class="text-weight-bold">Wilayah</div>
    </div>

    <div class="row q-mt-xs q-mb-md" style="gap: 8px">
      <div class="col-12 col-md-3">
        <q-select
          v-model="bum.value"
          dense
          outlined
          label="BUM"
          option-value="id"
          option-label="text"
          :loading="bum.loading"
          :options="bum.options"
          @update:model-value="handleGetProv"
        />
      </div>
      <div class="col-12 col-md-3">
        <q-select
          v-model="provinsi.value"
          dense
          outlined
          label="PROVINSI"
          option-value="id"
          option-label="text"
          :loading="provinsi.loading"
          :options="provinsi.options"
          @update:model-value="handleGetKabkot"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-italic text-grey">
                Pilih BUM Dahulu
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-12 col-md-3">
        <q-select
          v-model="kabkot.value"
          dense
          outlined
          label="KABUPATEN"
          option-value="id"
          option-label="text"
          :loading="kabkot.loading"
          :options="kabkot.options"
          @update:model-value="handleGetRegional"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-italic text-grey">
                Pilih PROVINSI Dahulu
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-12 col-md-3">
        <q-select
          v-model="regional.value"
          dense
          outlined
          label="REGIONAL"
          option-value="id"
          option-label="text"
          :loading="regional.loading"
          :options="regional.options"
          @update:model-value="handleGetArea"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-italic text-grey">
                Pilih KABUPATEN Dahulu
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-12 col-md-3">
        <q-select
          v-model="area.value"
          dense
          outlined
          label="AREA"
          option-value="id"
          option-label="text"
          :loading="area.loading"
          :options="area.options"
          @update:model-value="handleGetUnit"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-italic text-grey">
                Pilih REGIONAL Dahulu
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-12 col-md-3">
        <q-select
          v-model="unit.value"
          dense
          outlined
          label="UNIT"
          option-value="id"
          option-label="text"
          :loading="unit.loading"
          :options="unit.options"
          @update:model-value="handleGetTipe"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-italic text-grey">
                Pilih AREA Dahulu
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
    </div>

    <div class="flex items-end text-primary" style="gap: 4px">
      <q-icon name="list" size="sm" />
      <div class="text-weight-bold">Lainnya</div>
    </div>

    <div class="row q-mt-xs q-mb-md" style="gap: 8px">
      <div class="col-12 col-md-3">
        <q-select
          v-model="tipe.value"
          dense
          outlined
          label="TIPE CABANG"
          option-value="id"
          option-label="text"
          :loading="tipe.loading"
          :options="tipe.options"
        >
          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-italic text-grey">
                Pilih UNIT Dahulu
              </q-item-section>
            </q-item>
          </template>
        </q-select>
      </div>
      <div class="col-12 col-md-3">
        <q-select
          dense
          outlined
          label="FOTO"
          option-value="id"
          option-label="text"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getFilterWilayahNasabah } from "src/api";

export default {
  data: () => ({
    advancedSearch: false,
    bum: {
      value: "",
      options: [],
      loading: false,
    },
    provinsi: {
      value: "",
      options: [],
      loading: false,
    },
    kabkot: {
      value: "",
      options: [],
      loading: false,
    },
    regional: {
      value: "",
      options: [],
      loading: false,
    },
    area: {
      value: "",
      options: [],
      loading: false,
    },
    unit: {
      value: "",
      options: [],
      loading: false,
    },
    tipe: {
      value: "",
      options: [],
      loading: false,
    },
  }),
  mounted() {
    this.handleGetBum();
  },
  methods: {
    handleResetOptions(types = []) {
      types.map((type) => {
        this[type] = {
          value: "",
          options: [],
        };
      });
    },
    handleGetWilayah(params, type) {
      this[type].loading = true;
      getFilterWilayahNasabah(params)
        .then(({ data }) => {
          if (data.response_code === 300) {
            this[type].options = data.data;
          }

          resolve();
        })
        .finally(() => (this[type].loading = false));
    },
    handleGetBum() {
      const params = {
        jenis: "bum",
      };

      this.handleGetWilayah(params, "bum");
    },
    handleGetProv(props) {
      this.handleResetOptions([
        "provinsi",
        "kabkot",
        "regional",
        "area",
        "unit",
        "tipe",
      ]);

      const params = {
        jenis: "provinsi",
        bum: props.text,
      };
      this.handleGetWilayah(params, "provinsi");
    },
    handleGetKabkot(props) {
      this.handleResetOptions(["kabkot", "regional", "area", "unit", "tipe"]);

      const params = {
        jenis: "kabkot",
        bum: this.bum.value,
        provinsi: props.text,
      };

      this.handleGetWilayah(params, "kabkot");
    },
    handleGetRegional(props) {
      this.handleResetOptions(["regional", "area", "unit", "tipe"]);

      const params = {
        jenis: "regional",
        bum: this.bum.value,
        provinsi: this.provinsi.value,
        kabkot: props.text,
      };

      this.handleGetWilayah(params, "regional");
    },
    handleGetArea(props) {
      this.handleResetOptions(["area", "unit", "tipe"]);

      const params = {
        jenis: "area",
        bum: this.bum.value,
        provinsi: this.provinsi.value,
        kabkot: this.kabkot.value,
        regional: props.text,
      };

      this.handleGetWilayah(params, "area");
    },
    handleGetUnit(props) {
      this.handleResetOptions(["unit", "tipe"]);

      const params = {
        jenis: "unit",
        bum: this.bum.value,
        provinsi: this.provinsi.value,
        kabkot: this.kabkot.value,
        regional: this.regional.value,
        area: props.text,
      };

      this.handleGetWilayah(params, "unit");
    },
    handleGetTipe(props) {
      this.handleResetOptions(["tipe"]);

      const params = {
        jenis: "unit",
        bum: this.bum.value,
        provinsi: this.provinsi.value,
        kabkot: this.kabkot.value,
        regional: this.regional.value,
        area: this.area.value,
        unit: props.text,
      };

      this.handleGetWilayah(params, "tipe");
    },
  },
};
</script>

<style lang="scss">
.search-advanced {
  width: 100%;
}

@media (min-width: $breakpoint-md-min) {
  .search-advanced {
    width: 94.2%;
  }
}
</style>