<script setup lang="ts">
import DialogHeader from "@/components/DialogHeader.vue";
import { ref, reactive } from "vue";

const modal = defineModel<boolean>("modal", { required: true });
const isEdit = defineModel<boolean>("isEdit", { required: true });

const formData = reactive({
  name: "",
  group: [],
  target: "",
  isDevelopment70: false,
  isDevelopment20: false,
  isDevelopment10: false,
  achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
  achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
  achievement0: "ไม่ได้ดำเนินการพัฒนา",
});
function close() {
  modal.value = false;
  isEdit.value = false;

  formData.name =  ""
  formData.group =  []
  formData.target =  ""
  formData.isDevelopment70 =  false
  formData.isDevelopment20 =  false
  formData.isDevelopment10 =  false
  formData.achievement10 =  "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
  formData.achievement5 =  "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน"
  formData.achievement0 =  "ไม่ได้ดำเนินการพัฒนา"
}
</script>
<template>
  <q-dialog persistent v-model="modal">
    <q-card style="width: 80%">
      <DialogHeader
        :tittle="`${isEdit ? 'แก้ไข' : 'เพิ่ม'}การพัฒนาตนเอง`"
        :close="close"
      />
      <q-separator />
      <q-card-section>
        <div class="row q-col-gutter-sm">
          <div class="col-12">
            <q-input
              v-model="formData.name"
              outlined
              dense
              class="inputgreen"
              label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
            >
            </q-input>
          </div>
          <div class="column">
            <q-checkbox
              v-model="formData.isDevelopment70"
              label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
            />
            <q-checkbox
              v-model="formData.isDevelopment20"
              label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
            />
            <q-checkbox
              v-model="formData.isDevelopment10"
              label="10 การฝึกอบรมอื่นๆ"
            />
          </div>
          <div class="col-12">
            <q-input
              label="เป้าหมายการนำไปพัฒนางาน"
              v-model="formData.target"
              outlined
              type="textarea"
              dense
              class="inputgreen"
            ></q-input>
          </div>
          <div class="col-12">
            <q-card bordered>
              <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
                <div class="col-4 text-center">
                  <span>ระดับคะแนน</span>
                </div>
                <div class="col-8 text-start">
                  <span>เกณฑ์การประเมิน</span>
                </div>
              </div>
              <div class="row q-pa-sm">
                <div class="col-4 text-center self-start text-body1">
                  <span>10</span>
                </div>
                <div class="col-8">
                  <q-input
                    class="inputgreen"
                    v-model="formData.achievement10"
                    outlined
                    dense
                    label="เกณฑ์การประเมิน"
                  ></q-input>
                </div>
              </div>
              <q-separator />
              <div class="row q-pa-sm bg-grey-2">
                <div class="col-4 text-center self-start text-body1">
                  <span>5</span>
                </div>
                <div class="col-8">
                  <q-input
                    class="inputgreen"
                    v-model="formData.achievement5"
                    outlined
                    dense
                    label="เกณฑ์การประเมิน"
                  ></q-input>
                </div>
              </div>
              <q-separator />
              <div class="row q-pa-sm">
                <div class="col-4 text-center self-start text-body1">
                  <span>0</span>
                </div>
                <div class="col-8">
                  <q-input
                    class="inputgreen"
                    v-model="formData.achievement0"
                    outlined
                    dense
                    label="เกณฑ์การประเมิน"
                  ></q-input>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </q-card-section>
      <q-separator />

      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="บันทึก" color="secondary" type="submit"
          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
