<template>
  <div>
    <div class="row col-12 items-center q-pt-md">
      <div class="bg-white q-px-sm topCard">
        <span class="text-weight-medium">เพิ่มหน่วยงาน</span>
        <q-btn
          flat
          color="primary"
          size="12px"
          icon="mdi-plus"
          dense
          class="q-mx-sm"
          @click="addOrganizationItem()"
        >
          <q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
        </q-btn>
      </div>
    </div>
    <!-- การ์ดเพิ่มหน่วยงาน-->
    <q-form ref="myForm">
      <q-card bordered flat>
        <div class="overScroll q-py-sm">
          <q-card
            flat
            class="bg-grey-2 q-pa-sm q-ma-sm row col-12 items-start"
            v-for="(item, index) in organizations"
            :key="index"
          >
            <div>
              <q-avatar
                class="q-mr-sm"
                size="25px"
                color="grey-3"
                text-color="grey-9"
                >{{ index + 1 }}</q-avatar
              >
            </div>
            <q-btn
              flat
              round
              color="red"
              size="10px"
              class="q-mr-sm"
              icon="mdi-trash-can-outline"
              dense
              @click="deleteOrgItem(item)"
            />
            <!-- @update:model-value="updateGoverment" -->
            <div class="col-11 row q-col-gutter-xs">
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationOrganizationId"
                :options="organizationOri"
                label="หน่วยงาน"
                class="col-xs-12 col-sm-6 col-md-6"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '1')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
                :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
              />
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationAgencyCode"
                :options="organizationAgencyCode"
                label="รหัสหน่วยงาน"
                class="col-xs-12 col-sm-2 col-md-2"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterCodeSelector(inputValue, doneFn, '2',item)
                "
                @update:model-value="(value:any) => updateGovernmentCode(value, item)"
                option-label="agencyCode"
                option-value="agencyCode"
                map-options
                emit-value
                clearable
                :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสหน่วยงาน'}`]"
              />

              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationGovernmentCode"
                :options="item.organizationGovernmentCodeOption"
                label="รหัสส่วนราชการ"
                class="col-xs-12 col-sm-2 col-md-2"
                use-input
                input-debounce="0"
                @filter="
                    (inputValue:any, doneFn:Function) =>
                    filterCodeSelector(inputValue, doneFn, '3',item)
                "
                @update:model-value="(value:any) => updateAgencyCode(value, item)"
                option-label="governmentCode"
                option-value="governmentCode"
                map-options
                emit-value
                clearable
                :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
              />

              <q-input
                hide-bottom-space
                dense
                readonly
                outlined
                :modelValue="item.organizationShortName.toString() ?? ''"
                label="ชื่อย่อหน่วยงาน"
                class="col-xs-12 col-sm-2 col-md-2"
              />
              <q-input
                dense
                outlined
                v-model="item.agency"
                class="col-xs-12 col-sm-2 col-md-2"
                label="เลขที่หน่วยงาน"
              />
              <q-input
                dense
                outlined
                v-model="item.government"
                class="col-xs-12 col-sm-2 col-md-2"
                label="เลขที่ส่วนราชการ"
              />
              <q-input
                dense
                outlined
                v-model="item.department"
                class="col-xs-12 col-sm-2 col-md-2"
                label="เลขที่ฝ่าย/ส่วน"
              />
              <q-input
                dense
                outlined
                v-model="item.pile"
                class="col-xs-12 col-sm-2 col-md-2"
                label="เลขที่กอง"
              />
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationTypeId"
                :options="organizationType"
                label="ประเภทหน่วยงาน"
                class="col-xs-12 col-sm-2 col-md-2"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '6')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
              /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationLevelId"
                :options="organizationLevel"
                label="ระดับหน่วยงาน"
                class="col-xs-12 col-sm-2 col-md-2"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '7')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
                :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
              />
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationAgencyId"
                :options="organizationAgency"
                label="หน่วยงานต้นสังกัด"
                class="col-xs-12 col-sm-4 col-md-4"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '1')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
              />
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationGovernmentAgencyId"
                :options="organizationGovernmentAgency"
                label="ส่วนราชการต้นสังกัด"
                class="col-xs-12 col-sm-6 col-md-6"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '1')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
              />
              <q-input
                dense
                outlined
                v-model="item.organizationOrder"
                class="col-xs-12 col-sm-2 col-md-2"
                type="number"
                label="ลำดับผังโครงสร้าง"
              />
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationExternalPhoneId"
                :options="organizationTelExternal"
                label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
                class="col-xs-12 col-sm-4 col-md-4"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '8')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
              />
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationInternalPhoneId"
                :options="organizationTelInternal"
                label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
                class="col-xs-12 col-sm-4 col-md-4"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '9')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
              />
              <selector
                hide-bottom-space
                dense
                outlined
                v-model="item.organizationFaxId"
                :options="organizationFax"
                label="หมายเลขโทรสาร"
                class="col-xs-12 col-sm-4 col-md-4"
                use-input
                input-debounce="0"
                @filter="
                  (inputValue:any, doneFn:Function) =>
                    filterSelector(inputValue, doneFn, '10')
                "
                option-label="name"
                option-value="id"
                map-options
                emit-value
                clearable
              />
              <div class="col-xs-12 col-sm-12 col-md-12">
                <q-input
                  :class="getClass(true)"
                  hide-bottom-space
                  :outlined="true"
                  dense
                  lazy-rules
                  :readonly="false"
                  :borderless="false"
                  v-model="item.organizationUserNote"
                  :label="`${'หน้าที่รับผิดชอบ'}`"
                  type="textarea"
                />
              </div>
            </div>
          </q-card>
        </div>
      </q-card>
    </q-form>
  </div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent, watch, onMounted } from "vue";
import type { PropType } from "vue";
import { useQuasar, QForm } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
  DataOption,
  OrganizaOption,
  GovermentOption,
} from "../../interface/index/Main";
import { log } from "console";

// import { organizationSet } from "../interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";

const props = defineProps({
  organizprops: Array as PropType<OrganizaOption[]>,
  formprops: QForm as PropType<QForm | null>,
});

const emit = defineEmits(["update:organizprops", "update:formprops"]);

const mixin = useCounterMixin();
const { showLoader, hideLoader } = mixin;

const $q = useQuasar(); // show dialog
const myForm = ref<QForm | null>(null);

// const organizations = ref<OrganizaOption[]>([]);
const organizations = ref<OrganizaOption[]>([]);
emit("update:organizprops", organizations.value);
// emit("update:formprops", myForm.value);

watch(myForm, (form: QForm | null, prevForm: QForm | null) => {
  emit("update:formprops", form);
});

const organizationFax = ref<DataOption[]>([]);
const organizationTelInternal = ref<DataOption[]>([]);
const organizationTelExternal = ref<DataOption[]>([]);
const organizationFaxFilter = ref<DataOption[]>([]);
const organizationTelInternalFilter = ref<DataOption[]>([]);
const organizationTelExternalFilter = ref<DataOption[]>([]);

const organizationGovernmentAgency = ref<DataOption[]>([]);
const organizationGovernmentAgencyFilter = ref<DataOption[]>([]);
const organizationAgency = ref<DataOption[]>([]);
const organizationAgencyFilter = ref<DataOption[]>([]);
const organizationType = ref<DataOption[]>([]);
const organizationTypeFilter = ref<DataOption[]>([]);

const organizationLevel = ref<DataOption[]>([]);
const organizationLevelFilter = ref<DataOption[]>([]);
const organizationOri = ref<DataOption[]>([]);
const organizationOriFilter = ref<DataOption[]>([]);
const organizationGovernmentCode = ref<GovermentOption[]>([]);
const organizationGovernmentCodeFilter = ref<GovermentOption[]>([]);
const organizationAgencyCode = ref<GovermentOption[]>([]);
const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);

onMounted(async () => {
  hideLoader();
  await fetchOrganizationOri();
  await fetchOrganizationAgencyCode();
  await fetchOrganizationGovernmentCode();

  await fetchOrganizationAgency();
  await fetchOrganizationGovernmentAgency();
  await fetchOrganizationType();
  await fetchOrganizationLevel();

  await fetchOrganizationFax();
  await fetchOrganizationTelExternal();
  await fetchOrganizationTelInternal();
});

/**
 *  หน่วยงาน
 */
const fetchOrganizationOri = async () => {
  showLoader();
  await http
    .get(config.API.organization)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      organizationOri.value = option;
      organizationOriFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *  รหัสหน่วยงาน
 */
const fetchOrganizationAgencyCode = async () => {
  showLoader();
  await http
    .get(config.API.organizationCode)
    .then((res) => {
      const data = res.data.result;
      //   console.log(data);
      let option: GovermentOption[] = [];
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          governmentCode: r.governmentCode.toString(),
          agencyCode: r.agencyCode.toString(),
          shortName: r.name.toString(),
        });
      });
      organizationAgencyCode.value = option;
      organizationAgencyCodeFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *  รหัสส่วนราชการ
 */
const fetchOrganizationGovernmentCode = async () => {
  showLoader();
  await http
    .get(config.API.organizationShortName)
    .then((res) => {
      const data = res.data.result;
      //   console.log(data);
      let option: GovermentOption[] = [];
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          governmentCode: r.governmentCode.toString(),
          agencyCode: r.agencyCode.toString(),
          shortName: r.name.toString(),
        });
      });
      organizationGovernmentCode.value = option;
      organizationGovernmentCodeFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
// /**
//  *  ชื่อย่อหน่วยงาน
//  */
// const fetchOrganizationShortName = async () => {
//   showLoader();
//   await http
//     .get(config.API.organizationShortName)
//     .then((res) => {
//       const data = res.data.result;
//       //   console.log(data);
//       let option: GovermentOption[] = [];
//       data.map((r: any) => {
//         option.push({
//           id: r.id.toString(),
//           name: r.governmentCode.toString(),
//           agencyCode: r.agencyCode.toString(),
//           shortName: r.name.toString(),
//         });
//       });
//       organizationShortName.value = option;
//       organizationShortNameFilter.value = option;
//     })
//     .catch((e) => {
//       console.log(e);
//     })
//     .finally(() => {
//       hideLoader();
//     });
// };
/**
 *  หน่วยงานต้นสังกัด
 */
const fetchOrganizationAgency = async () => {
  showLoader();
  await http
    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({
          id: r.organizationId.toString(),
          name: r.organizationName.toString(),
        });
      });
      organizationAgency.value = option;
      organizationAgencyFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *  ส่วนราชการต้นสังกัด
 */
const fetchOrganizationGovernmentAgency = async () => {
  showLoader();
  await http
    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({
          id: r.organizationId.toString(),
          name: r.organizationName.toString(),
        });
      });
      organizationGovernmentAgency.value = option;
      organizationGovernmentAgencyFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *   ประเภทหน่วยงาน
 */
const fetchOrganizationType = async () => {
  showLoader();
  await http
    .get(config.API.organizationType)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      organizationType.value = option;
      organizationTypeFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *  ระดับหน่วยงาน
 */
const fetchOrganizationLevel = async () => {
  showLoader();
  await http
    .get(config.API.organizationLevel)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      organizationLevel.value = option;
      organizationLevelFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *  เบอร์ติดต่อภายใน
 */
const fetchOrganizationTelInternal = async () => {
  showLoader();
  await http
    .get(config.API.organizationTelInternal)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      organizationTelInternal.value = option;
      organizationTelInternalFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *  เบอร์ติดต่อภายนอก
 */
const fetchOrganizationTelExternal = async () => {
  showLoader();
  await http
    .get(config.API.organizationTelExternal)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      organizationTelExternal.value = option;
      organizationTelExternalFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
/**
 *  เบอร์โทรสาร
 */
const fetchOrganizationFax = async () => {
  showLoader();
  await http
    .get(config.API.organizationFax)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      organizationFax.value = option;
      organizationFaxFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};

/**Delete positionSet item from positions
 * ลบตำแหน่งตัวที่กดลบ
 * @param val data ใน item ที่จะลบ
 */
const deleteOrgItem = (val: OrganizaOption) => {
  //Check if val is completed before delete
  //จะใช้ filter ต้องเป็น array เลยต้องจับใส่ [val]

  if (!isEmptyOrganization([val])) {
    $q.dialog({
      title: "ยืนยันการลบข้อมูล",
      message: "มีข้อมูลอยู่ หากต้องการลบกด ตกลง",
      cancel: true,
      persistent: true,
    })
      .onOk(() => {
        // console.log(">>>> OK");
        organizations.value = organizations.value.filter(
          (x: object) => x !== val
        ); //คำสั่งลบ
        // console.log(positions.value);
      })
      .onCancel(() => {
        // console.log(">>>> Cancel");
      })
      .onDismiss(() => {
        // console.log("I am triggered on both OK and Cancel");
      });
  } else {
    organizations.value = organizations.value.filter((x: object) => x !== val);
  }
  emit("update:organizprops", organizations.value);
};

/** Check if organization is Empty
 * -- return true/false
 * @param items Array of OrganizaOption
 */
const isEmptyOrganization = (items: OrganizaOption[]) => {
  const isEmpty = items.map(
    (f: OrganizaOption) =>
      !f.organizationOrganizationId &&
      !f.organizationShortNameId &&
      !f.organizationAgencyId &&
      !f.organizationGovernmentAgencyId &&
      !f.organizationTypeId &&
      !f.organizationLevelId &&
      !f.organizationExternalPhoneId &&
      !f.organizationInternalPhoneId &&
      !f.organizationFaxId
  );
  // ถ้าว่างเป็น true
  // ถ้ามี data false
  return isEmpty[0];
};

/**Add new positionSet item into positions
 *กรอกข้อมูลสำคัญครบถึงเพิ่ม ตำแหน่ง ใหม่ได้
 *ข้อมูลไม่ครบแสดง Alert เตือนให้รู้เฉยๆ แล้วไม่ให้เพิ่ม
 */
const addOrganizationItem = async () => {
  await myForm.value!.validate().then(async (result: boolean) => {
    // console.log(result);
    if (result) {
      //   organizations.value.push(JSON.parse(JSON.stringify(organizationSet)));
      organizations.value.push({
        organizationOrganizationId: "", // หน่วยงาน
        organizationShortNameId: "", // Idย่อหน่วยงาน
        organizationShortName: "", // ชื่อย่อหน่วยงาน
        organizationAgencyCode: "", // รหัสหน่วยงาน
        organizationGovernmentCode: "", // รหัสส่วนราชการ
        organizationAgencyId: "", // หน่วยงานต้นสังกัด
        organizationGovernmentAgencyId: "", // ส่วนราชการต้นสังกัด
        organizationTypeId: "", // ประเภทหน่วยงาน
        organizationLevelId: "", //ระดับหน่วยงาน
        organizationInternalPhoneId: "", //เบอร์ติดต่อภายใน
        organizationExternalPhoneId: "", //เบอร์ติดต่อภายนอก
        organizationFaxId: "", //เบอร์โทรสาร
        organizationOrder: 0, // ลำดับผังโครงสร้าง
        organizationUserNote: "", // User Note
        organizationStatusId: "",
        agency: "", // หน่วยงาน
        government: "", // ส่วนราชการ
        department: "", // ฝ่าย/ส่วน
        pile: "", // กอง
        organizationGovernmentCodeOption: organizationGovernmentCode.value,
        organizationGovernmentCodeOptionFilter:
          organizationGovernmentCodeFilter.value,
        isActive: true,
      });
      emit("update:organizprops", organizations.value);
      //   console.log(organizations);
    }
  });
};

const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
  let option: GovermentOption[] = [];
  showLoader();
  await http
    .get(config.API.organizationGovernmentCode(val))
    .then((res) => {
      const data = res.data.result;
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          governmentCode: r.governmentCode.toString(),
          agencyCode: r.agencyCode.toString(),
          shortName: r.name.toString(),
        });
      });
      // organizationAgencyCode.value = option;
      // organizationAgencyCodeFilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
  return option;
};

const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
  let option: GovermentOption[] = [];
  showLoader();
  await http
    .get(config.API.organizationAgencyCode(val))
    .then((res) => {
      const data = res.data.result;
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          governmentCode: r.governmentCode.toString(),
          agencyCode: r.agencyCode.toString(),
          shortName: r.name.toString(),
        });
      });
      item.organizationGovernmentCodeOption = option;
      item.organizationGovernmentCodeOptionFilter = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
  return option;
};

/**เมื่อเลือกใหม่
 * q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
 * @param val ค่าตัวที่เลือก
 */
const updateAgencyCode = async (val: string, item: OrganizaOption) => {
  let option = await fetchAgencyCode(val, item);
  // organizationAgencyCode.value = option;
  // organizationAgencyCodeFilter.value = option;
  //   const find = option.filter((r) => r.governmentCode === val);
  //   if (find.length == 1) {
  item.organizationShortName = option[0].shortName.toString();
  item.organizationAgencyCode = option[0].agencyCode.toString();
  item.organizationGovernmentCode = option[0].governmentCode.toString();
  item.organizationShortNameId = option[0].id;
  //   } else {
  //     item.organizationShortName = "";
  //     item.organizationAgencyCode = "";
  //     //   item.organizationGovernmentCode = "";
  //   }
  await fetchGovernmentCode(item.organizationAgencyCode, item);
};

/**เมื่อเลือกใหม่
 * q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
 * @param val ค่าตัวที่เลือก
 */
const updateGovernmentCode = async (val: string, item: OrganizaOption) => {
  let option = await fetchGovernmentCode(val, item);
  const find = option.filter((r) => r.agencyCode === val);
  if (find.length == 1) {
    item.organizationShortName = find[0].shortName.toString();
    item.organizationAgencyCode = find[0].agencyCode.toString();
    item.organizationGovernmentCode = find[0].governmentCode.toString();
    item.organizationShortNameId = find[0].id.toString();
  } else {
    item.organizationShortName = "";
    // item.organizationAgencyCode = "";
    item.organizationGovernmentCode = "";
  }
};

const updateNumber = (item: OrganizaOption, newValue: any) => {
  item.organizationOrder = newValue;
};

/**Fuction Filter DropDown
 * q-select ส่งค่ามาให้เองจาก @filter="filterSelector"
 * @param val ค่าตัวพิมพ์ค้นหา
 * @param update ทุกครั้งที่พิมพ์ค่า
 */
const filterSelector = (val: any, update: Function, filtername: string) => {
  switch (filtername) {
    case "1":
      update(() => {
        organizationOri.value = organizationOriFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    // case "2":
    //   update(() => {
    //     organizationAgencyCode.value =
    //       organizationAgencyCodeFilter.value.filter(
    //         (v: GovermentOption) => v.agencyCode.indexOf(val) > -1
    //       );
    //   });
    //   break;
    // case "3":
    //   update(() => {
    //     organizationGovernmentCode.value =
    //       organizationGovernmentCodeFilter.value.filter(
    //         (v: GovermentOption) => v.governmentCode.indexOf(val) > -1
    //       );
    //   });
    //   break;
    case "4":
      update(() => {
        organizationAgency.value = organizationAgencyFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "5":
      update(() => {
        organizationGovernmentAgency.value =
          organizationGovernmentAgencyFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "6":
      update(() => {
        organizationType.value = organizationTypeFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "7":
      update(() => {
        organizationLevel.value = organizationLevelFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;
    case "8":
      update(() => {
        organizationTelExternal.value =
          organizationTelExternalFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "9":
      update(() => {
        organizationTelInternal.value =
          organizationTelInternalFilter.value.filter(
            (v: DataOption) => v.name.indexOf(val) > -1
          );
      });
      break;
    case "10":
      update(() => {
        organizationFax.value = organizationFaxFilter.value.filter(
          (v: DataOption) => v.name.indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
};
const filterCodeSelector = (
  val: any,
  update: Function,
  filtername: string,
  item: OrganizaOption
) => {
  switch (filtername) {
    case "2":
      update(() => {
        organizationAgencyCode.value =
          organizationAgencyCodeFilter.value.filter(
            (v: GovermentOption) => v.agencyCode.indexOf(val) > -1
          );
      });
      break;
    case "3":
      update(() => {
        item.organizationGovernmentCodeOption =
          item.organizationGovernmentCodeOptionFilter.filter(
            (v: GovermentOption) => v.governmentCode.indexOf(val) > -1
          );
      });
      break;
  }
};

/**class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
 * copy from AddMappingPositions
 * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
 */
const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>
