<!-- page:จัดการรอบการสอบ สรรหา -->
<template>
  <div class="toptitle text-dark col-12 row items-center">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="clickBack"
    />
    {{ edit ? `แก้ไข${nameRaw}` : "เพิ่มระยะเวลาการคัดเลือก" }}
    {{
      edit && announcementExam
        ? `ครั้งที่ ${roundRaw}/${yearlyRaw == null ? "" : yearlyRaw + 543}`
        : ""
    }}
  </div>
  <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
    <q-form ref="myForm">
      <q-card-section class="q-pa-md">
        <div class="col-xs-12 col-sm-8 items-top q-pb-md">
          <q-toggle
            v-model="announcementExam"
            :false-value="true"
            :true-value="false"
            color="primary"
            label="ประกาศข่าวทั่วไป"
            v-if="!edit"
          />
        </div>
        <div class="col-12 row items-top q-col-gutter-x-sm">
          <div class="col-xs-12 col-sm-6 col-sm-5">
            <q-input
              outlined
              v-model="name"
              label="ชื่อรอบการคัดเลือก/ชื่อประกาศ"
              dense
              lazy-rules
              :rules="[
                (val) => !!val || `${'กรุณากรอกชื่อรอบการคัดเลือก/ชื่อประกาศ'}`,
              ]"
            ></q-input>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
            <q-input
              outlined
              v-model="round"
              type="number"
              label="รอบการสอบ(ครั้ง)"
              dense
              lazy-rules
              :rules="[(val) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
            ></q-input>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
            <q-input
              outlined
              v-model="fee"
              type="number"
              label="ค่าธรรมเนียม"
              dense
              lazy-rules
              input-class="text-right"
              :rules="[
                (val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
              ]"
            ></q-input>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="yearly"
              :locale="'th'"
              autoApply
              year-picker
              :enableTimePicker="false"
              @update:modelValue="updateYear"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  dense
                  lazy-rules
                  outlined
                  :model-value="yearly + 543"
                  :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                  :label="`${'ปีงบประมาณ'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateExam"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker q-mb-md"
                  :model-value="date2Thai(dateExam)"
                  :label="`${'วันที่สอบ'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-xs-12 col-sm-3 col-md-3">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateAnnouncement"
              :locale="'th'"
              autoApply
              borderless
              range
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker q-mb-md"
                  :model-value="dateThaiRange(dateAnnouncement)"
                  :label="`${'วันที่ประกาศ'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateRegister"
              :locale="'th'"
              autoApply
              borderless
              range
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker q-mb-md"
                  :model-value="dateThaiRange(dateRegister)"
                  :label="`${'วันที่สมัคร'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="datePayment"
              :locale="'th'"
              autoApply
              borderless
              range
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker q-mb-md"
                  :model-value="dateThaiRange(datePayment)"
                  :label="`${'วันที่ชำระเงิน'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateAnnounce"
              :locale="'th'"
              autoApply
              borderless
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">
                {{ year + 543 }}
              </template>
              <template #year-overlay-value="{ value }">
                {{ parseInt(value + 543) }}
              </template>
              <template #trigger>
                <q-input
                  outlined
                  dense
                  class="full-width datepicker q-mb-md"
                  :model-value="date2Thai(dateAnnounce)"
                  :label="`${'วันประกาศผลสอบ'}`"
                >
                  <template v-slot:prepend>
                    <q-icon
                      name="event"
                      class="cursor-pointer"
                      style="color: var(--q-primary)"
                    >
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div class="col-xs-12 col-sm-3 col-md-3">
            <selector
              outlined
              v-model="category"
              :options="categoryOptions"
              label="สังกัด"
              clearable
              option-value="id"
              option-label="name"
              emit-value
              map-options
              dense
              lazy-rules
              :rules="[(val:any) => !!val || `${'กรุณาเลือกสังกัด'}`]"
            ></selector>
          </div>
          <div class="col-12" v-if="announcementExam">
            <div class="row q-col-gutter-x-sm">
              <div class="col-xs-12 col-sm-6 col-md-6">
                <selector
                  outlined
                  v-model="organizationShortName"
                  :options="governmentCodeOption"
                  label="รหัสส่วนราชการ"
                  clearable
                  option-value="id"
                  option-label="name"
                  dense
                  lazy-rules
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
                  @update:model-value="(value:any) => selectGovernmentCode(value)"
                ></selector>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-6">
                <selector
                  outlined
                  v-model="organizationName"
                  :options="organizationNameOptions"
                  label="หน่วยงาน"
                  clearable
                  option-value="id"
                  option-label="name"
                  dense
                  lazy-rules
                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
                  @update:model-value="(value:any) => selectOrganization(value)"
                ></selector>
              </div>
            </div>
            <div class="col-12 q-mb-sm">
              <q-separator size="5px" color="grey-2" />
            </div>
            <q-form ref="myFormPosition">
              <ProfileTable
                :rows="rowsPosition"
                :columns="columnsPosition"
                :filter="filterPosition"
                :visible-columns="visibleColumnsPosition"
                v-model:inputfilter="filterPosition"
                v-model:inputvisible="visibleColumnsPosition"
                :add="clickAddPosition"
                name="ตำแหน่ง"
                icon=""
                :statusEdit="false"
                :headerShow="false"
              >
                <template #columns="props">
                  <q-tr :props="props">
                    <q-td key="position" :props="props">
                      <selector
                        class=""
                        outlined
                        use-input
                        v-model="props.row.position"
                        :options="positionPathOptions"
                        option-value="id"
                        option-label="name"
                        input-debounce="0"
                        dense
                        hide-bottom-space
                        lazy-rules
                        :rules="[(val:any) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
                      >
                        <template v-slot:option="scope">
                          <q-item v-bind="scope.itemProps">
                            <q-item-section>
                              <q-item-label>{{
                                scope.opt.positionName
                              }}</q-item-label>
                              <q-item-label caption>
                                <q-icon
                                  class="q-mr-sm"
                                  size="15px"
                                  color="primary"
                                  name="mdi-bookmark"
                                  v-if="scope.opt.isDirector"
                                ></q-icon>
                                {{ scope.opt.positionType }}
                                {{ scope.opt.positionExecutive }}
                                {{
                                  scope.opt.positionExecutiveSide
                                }}</q-item-label
                              >
                            </q-item-section>
                          </q-item>
                        </template>
                        <template v-slot:selected-item="scope">
                          ตำแหน่ง:
                          <q-chip
                            dense
                            square
                            class="q-my-none q-ml-xs q-mr-none"
                          >
                            {{ scope.opt.positionName }}
                          </q-chip>
                          <q-item-label caption>
                            <q-icon
                              class="q-mr-sm"
                              size="15px"
                              color="primary"
                              name="mdi-bookmark"
                              v-if="scope.opt.isDirector"
                            ></q-icon>
                            {{ scope.opt.positionType }}
                            {{ scope.opt.positionExecutive }}
                            {{ scope.opt.positionExecutiveSide }}</q-item-label
                          >
                        </template>
                      </selector>
                    </q-td>
                    <q-td key="type" :props="props">
                      <selector
                        class=""
                        outlined
                        v-model="props.row.type"
                        :options="examTypeOptions"
                        option-value="id"
                        option-label="name"
                        dense
                        hide-bottom-space
                        lazy-rules
                        :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทแบบฟอร์ม'}`]"
                      ></selector>
                    </q-td>
                    <q-td auto-width>
                      <q-btn
                        color="red"
                        flat
                        dense
                        round
                        size="14px"
                        icon="mdi-delete"
                        @click="clickDeletePosition(props.row)"
                      />
                    </q-td>
                  </q-tr>
                </template>
              </ProfileTable>
            </q-form>
          </div>
          <div class="col-12" v-if="announcementExam">
            <q-separator size="5px" color="grey-2" class="q-mt-lg" />
          </div>
          <div class="col-12 q-mt-lg" v-if="announcementExam">
            <div class="text-bold text-subtitle2 q-pb-md">
              เลือกวีธีการชำระเงิน
            </div>
            <div class="row col-12 q-gutter-y-md q-mb-md">
              <q-list dense bordered class="col-12 rounded-borders">
                <q-item tag="label" v-ripple class="q-pa-md">
                  <q-radio
                    v-model="pay"
                    val="payment1"
                    color="blue"
                    class="q-mr-md"
                  />
                  <q-item-section avatar>
                    <q-avatar size="28px">
                      <q-img src="@/assets/krungthai.png" class="col-12" />
                    </q-avatar>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label class="text-weight-medium text-subtitle1"
                      >ชำระเงินค่าสมัครสอบผ่านธนาคารกรุงไทย</q-item-label
                    >
                  </q-item-section>
                </q-item>
              </q-list>

              <q-list dense bordered class="col-12 rounded-borders">
                <q-item tag="label" v-ripple class="q-py-lg">
                  <q-radio
                    v-model="pay"
                    val="payment2"
                    color="blue"
                    class="q-mr-md"
                  />
                  <q-item-section avatar>
                    <q-icon name="mdi-cash" color="positive" size="33px" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label class="text-weight-medium text-subtitle1"
                      >ชำระเงินค่าสมัครสอบผ่านสำนัก/หน่วยงาน</q-item-label
                    >
                  </q-item-section>
                </q-item>
                <q-slide-transition :duration="100">
                  <div v-show="pay == 'payment2'" class="q-pa-sm bg-grey-1">
                    <q-form ref="myFormPayment">
                      <ProfileTable
                        :rows="rowsPayment"
                        :columns="columnsPayment"
                        :filter="filterPayment"
                        :visible-columns="visibleColumnsPayment"
                        v-model:inputfilter="filterPayment"
                        v-model:inputvisible="visibleColumnsPayment"
                        :add="clickAddPayment"
                        name=""
                        icon=""
                        :statusEdit="false"
                        :headerShow="false"
                      >
                        <template #columns="props">
                          <q-tr :props="props">
                            <q-td key="accountNumber" :props="props">
                              <q-input
                                class=""
                                outlined
                                hide-bottom-space
                                v-model="props.row.accountNumber"
                                dense
                                lazy-rules
                                mask="###-#-#####-#"
                                :rules="[
                                  (val) =>
                                    (val && val.length > 0) ||
                                    'กรุณากรอกข้อมูลให้ครบ',
                                ]"
                              ></q-input>
                            </q-td>
                            <q-td key="bankName" :props="props">
                              <q-input
                                class=""
                                outlined
                                hide-bottom-space
                                v-model="props.row.bankName"
                                dense
                                lazy-rules
                                :rules="[
                                  (val) =>
                                    (val && val.length > 0) ||
                                    'กรุณากรอกข้อมูลให้ครบ',
                                ]"
                              ></q-input>
                            </q-td>
                            <q-td key="accountName" :props="props">
                              <q-input
                                class=""
                                outlined
                                hide-bottom-space
                                v-model="props.row.accountName"
                                dense
                                lazy-rules
                                :rules="[
                                  (val) =>
                                    (val && val.length > 0) ||
                                    'กรุณากรอกข้อมูลให้ครบ',
                                ]"
                              ></q-input>
                            </q-td>
                            <q-td auto-width>
                              <q-btn
                                color="red"
                                flat
                                dense
                                round
                                size="14px"
                                icon="mdi-delete"
                                @click="clickDeletePayment(props.row)"
                              />
                            </q-td>
                          </q-tr>
                        </template>
                      </ProfileTable>
                    </q-form>
                  </div>
                </q-slide-transition>
              </q-list>
            </div>
          </div>
          <div class="col-12" v-if="announcementExam">
            <q-separator size="5px" color="grey-2" class="q-mt-md q-mb-lg" />
          </div>
          <div class="row col-12 items-top q-col-gutter-x-sm">
            <div class="col-xs-12 col-sm-6">
              <div class="text-bold text-subtitle2 q-pb-sm">รูปภาพประกอบ</div>
              <div class="row justify-center row col-12">
                <q-uploader
                  color="gray"
                  type="file"
                  flat
                  ref="uploader"
                  class="full-width"
                  text-color="dark"
                  :max-size="10000000"
                  accept=".jpg,.png,.pdf,.csv,.doc"
                  bordered
                  label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
                  multiple
                  @added="fileUploadImg"
                  @removed="fileRemoveImg"
                >
                  <template v-slot:header="scope">
                    <div
                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
                    >
                      <q-btn
                        v-if="scope.queuedFiles.length > 0"
                        icon="clear_all"
                        @click="scope.removeQueuedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบทั้งหมด</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="scope.uploadedFiles.length > 0"
                        icon="done_all"
                        @click="scope.removeUploadedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
                      </q-btn>
                      <q-spinner
                        v-if="scope.isUploading"
                        class="q-uploader__spinner"
                      />
                      <div class="col">
                        <div class="q-uploader__title">
                          {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
                        </div>
                        <div class="q-uploader__subtitle">
                          {{ scope.uploadSizeLabel }}
                          /
                          {{ scope.uploadProgressLabel }}
                        </div>
                      </div>
                      <q-btn
                        v-if="scope.canAddFiles"
                        type="a"
                        icon="add_box"
                        @click="scope.pickFiles"
                        round
                        dense
                        flat
                      >
                        <q-uploader-add-trigger />
                        <q-tooltip>เลือกไฟล์</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="scope.isUploading"
                        icon="clear"
                        @click="scope.abort"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
                      </q-btn>
                    </div>
                  </template>
                </q-uploader>
              </div>
              <q-card
                bordered
                flat
                class="full-width q-my-md"
                v-if="fileImgs.length != 0"
              >
                <q-list separator>
                  <q-item
                    v-for="file in fileImgs"
                    :key="file.id"
                    class="q-my-xs"
                  >
                    <q-item-section>
                      <q-item-label class="full-width ellipsis">
                        {{ file.fileName }}
                      </q-item-label>

                      <q-item-label caption>
                        สถานะ: {{ file.fileType }} /
                        {{ file.fileSize }}
                      </q-item-label>
                    </q-item-section>
                    <q-item-section top side>
                      <div class="q-gutter-sm">
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="blue"
                          icon="mdi-download-outline"
                          @click="downloadData(file.detail)"
                        >
                          <q-tooltip>ดาวน์โหลด</q-tooltip>
                        </q-btn>
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="red"
                          icon="mdi-delete-outline"
                          v-if="edit"
                          @click="deleteDocData(file.id)"
                        >
                          <q-tooltip>ลบไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </div>
            <div class="col-xs-12 col-sm-6">
              <div class="text-bold text-subtitle2 q-pb-sm">เอกสารประกอบ</div>
              <div class="row justify-center row col-12">
                <q-uploader
                  color="gray"
                  type="file"
                  flat
                  ref="uploader"
                  class="full-width"
                  text-color="dark"
                  :max-size="10000000"
                  accept=".jpg,.png,.pdf,.csv,.doc"
                  bordered
                  label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
                  multiple
                  @added="fileUploadDoc"
                  @removed="fileRemoveDoc"
                >
                  <template v-slot:header="scope">
                    <div
                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
                    >
                      <q-btn
                        v-if="scope.queuedFiles.length > 0"
                        icon="clear_all"
                        @click="scope.removeQueuedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบทั้งหมด</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="scope.uploadedFiles.length > 0"
                        icon="done_all"
                        @click="scope.removeUploadedFiles"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
                      </q-btn>
                      <q-spinner
                        v-if="scope.isUploading"
                        class="q-uploader__spinner"
                      />
                      <div class="col">
                        <div class="q-uploader__title">
                          {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
                        </div>
                        <div class="q-uploader__subtitle">
                          {{ scope.uploadSizeLabel }}
                          /
                          {{ scope.uploadProgressLabel }}
                        </div>
                      </div>
                      <q-btn
                        v-if="scope.canAddFiles"
                        type="a"
                        icon="add_box"
                        @click="scope.pickFiles"
                        round
                        dense
                        flat
                      >
                        <q-uploader-add-trigger />
                        <q-tooltip>เลือกไฟล์</q-tooltip>
                      </q-btn>
                      <q-btn
                        v-if="scope.isUploading"
                        icon="clear"
                        @click="scope.abort"
                        round
                        dense
                        flat
                      >
                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
                      </q-btn>
                    </div>
                  </template>
                </q-uploader>
              </div>
              <q-card
                bordered
                flat
                class="full-width q-my-md"
                v-if="fileDocs.length != 0"
              >
                <q-list separator>
                  <q-item
                    v-for="file in fileDocs"
                    :key="file.id"
                    class="q-my-xs"
                  >
                    <q-item-section>
                      <q-item-label class="full-width ellipsis">
                        {{ file.fileName }}
                      </q-item-label>

                      <q-item-label caption>
                        สถานะ: {{ file.fileType }} /
                        {{ file.fileSize }}
                      </q-item-label>
                    </q-item-section>
                    <q-item-section top side>
                      <div class="q-gutter-sm">
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="blue"
                          icon="mdi-download-outline"
                          @click="downloadData(file.detail)"
                        >
                          <q-tooltip>ดาวน์โหลด</q-tooltip>
                        </q-btn>
                        <q-btn
                          size="12px"
                          flat
                          dense
                          round
                          color="red"
                          icon="mdi-delete-outline"
                          v-if="edit"
                          @click="deleteDocData(file.id)"
                        >
                          <q-tooltip>ลบไฟล์</q-tooltip>
                        </q-btn>
                      </div>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </div>
          </div>
          <div class="col-12">
            <q-separator size="5px" color="grey-2" class="q-my-lg" />
          </div>
          <div class="col-12">
            <div class="text-bold text-subtitle2 q-pb-sm">รายละเอียด</div>
            <q-editor
              v-model="editor"
              :dense="$q.screen.lt.md"
              toolbar-text-color="blue-grey-10"
              toolbar-bg="blue-grey-2"
              toolbar-toggle-color="blue-grey-8"
              class="editor"
              :toolbar="[
                ['left', 'center', 'right', 'justify'],
                [
                  'bold',
                  'italic',
                  'strike',
                  'underline',
                  'subscript',
                  'superscript',
                ],
                ['token', 'hr', 'link', 'custom_btn'],
                ['print', 'fullscreen'],
                [
                  {
                    label: $q.lang.editor.formatting,
                    icon: $q.iconSet.editor.formatting,
                    list: 'no-icons',
                    options: ['p', 'h1', 'h2', 'h3'],
                  },
                  {
                    label: $q.lang.editor.defaultFont,
                    icon: $q.iconSet.editor.font,
                    fixedIcon: true,
                    list: 'no-icons',
                    options: [
                      'default_font',
                      'arial',
                      'arial_black',
                      'comic_sans',
                      'courier_new',
                      'impact',
                      'lucida_grande',
                      'times_new_roman',
                      'verdana',
                    ],
                  },
                  'removeFormat',
                ],
                ['undo', 'redo'],
                ['viewsource'],
              ]"
              :fonts="{
                arial: 'Arial',
                arial_black: 'Arial Black',
                comic_sans: 'Comic Sans MS',
                courier_new: 'Courier New',
                impact: 'Impact',
                lucida_grande: 'Lucida Grande',
                times_new_roman: 'Times New Roman',
                verdana: 'Verdana',
              }"
            />
          </div>
          <div class="col-12 q-mt-md">
            <q-input
              outlined
              v-model="note"
              label="หมายเหตุ"
              dense
              lazy-rules
              type="textarea"
            />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions class="text-primary q-py-sm">
        <q-space />
        <q-btn
          flat
          round
          color="public"
          @click="checkSave"
          icon="mdi-content-save-outline"
        >
          <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-form>
  </q-card>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { onMounted, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";
import type { Columns } from "@/modules/03_recruiting/interface/request/Main";
import type {
  RequestPeriodExam,
  RequestPosition,
  RequestPayment,
} from "@/modules/03_recruiting/interface/request/Period";
import type {
  ResponsePosition,
  ResponsePayment,
} from "@/modules/03_recruiting/interface/response/Period";
import type {
  DataOption,
  UploadType,
} from "@/modules/02_organizational/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
import { useDataStore } from "@/stores/data";
import ProfileTable from "@/modules/04_registry/components/Table.vue";

const dataStore = useDataStore();
const { loaderPage } = dataStore;
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO, messageError } = mixin;
const myForm = ref<QForm | null>(null); //form data input
const name = ref<string>("");
const note = ref<string>("");
const editor = ref<string>("");
const checkDocument = ref<boolean>(false);
const checkDisability = ref<boolean>(false);
const announcementExam = ref<boolean>(true);
const fee = ref<number>(0);
const round = ref<number>(1);
const yearly = ref<number>(new Date().getFullYear());
const nameRaw = ref<number | null>(null);
const roundRaw = ref<number | null>(null);
const yearlyRaw = ref<number | null>(null);
const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
const dateAnnounce = ref<Date>(new Date()); //วันประกาศผลสอบ
const dateExam = ref<Date>(new Date()); //วันที่สอบ
const myFormPayment = ref<any>();
const myFormPosition = ref<any>();
const positionPathOptions = ref<DataOption[]>([]);
const governmentCodeOption = ref<DataOption[]>([]);
const organizationShortName = ref<DataOption>({ id: "", name: "" });
const organizationName = ref<DataOption>({ id: "", name: "" });
const organizationNameOptions = ref<DataOption[]>([]);
const examTypeOptions = [
  { name: "ทั่วไป", id: "normol" },
  { name: "แพทย์", id: "docter" },
];
const category = ref<string>("");
const categoryOptions = [
  { name: "สำนักอนามัย", id: "hygiene" },
  { name: "สำนักการแพทย์", id: "physician" },
  { name: "สำนักผังเมือง", id: "city" },
  { name: "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว", id: "culture" },
];
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const pay = ref<string>("payment1");
const filterPayment = ref<string>(""); //search data table
const filterPosition = ref<string>(""); //search data table
const edit = ref<boolean>(false);
const rowsPayment = ref<ResponsePayment[]>([]);
const rowsPosition = ref<ResponsePosition[]>([]);
const visibleColumnsPayment = ref<String[]>([
  "accountNumber",
  "bankName",
  "accountName",
]);
const columnsPayment = ref<QTableProps["columns"]>([
  {
    name: "accountNumber",
    align: "left",
    label: "เลขบัญชี",
    sortable: true,
    field: "accountNumber",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "bankName",
    align: "left",
    label: "ธนาคาร",
    sortable: true,
    field: "bankName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "accountName",
    align: "left",
    label: "ชื่อบัญชี",
    sortable: true,
    field: "accountName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);
const visibleColumnsPosition = ref<String[]>(["position", "type"]);
const columnsPosition = ref<QTableProps["columns"]>([
  {
    name: "position",
    align: "left",
    label: "ตำแหน่ง",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "type",
    align: "left",
    label: "ประเภทแบบฟอร์ม",
    sortable: true,
    field: "type",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
]);

watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
  organizationNameOptions.value = [];
});

watch(organizationName, (count: DataOption, prevCount: DataOption) => {
  positionPathOptions.value = [];
});

onMounted(async () => {
  loaderPage(false);
  if (route.params.id != undefined) {
    edit.value = true;
    id.value = route.params.id.toString();
    await fetchData();
  } else {
    edit.value = false;
  }
  await fetchOrganizationShortName();
  if (
    organizationShortName.value != null &&
    organizationShortName.value.id != null
  )
    await fetchOrganizationOrganization(organizationShortName.value.id);
  if (organizationName.value != null && organizationName.value.id != null)
    await fetchPositionPath(organizationName.value.id);
});

const clickBack = () => {
  router.push({ name: "qualifyPeriod" });
};

const fetchData = async () => {
  loaderPage(true);
  await http
    .get(config.API.periodExamId(id.value))
    .then((res) => {
      const data = res.data.result;
      const positionData: ResponsePosition[] = [];
      data.positionExam.map((r: RequestPosition) => {
        positionData.push({
          id: r.id,
          position: {
            id: r.positionId,
            name: r.positionName,
          },
          type: {
            id: r.typeId,
            name: r.typeName,
          },
        });
      });
      const bankData: ResponsePayment[] = [];
      data.bankExam.map((r: RequestPayment) => {
        bankData.push({
          id: r.id,
          accountNumber: r.accountNumber,
          bankName: r.bankName,
          accountName: r.accountName,
        });
      });
      id.value = data.id;
      name.value = data.name;
      nameRaw.value = data.name;
      checkDocument.value = data.checkDocument;
      checkDisability.value = data.checkDisability;
      announcementExam.value = data.announcementExam;
      round.value = data.round;
      yearly.value = data.year;
      roundRaw.value = data.round;
      yearlyRaw.value = data.year;
      fee.value = data.fee;
      dateAnnounce.value = new Date(data.announcementDate);
      dateAnnouncement.value = [
        new Date(data.announcementStartDate),
        new Date(data.announcementEndDate),
      ];
      dateExam.value = new Date(data.examDate);
      dateRegister.value = [
        new Date(data.registerStartDate),
        new Date(data.registerEndDate),
      ];
      datePayment.value = [
        new Date(data.paymentStartDate),
        new Date(data.paymentEndDate),
      ];
      organizationShortName.value = {
        id: data.organizationCodeId,
        name: data.organizationCodeName,
      };
      organizationName.value = {
        id: data.organizationId,
        name: data.organizationName,
      };
      rowsPosition.value = positionData;
      pay.value = data.paymentKrungThai;
      rowsPayment.value = bankData;
      editor.value = data.detail;
      note.value = data.note;
      fileDocs.value = data.documents;
      fileImgs.value = data.images;
      category.value = data.category;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * get รายการ รหัสหน่วยงาน
 */
const fetchOrganizationShortName = async () => {
  loaderPage(true);
  await http
    .get(config.API.organizationShortName)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({
          id: r.id.toString(),
          name: r.governmentCode.toString(),
        });
      });
      governmentCodeOption.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * get รายการ หน่วยงาน
 */
const fetchOrganizationOrganization = async (val: string) => {
  loaderPage(true);
  await http
    .get(config.API.organization)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      organizationNameOptions.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

/**
 * get รายการ ตำแหน่งในสายงาน
 */
const fetchPositionPath = async (val: string) => {
  loaderPage(true);
  await http
    .get(config.API.positionPath)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: DataOption) => {
        option.push({
          id: r.id.toString(),
          name: r.name.toString(),
        });
      });
      positionPathOptions.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};

const selectGovernmentCode = (row: DataOption) => {
  organizationName.value = { id: "", name: "" };
  if (myForm.value !== null) {
    myForm.value.resetValidation();
  }
  if (row != null) fetchOrganizationOrganization(row.id);
};

const selectOrganization = (row: DataOption) => {
  if (myForm.value !== null) {
    myForm.value.resetValidation();
  }
  if (row != null) fetchPositionPath(row.id);
};

const updateYear = async (e: number) => {
  yearly.value = e;
};

const checkSave = async () => {
  if (myForm.value !== null) {
    myForm.value.validate().then(async (success) => {
      if (success) {
        if (edit.value) {
          await editData(id.value);
        } else {
          await addData();
        }
      }
    });
  }
};

const sendData = () => {
  const positionData: RequestPosition[] = [];
  rowsPosition.value.map((r: ResponsePosition) => {
    positionData.push({
      id: r.id,
      positionId: r.position.id,
      positionName: r.position.name,
      typeId: r.type.id,
      typeName: r.type.name,
    });
  });
  const valueData: RequestPeriodExam = {
    announcementDate: dateToISO(dateAnnounce.value),
    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
    examDate: dateToISO(dateExam.value),
    bankExam: rowsPayment.value,
    checkDisability: checkDisability.value,
    announcementExam: announcementExam.value,
    checkDocument: checkDocument.value,
    detail: editor.value,
    fee: fee.value,
    id: "",
    isActive: true,
    name: name.value,
    note: note.value,
    organizationCodeId: organizationShortName.value?.id,
    organizationCodeName: organizationShortName.value?.name,
    organizationId: organizationName.value?.id,
    organizationName: organizationName.value?.name,
    paymentEndDate: dateToISO(datePayment.value[1]),
    paymentKrungThai: pay.value,
    paymentStartDate: dateToISO(datePayment.value[0]),
    positionExam: positionData,
    registerEndDate: dateToISO(dateRegister.value[1]),
    registerStartDate: dateToISO(dateRegister.value[0]),
    round: round.value,
    year: yearly.value,
    category: category.value,
  };
  return valueData;
};

const addData = async () => {
  loaderPage(true);
  await http
    .post(config.API.periodExam, sendData())
    .then(async (res) => {
      const data = res.data.result;
      id.value = data;
      success($q, "บันทึกรอบการคัดเลือกสำเร็จ");
      await uploadImgData();
      await uploadDocData();
      await clickBack();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      loaderPage(false);
    });
};

const editData = async (id: string) => {
  loaderPage(true);
  await http
    .put(config.API.periodExamId(id), sendData())
    .then(async (res) => {
      success($q, "แก้ไขรอบการคัดเลือกสำเร็จ");
      await uploadImgData();
      await uploadDocData();
      await clickBack();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      loaderPage(false);
    });
};

const fileUploadDoc = async (files: any) => {
  files.forEach((file: any) => {
    fileDocDataUpload.value.push(file);
  });
};

const fileRemoveDoc = async (files: any) => {
  files.forEach((file: any) => {
    const index = fileDocDataUpload.value.findIndex(
      (x: any) => x.__key == file.__key
    );
    if (index > -1) {
      fileDocDataUpload.value.splice(index, 1);
    }
  });
};

const uploadDocData = async () => {
  const formData = new FormData();
  if (fileDocDataUpload.value.length > 0) {
    fileDocDataUpload.value.forEach((file: any) => {
      formData.append("", file);
    });
    loaderPage(true);
    await http
      .put(config.API.periodExamDoc(id.value), formData)
      .then((res) => {})
      .catch((e) => {})
      .finally(async () => {
        loaderPage(false);
      });
  } else {
    clickBack();
  }
};

const fileUploadImg = async (files: any) => {
  files.forEach((file: any) => {
    fileImgDataUpload.value.push(file);
  });
};

const fileRemoveImg = async (files: any) => {
  files.forEach((file: any) => {
    const index = fileImgDataUpload.value.findIndex(
      (x: any) => x.__key == file.__key
    );
    if (index > -1) {
      fileImgDataUpload.value.splice(index, 1);
    }
  });
};

const uploadImgData = async () => {
  if (fileImgDataUpload.value.length > 0) {
    const formData = new FormData();
    fileImgDataUpload.value.forEach((file: any) => {
      formData.append("", file);
    });
    loaderPage(true);
    await http
      .put(config.API.periodExamImg(id.value), formData)
      .then((res) => {})
      .catch((e) => {})
      .finally(async () => {
        loaderPage(false);
      });
  }
};

const deleteDocData = async (docId: string) => {
  const params = {
    documentId: docId,
  };
  loaderPage(true);
  await http
    .delete(config.API.periodExamDoc(id.value.toString()), {
      params,
    })
    .then((res) => {})
    .catch((e) => {})
    .finally(async () => {
      await fetchData();
    });
};

const downloadData = async (path: string) => {
  window.open(path);
};

const clickAddPayment = () => {
  myFormPayment.value.validate().then(async (result: boolean) => {
    if (result) {
      rowsPayment.value.push({
        id: "00000000-0000-0000-0000-000000000000",
        accountNumber: "",
        bankName: "",
        accountName: "",
      });
    }
  });
};

const clickDeletePayment = (row: any) => {
  const index = rowsPayment.value.indexOf(row);
  if (index > -1) {
    rowsPayment.value.splice(index, 1);
  }
};

const clickAddPosition = () => {
  myFormPosition.value.validate().then(async (result: boolean) => {
    if (result) {
      rowsPosition.value.push({
        id: "00000000-0000-0000-0000-000000000000",
        position: { id: "", name: "" },
        type: { id: "normol", name: "ทั่วไป" },
      });
    }
  });
};

const clickDeletePosition = (row: any) => {
  const index = rowsPosition.value.indexOf(row);
  if (index > -1) {
    rowsPosition.value.splice(index, 1);
  }
};

/**
 * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
 * @param val ช่วงวันที่
 */
const dateThaiRange = (val: [Date, Date]) => {
  if (val === null) {
    return "";
  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
    return `${date2Thai(val[0], true)}`;
  } else {
    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
  }
};
</script>

<style></style>
