hrms-mgt/src/modules/05_placement/components/probation/FormAssign.vue

<template>
  <q-form ref="myForm">
    <div class="q-pb-md">
      <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="router.go(-1)"
          v-if="routeName == 'probationWorkAdd'"
        />
        <div v-if="routeName == 'probationWorkAdd'">
          เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
        </div>
        <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
      </div>
      <q-card
        :bordered="routeName == 'probationWorkAdd'"
        class="col-12 text-dark"
      >
        <div class="row col-12 q-pa-lg">
          <div class="row col-12 q-gutter-lg">
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
                ผู้ทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-xs-12 col-sm-6">
                  <q-input
                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                    hide-bottom-space
                    :readonly="routeName != 'probationWorkAdd'"
                    dense
                    borderless
                    :outlined="routeName == 'probationWorkAdd'"
                    v-model="fullname"
                    label="ชื่อ-สกุล"
                  />
                </div>
                <div class="col-xs-12 col-sm-6">
                  <q-input
                    :rules="[(val) => !!val || 'กรุณากรอกตำเเหน่ง']"
                    hide-bottom-space
                    :readonly="routeName != 'probationWorkAdd'"
                    dense
                    borderless
                    :outlined="routeName == 'probationWorkAdd'"
                    v-model="position"
                    label="ตำแหน่ง"
                  />
                </div>
                <div class="col-12 text-top0 items-center">
                  ระยะเวลาการทดลองปฎิบัติหน้าที่ราชการ
                </div>
                <div class="col-xs-12 col-sm-4">
                  <q-select
                    :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']"
                    hide-bottom-space
                    :options="monthOp"
                    class="col-xs-12 col-sm-6"
                    :readonly="routeName !== 'probationWorkAdd'"
                    dense
                    borderless
                    option-label="label"
                    :outlined="routeName === 'probationWorkAdd'"
                    v-model="monthSelect"
                    :label="`ระยะเวลากี่เดือน`"
                  />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date_start"
                    :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
                        dense
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        hide-bottom-space
                        class="full-width datepicker q-mb-md"
                        :model-value="
                          date_start != null ? date2Thai(date_start) : null
                        "
                        :label="`${'ตั้งเเต่วันที่'}`"
                        clearable
                        outlined
                        @clear="clearDateExam"
                      >
                      </q-input>
                    </template>
                  </datepicker>
                </div>
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date_finish"
                    :locale="'th'"
                    autoApply
                    borderless
                    :readonly="isDatePicker2Readonly"
                    :enableTimePicker="false"
                    week-start="0"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        dense
                        outlined
                        readonly
                        class="full-width datepicker q-mb-md"
                        :model-value="
                          date_finish != null ? date2Thai(date_finish) : null
                        "
                        :label="`${'ถึงวันที่'}`"
                        clearable
                        @clear="clearDateExam2"
                      >
                      </q-input>
                    </template>
                  </datepicker>
                </div>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
                ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
              </div>

              <div class="col-12 row q-col-gutter-md">
                <q-select
                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                  :options="OPcaretaker"
                  class="col-xs-12 col-sm-6"
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  hide-bottom-space
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="caretaker1"
                  :label="`ผู้ดูแลคนที่ 1`"
                />
                <q-select
                  :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                  :options="OPcaretaker"
                  hide-bottom-space
                  class="col-xs-12 col-sm-6"
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="caretaker2"
                  :label="`ผู้ดูแลคนที่ 2`"
                />
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <!-- 3.1 -->
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
                ผลการปฏิบัติงาน
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.1 ชื่องาน / ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
                <q-btn
                  v-if="routeName == 'probationWorkAdd'"
                  round
                  color="primary"
                  dense
                  icon="mdi-plus"
                  flat
                  class="q-ml-sm"
                  @click="addActivity"
                />
              </div>
              <div class="col-12 row q-gutter-sm">
                <q-card
                  v-for="(item, index) in activityArray"
                  :key="index"
                  flat
                  bordered
                  class="col-12 q-pa-sm bg-grey-1"
                >
                  <div class="col-12 row q-col-gutter-sm">
                    <div class="col-xs-12 col-sm-6">
                      <q-input
                        :rules="
                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        hide-bottom-space
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="bg-white"
                        type="textarea"
                        v-model="activity_desc[index]"
                        label="กิจกรรมของงาน/ขั้นตอนการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-5">
                      <q-input
                        :rules="
                          index < 2 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        hide-bottom-space
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="bg-white"
                        type="textarea"
                        v-model="goal_desc[index]"
                        label="เป้าหมายในการปฏิบัติงาน(ไม่เกิน10บรรทัด )"
                      />
                    </div>
                    <!-- delete -->
                    <div
                      v-if="index > 1"
                      class="col-xs-12 col-sm-1 flex justify-center items-center"
                    >
                      <q-btn
                        flat
                        round
                        color="red"
                        icon="mdi-trash-can-outline"
                        @click="deleteactivity(index)"
                      />
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <!-- 3.2 -->
            <div class="col-12 row">
              <div class="col-12 text-top2">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.2 ความรู้ความสามารถและทักษะ(ตามที่ก.ก.กําหนด)
              </div>
              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                <div class="row col-12 q-gutter-lg">
                  <div class="col-12 row">
                    <div class="col-12 text-top2 row items-center">
                      ความรู้ความสามารถในการปฏิบัติงาน
                      <q-btn
                        v-if="routeName == 'probationWorkAdd'"
                        round
                        color="primary"
                        dense
                        icon="mdi-plus"
                        flat
                        class="q-ml-sm"
                        @click="addKnowledge"
                      />
                    </div>
                    <div
                      v-for="(item, index) in knowledgeArray"
                      :key="index"
                      class="col-12 row q-col-gutter-sm"
                    >
                      <div class="col-11 q-my-xs">
                        <q-select
                          :option-label="
                            (item) => `${item.title}-${item.description}`
                          "
                          :option-value="(level) => level.level_id"
                          :rules="
                            index < 3
                              ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
                              : []
                          "
                          hide-bottom-space
                          :options="OPknowledge"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="knowledge[index]"
                          :label="`ความรู้ความสามารถในการปฏิบัติงาน ${
                            index + 1
                          }`"
                        />
                      </div>
                      <div
                        class="col-xs-12 col-sm-1 flex justify-center items-center"
                      >
                        <q-btn
                          v-if="index > 2"
                          flat
                          round
                          color="red"
                          icon="mdi-trash-can-outline"
                          @click="deleteknowledge(index)"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="col-12 row">
                    <div class="col-12 text-top2 row items-center">
                      ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
                      <!-- <q-btn
                      v-if="routeName == 'probationWorkAdd'"
                      round
                      color="primary"
                      dense
                      icon="mdi-plus"
                      flat
                      class="q-ml-sm"
                    /> -->
                    </div>
                    <q-card
                      flat
                      bordered
                      class="col-12 q-pa-md"
                      style="max-height: 500px; overflow-y: scroll"
                    >
                      <div class="example-row-column-width">
                        <div class="bg-grey-3 q-py-xs">
                          <div
                            class="row"
                            v-for="(item, index) in checkRule"
                            :key="item.id"
                          >
                            <div v-if="index === 0" class="col-1 text-center">
                              <q-checkbox
                                :true-value="1"
                                :false-value="0"
                                v-if="item.status_select === 1"
                                v-model="item.checked"
                                dense
                                :disable="routeName != 'probationWorkAdd'"
                              />
                            </div>
                            <div v-if="index === 0" class="col-11">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 1"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 2"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 2 && index < 9"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <div class="col-1 text-center">
                              <q-checkbox
                                :true-value="1"
                                :false-value="0"
                                v-model="item.checked"
                                dense
                                :disable="routeName != 'probationWorkAdd'"
                              />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 9"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 9 && index < 16"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <div class="col-1 text-center">
                              <q-checkbox
                                :true-value="1"
                                :false-value="0"
                                v-model="item.checked"
                                dense
                                :disable="routeName != 'probationWorkAdd'"
                              />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 16"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 16 && index < 19"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <div class="col-1 text-center">
                              <q-checkbox
                                :true-value="1"
                                :false-value="0"
                                v-model="item.checked"
                                dense
                                :disable="routeName != 'probationWorkAdd'"
                              />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <div v-for="(item, index) in checkRule" :key="item.id">
                          <div
                            v-if="index === 19"
                            class="row bg-grey-2 q-py-xs borderCheck"
                          >
                            <div class="col-1"></div>
                            <div class="col-10 q-pl-md">
                              {{ item.description }}
                            </div>
                          </div>
                          <div
                            v-else-if="index > 19 && index < 30"
                            class="row borderCheck border_y q-py-xs"
                          >
                            <div class="col-1 text-center">
                              <q-checkbox
                                :true-value="1"
                                :false-value="0"
                                v-model="item.checked"
                                dense
                                :disable="routeName != 'probationWorkAdd'"
                              />
                            </div>
                            <div class="col-9 q-pl-xl">
                              {{ item.description }}
                            </div>
                          </div>
                        </div>
                        <!-- <div class="row q-mt-xs bg-grey-3 q-py-xs">
                        <div class="col-1 text-center"></div>
                        <div class="col-11">
                          3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                        </div>
                      </div>
                      <div class="row border_y borderCheck">
                        <div class="col-1 text-center"></div>
                        <div class="q-py-sm col-10" style="min-width: 300px">
                          <q-input
                            hide-bottom-space
                            dense
                            outlined
                            lazy-rules
                            v-model="ruleNote"
                            :label="`${'กรอกกฎหมายอื่นๆ'}`"
                            type="textarea"
                          />
                        </div>
                      </div> -->
                      </div>
                    </q-card>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">
                      กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
                    </div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12">
                        <q-input
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="OtherLaw"
                          type="textarea"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">ทักษะ</div>
                    <div class="col-12 row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) =>
                              `${item.title} - ${item.level_description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :options="OPcomputer"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="skill"
                          label="ด้านที่ 1"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) =>
                              `${item.title} - ${item.level_description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :options="OPenglish"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="skill2"
                          label="ด้านที่ 2"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) =>
                              `${item.title} - ${item.level_description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :options="OPinfomation"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="skill3"
                          label="ด้านที่ 3"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) =>
                              `${item.title} - ${item.level_description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                          ]"
                          :options="OPresourse"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="skill4"
                          label="ด้านที่ 4"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-12 row">
              <div class="col-12 text-top2">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
              </div>
              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                <div class="row col-12 q-gutter-lg">
                  <div class="col-12 row">
                    <div class="col-12 text-top2">สมรรถนะหลัก</div>
                    <div class="col-12 row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain,[main2,main3,main4,main5])"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="main"
                          label="ตัวที่ 1"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain,[main,main3,main4,main5])"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="main2"
                          label="ตัวที่ 2"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain,[main,main2,main4,main5])"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="main3"
                          label="ตัวที่ 3"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain,[main,main2,main3,main5])"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="main4"
                          label="ตัวที่ 4"
                        />
                      </div>

                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          hide-bottom-space
                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
                          :options="filterMain(OPmain,[main,main2,main3,main4])"
                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="main5"
                          label="ตัวที่ 5"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
                    <div class="col-12 row q-col-gutter-sm">
                      <div class="col-xs-12 col-sm-6">
                        <q-select

                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                          ]"
                          :options="filterData(OPgroup,[group2,group3])"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="group"
                          label="ตัวที่ 1"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                          ]"
                          :options="filterData(OPgroup,[group,group3])"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="group2"
                          label="ตัวที่ 2"
                        />
                      </div>
                      <div class="col-xs-12 col-sm-6">
                        <q-select
                          :option-label="
                            (item) => `${item.title} - ${item.description}`
                          "
                          option-value="id"
                          hide-bottom-space
                          :rules="[
                            (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                          ]"
                          :options="filterData(OPgroup,[group,group2])"
                          class="bg-white"
                          :readonly="routeName != 'probationWorkAdd'"
                          dense
                          borderless
                          :outlined="routeName == 'probationWorkAdd'"
                          v-model="group3"
                          label="ตัวที่ 3"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
                  class="text-weight-regular q-pl-sm"
                >
                  ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย
                  )</span
                >
              </div>
              <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
                <div class="row col-12 q-gutter-lg">
                  <div class="col-12 row">
                    <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12 column q-ml-md">
                        <li>ให้บริการประชาชนหรือผู้รับบริการด้วยอธัยาศัยดี</li>
                        <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
                        <li>
                          ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว
                          เอาใจใส่เป็นมาตรฐานเดียวกัน
                        </li>
                        <li>
                          ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ
                          ขยันหมั่นเพียร
                        </li>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">
                      ความมีคุณธรรมจริยธรรม ได้แก่
                    </div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12 column q-ml-md">
                        <li>
                          อุทิศตนและเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
                        </li>
                        <li>
                          มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต
                        </li>
                        <li>
                          ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใด ๆ
                          อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
                          และพระมหากษัตริย์
                        </li>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 row">
                    <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                    <div class="col-12 row q-col-gutter-md">
                      <div class="col-12 column q-ml-md">
                        <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
                        <li>
                          แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
                        </li>
                        <li>
                          ไม่กระทำการใด ๆ
                          อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ
                        </li>
                        <li>
                          ไม่กระทำการใด ๆ
                          อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
                        </li>
                        <li>
                          ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
                        </li>
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-12 row">
              <div class="col-12 text-top2">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.5 อื่น ๆ (ถ้ามี)
              </div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-12">
                  <q-input
                    :readonly="routeName != 'probationWorkAdd'"
                    dense
                    borderless
                    :outlined="routeName == 'probationWorkAdd'"
                    v-model="Other"
                  />
                </div>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
                <q-btn
                  v-if="routeName == 'probationWorkAdd'"
                  round
                  color="primary"
                  dense
                  icon="mdi-plus"
                  flat
                  class="q-ml-sm"
                  @click="addProductivity"
                />
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card
                  v-for="(item, index) in ProductivityArray"
                  flat
                  bordered
                  class="col-12 q-pa-sm bg-grey-1"
                >
                  <div class="col-12 row q-col-gutter-sm">
                    <div class="col-xs-12 col-sm-6">
                      <q-input
                        hide-bottom-space
                        :rules="
                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        class="bg-white"
                        type="textarea"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="output_desc[index]"
                        label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                      />
                    </div>
                    <div class="col-xs-12 col-sm-5">
                      <q-input
                        :rules="
                          index < 1 ? [(val) => !!val || 'กรุณากรอกข้อมูล'] : []
                        "
                        hide-bottom-space
                        class="bg-white"
                        type="textarea"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        v-model="indicator_desc[index]"
                        label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                      />
                    </div>
                    <div
                      v-if="index > 0"
                      class="col-xs-12 col-sm-1 flex justify-center items-center"
                    >
                      <q-btn
                        flat
                        round
                        color="red"
                        icon="mdi-trash-can-outline"
                        @click="deleteProductivitys(index)"
                      />
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
                การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row">
                <div class="col-12 text-top2">
                  ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศและอบรมหลักสูตรต่าง
                  ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ ดังนี้
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.2
                  การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.3
                  การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
                </div>
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
                </div>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
                การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.1
                ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                  <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
                      <li>ทักษะที่ ก.ก. กำหนด</li>
                      <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
                      <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
                      <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
                      <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
                      <li>
                        อื่นๆ (ถ้ามี)
                        <q-input
                          dense
                          outlined
                          v-model="Other5"
                          label="กรอกอื่นๆ"
                        />
                      </li>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.3
                ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>
                        บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการและผู้บังคับบัญา
                      </li>
                      <li>
                        แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
                      </li>
                      <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก.กำหนด</li>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                5.3 สัดส่วนของคะแนนและมาตรฐานการประเมิน
              </div>
              <div class="col-12 row q-gutter-md">
                <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
                  <div class="col-12 row q-col-gutter-md">
                    <div class="col-12 column q-ml-md">
                      <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
                      <div class="q-pl-lg">
                        ส่วนที่ 1
                        คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
                      </div>
                      <div class="q-pl-lg">
                        ส่วนที่ 2
                        คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
                      </div>
                      <div class="q-pl-lg">
                        มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ
                        60
                      </div>
                      <li>
                        สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
                      </li>
                      <div class="q-pl-lg">
                        คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
                      </div>
                      <div>
                        <span style="text-decoration: underline">หมายเหตุ</span>
                        ให้นำคะแนนรวมทั้ง 2
                        ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
                        จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
                      </div>
                    </div>
                  </div>
                </q-card>
              </div>
            </div>
            <div class="col-12">
              <q-separator size="3px" color="grey-2" />
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top0 items-center">
                การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row">
                <div class="col-12 text-top2 row items-center">
                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                  ผู้ทดลองปฏิบัติหน้าที่ราชการ
                </div>
              </div>
              <div class="col-12 row q-col-gutter-md">
                <div class="col-xs-12 col-sm-4">
                  <q-input
                    :readonly="routeName != 'probationWorkAdd'"
                    dense
                    borderless
                    :outlined="routeName == 'probationWorkAdd'"
                    v-model="fullnameFoot"
                    label="ชื่อ-สกุล"
                  />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <q-input
                    :readonly="routeName != 'probationWorkAdd'"
                    dense
                    borderless
                    :outlined="routeName == 'probationWorkAdd'"
                    v-model="positionFoot"
                    label="ตำแหน่ง"
                  />
                </div>
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date1"
                    :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
                        hide-bottom-space
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="full-width datepicker"
                        :model-value="date1 != null ? date2Thai(date1) : null"
                        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>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
              </div>
              <div class="col-12 row q-col-gutter-md">
                <q-select
                  :options="OPcaretaker"
                  class="col-xs-12 col-sm-8"
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="caretakerFoot"
                  label="ผู้ดูแลคนที่ 1"
                />
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date2"
                    :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
                        hide-bottom-space
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="full-width datepicker"
                        :model-value="date2 != null ? date2Thai(date2) : null"
                        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>
                <q-select
                  :options="OPcaretaker"
                  class="col-xs-12 col-sm-8"
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="caretakerFoot2"
                  label="ผู้ดูแลคนที่ 2"
                />
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date3"
                    :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
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        hide-bottom-space
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        s
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="full-width datepicker"
                        :model-value="date3 != null ? date2Thai(date3) : null"
                        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>
            </div>
            <div class="col-12 row">
              <div class="col-12 text-top2 row items-center">
                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                ผู้บังคับบัญชาผู้มอบหมายงาน
              </div>
              <div class="col-12 row q-col-gutter-md">
                <q-select
                  :options="OPcaretaker"
                  class="col-xs-12 col-sm-8"
                  :readonly="routeName != 'probationWorkAdd'"
                  dense
                  borderless
                  :outlined="routeName == 'probationWorkAdd'"
                  v-model="commander"
                  label="ผู้บังคับบัญชา"
                />
                <div class="col-xs-12 col-sm-4">
                  <datepicker
                    menu-class-name="modalfix"
                    v-model="date4"
                    :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
                        hide-bottom-space
                        :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
                        :readonly="routeName != 'probationWorkAdd'"
                        dense
                        borderless
                        :outlined="routeName == 'probationWorkAdd'"
                        class="full-width datepicker"
                        :model-value="date4 != null ? date2Thai(date4) : null"
                        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>
            </div>
          </div>
        </div>
        <q-separator v-show="routeName == 'probationWorkAdd'" />
        <div
          v-show="routeName == 'probationWorkAdd'"
          class="flex justify-end q-pa-sm q-gutter-sm"
        >
          <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
        </div>
      </q-card>
    </div>
  </q-form>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, computed, watch, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import http from "@/plugins/http";

import config from "@/app.config";
const $q = useQuasar();
const val1 = ref([
  {
    id: 1,
    text: "1.รัฐธรรมนูญ",
    checked: false,
  },
]);

const router = useRouter();
const mixin = useCounterMixin();
const { date2Thai, notifyError } = mixin;
const filterData = (options: any[], excludedGroups: any[]) => {
  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
};
const filterMain = (options: any[], excludedGroups: any[]) => {
  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
};
const checkValidate = ref<boolean>(false);
const myForm = ref<any>(null);
const fullnameFoot = ref<string>("");
const positionFoot = ref<string>("");
const caretakerFoot = ref<string>("");
const caretakerFoot2 = ref<string>("");
const id = ref<number>();
const personal_id = ref<string>();
const fullname = ref<string>();
const knowledge_skill_map_no = ref<string[]>([]);
const round_no = ref<number>();
const date_start = ref<Date | null>(null);
const date_finish = ref<Date | null>(null);
const behavior_desc = ref<string>();
const other_desc = ref<object>({});
const other4_desc = ref<string>();
const Other5 = ref<string>();
const other5_no1_desc = ref<object>({});
const other5_no2_desc = ref<object>({});
const experimenter_dated = ref<Date>();
const createdAt = ref<Date>();
const updatedAt = ref<Date>();
const group = ref<any | null>(null);
const group2 = ref<any | null>(null);
const group3 = ref<any | null>(null);
const main = ref<any>();
const main2 = ref<any>();
const main3 = ref<any>();
const main4 = ref<any>();
const main5 = ref<any>();


const Other = ref<string>("");
const commander = ref<string>("");

const date1 = ref<Date>();
const date2 = ref<Date>();
const date3 = ref<Date>();
const date4 = ref<Date>();

const OPmain = ref<
  Array<{
    id: number;
    title: string;
    description: string;
    level: number;
  }>
>([]);

const OPgroup = ref<
  Array<{
    id: number;
    title: string;
    description: string;
    level: number;
  }>
>([]);
const clearDateExam = () => {
  date_start.value = null;
};
const clearDateExam2 = () => {
  date_finish.value = null;
};
const isDatePicker2Readonly = computed(() => {
  return date_start.value === null;
});
const routeName = router.currentRoute.value.name;
const name = ref<string>("");
const position = ref<string>("");

const monthSelect = ref<number>();

const caretaker1 = ref<string>("");
const caretaker2 = ref<string>("");
const OPcaretaker = [
  "นางสาวรัชภรณ์ ภักดี",
  "นางสาวทวิดา กมลเวชชี",
  "test1",
  "test2",
  "test3",
  "test4",
];
const monthOp = [{ value: "6", label: "6 เดือน" }];
//-----------------(3.1)-----------//
const activityCount = ref<number>(2);
const activityDataArray = ref<any[]>([]);
const activity_desc = ref<string[]>(Array(activityCount.value).fill(""));
const goal_desc = ref<string[]>(Array(activityCount.value).fill(""));
const addActivity = () => {
  activityCount.value++;
};
const deleteactivity = (item: number) => {
  activity_desc.value.splice(item, 1);
  goal_desc.value.splice(item, 1);
  if (activityCount.value > 2) {
    activityCount.value--;
  }
};
const activityArray = computed(() => {
  return Array(activityCount.value).fill("");
});
const resetActivity = () => {
  activityCount.value = 2;
  activity_desc.value = Array(activityCount.value).fill("");
  goal_desc.value = Array(activityCount.value).fill("");
};
//-----------------(3.2)-----------//

const knowledgeCount = ref<number>(3);
const knowledge = ref<any[]>(Array.from({ length: knowledgeCount.value }, () => null));
const OPknowledge = ref<
  Array<{
    knowledge_id: number;
    title: number;
    options: Array<Option>;
  }>
>([]);
interface Option {
  level_id: number;
  level_desc: string;
}
const addKnowledge = () => {
  if (knowledgeCount.value < 6) {
    knowledgeCount.value++;
  }
};

const knowledgeArray = computed(() => {
  return Array(knowledgeCount.value).fill("");
});
const getOpknowledge = (index: number) => {
  return OPknowledge;
};

const deleteknowledge = (item: number) => {
  knowledge.value.splice(item, 1);
  if (knowledgeCount.value > 3) {
    knowledgeCount.value--;
  }
};
const checked = ref<boolean>(false);
const productivityCount = ref<number>(1);
const output_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const indicator_desc = ref<string[]>(Array(productivityCount.value).fill(""));
const deleteProductivitys = (item: number) => {
  output_desc.value.splice(item, 1);
  indicator_desc.value.splice(item, 1);
  if (productivityCount.value > 1) {
    productivityCount.value--;
  }
};
const addProductivity = () => {
  productivityCount.value++;
};
const ProductivityArray = computed(() => {
  return Array(productivityCount.value).fill("");
});
interface CheckboxItem {
  id: number;
  parent_id: number;
  description: string;
  status_select: number;
  checked: number;
}

const checkRule = ref<CheckboxItem[]>([]);
  const getcompetency = async () => {
  await http.get(config.API.competencyOptions()).then((res: any) => {
    const data = res.data.data;
    OPmain.value = data;
    main.value = data[0];
    main2.value = data[1];
    main3.value = data[2];
    main4.value = data[3];
    main5.value = data[4];
  });
};
const getCompetencyGroup = async () => {
  await http.get(config.API.competencyGroupOptions()).then((res: any) => {
    const data = res.data.data;
    OPgroup.value = data;
    group.value = data[0];
    group2.value = data[1];
    group3.value = data[2];
  });
};
const getKnowledge = async () => {
  await http.get(config.API.knowledgeOptions()).then((res: any) => {
    OPknowledge.value = res.data.data;
  });
};
const getSkill = async () => {
  await http.get(config.API.skillOptions()).then((res: any) => {
    const skillData = res.data.data;
    OPcomputer.value = [skillData.computer];
    OPenglish.value = [skillData.english];
    OPinfomation.value = [skillData.information];
    OPresourse.value = [skillData.resourse];
    skill.value = skillData.computer;
    skill2.value = skillData.english;
    skill3.value = skillData.information;
    skill4.value = skillData.resourse;
  });
};
const getLaw = async () => {
  await http.get(config.API.lawOptions()).then((res: any) => {
    checkRule.value = res.data.data;
  });
};

const putData = () => {
  const assign_job = activityArray.value.map((item, index) => {
    const activityDesc = activity_desc.value[index]?.trim();
    const goalDesc = goal_desc.value[index]?.trim();

    if (activityDesc !== "" && goalDesc !== "") {
      return {
        id: index + 1,
        activity_desc: activityDesc,
        goal_desc: goalDesc,
      };
    } else {
      return null; 
    }
  });
  const know_ledge = knowledge.value.map((item) => ({
    id: item ? item.id : null,
    level: item ? item.level : null,
  }));


  const Productivity_assign = ProductivityArray.value.map((item, index) => {
    const outputDesc = output_desc.value[index]?.trim();
    const indicatorDesc = indicator_desc.value[index]?.trim();

    if (outputDesc !== "" && indicatorDesc !== "") {
      return {
        id: index + 1,
        activity_desc: outputDesc,
        goal_desc: indicatorDesc,
      };
    } else {
      return null; 
    }
  });
  const groupData = group.value
    ? { id: group.value.id, level: group.value.level }
    : null;
  const group2Data = group2.value
    ? { id: group2.value.id, level: group2.value.level }
    : null;
  const group3Data = group3.value
    ? { id: group3.value.id, level: group3.value.level }
    : null;

  const skillData = skill.value
    ? { id: skill.value.id, level: skill.value.level }
    : null;
  const skill2Data = skill2.value
    ? { id: skill2.value.id, level: skill2.value.level }
    : null;
  const skill3Data = skill3.value
    ? { id: skill3.value.id, level: skill3.value.level }
    : null;
  const skill4Data = skill4.value
    ? { id: skill4.value.id, level: skill4.value.level }
    : null;

  const mainData = main.value
    ? { id: main.value.id, level: main.value.level }
    : null;
  const main2Data = main2.value
    ? { id: main2.value.id, level: main2.value.level }
    : null;
  const main3Data = main3.value
    ? { id: main3.value.id, level: main3.value.level }
    : null;
  const main4Data = main4.value
    ? { id: main4.value.id, level: main4.value.level }
    : null;
  const main5Data = main5.value
    ? { id: main5.value.id, level: main5.value.level }
    : null;

  const data = {
    fullname: fullname.value,
    position: position.value,
    monthSelect: monthSelect.value !== undefined ? parseInt((monthSelect.value as any).value) : null,
    date_start: date_start.value,
    date_finish: date_finish.value,
    caretaker_1: caretaker1.value,
    caretaker_2: caretaker2.value,
    knowledge: know_ledge,
    assign_job: assign_job.filter((item) => item !== null),
    otherlaw: OtherLaw.value,
    skill: skillData,
    skill_2: skill2Data,
    skill_3: skill3Data,
    skill_4: skill4Data,
    main: mainData,
    main_2: main2Data,
    main_3: main3Data,
    main_4: main4Data,
    main_5: main5Data,
    group: groupData,
    group_2: group2Data,
    group_3: group3Data,
    other: Other.value,
    other_5: Other5.value,
    productivity_assign: Productivity_assign.filter((item) => item !== null),
    commander: commander.value,
    date_1: date1.value,
    date_2: date2.value,
    date_3: date3.value,
    date_4: date4.value,
    fullname_foot: fullnameFoot.value,
    position_foot: positionFoot.value,
    caretaker_foot: caretakerFoot.value,
    caretaker_foot2: caretakerFoot2.value,
    checkarray: checkRule.value
      .filter((item) => item.checked === 1)
      .map((item) => ({
        id: item.id,
        checked: item.checked,
      })),
  };
  console.log("test", data);
};

const saveData = async () => {
  // myForm.value.resetValidation();
  // nameRef.value.validate();
  // positionRef.value.validate();
  // monthRef.value.validate();
  // startDateRef.value.validate();
  // caregiverRef1.value.validate();
  // caregiverRef2.value.validate();
  // workInfopRef.value.validate();
  myForm.value.validate().then(async (result: boolean) => {
    if (result) {
      $q.dialog({
        title: "บันทึกข้อมูล",
        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
        cancel: {
          flat: true,
          const: "negative",
        },
      })
        .onOk(async () => {
          // putData();
        })
        .onCancel(() => {})
        .onDismiss(() => {});
    } else {
      // ลอง
      putData();
      notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
    }
  });
};
const OtherLaw = ref<string>("");


const skill = ref<any>();
const skill2 = ref<any>();
const skill3 = ref<any>();
const skill4 = ref<any>();
const OPcomputer = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);
const OPenglish = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);
const OPinfomation = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);
const OPresourse = ref<
  Array<{
    id: number;
    title: string;
    level: number;
    level_description: string;
  }>
>([]);

onMounted(async () => {
  await getLaw();
  await getcompetency();
  await getCompetencyGroup();
  await getSkill();
  await getKnowledge();
});
</script>
<style lang="scss" scoped>
.border_y {
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}
.borderCheck {
  border-bottom: 1px solid #d8d8d8;
}
.text-top2 {
  font-weight: 500;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}
.text-top0 {
  font-weight: 600;
  padding-bottom: 8px;
  color: rgb(70, 68, 68);
}
.text-Hd {
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 5px;
  color: #02a998;
}
.bin {
  align-items: center;
  justify-content: center;
}
</style>