<template>
  <q-card-section class="row items-center col-12 q-py-sm bg-grey-2">
    <div class="row col-11 justify-center">
      <div class="text-bold text-subtitle1">ข้อกำหนดและเงื่อนไข</div>
    </div>
    <q-space />
  </q-card-section>
  <q-separator />
  <q-card-section style="max-height: 70vh" class="scroll q-pb-sm">
    <div class="text-center row justify-center">
      <div class="col-12 text-subtitle1 text-weight-bold text-negative q-pt-sm">
        ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล
      </div>
      <q-card class="col-xs-12 col-sm-11 row text-left q-py-sm" flat>
        <div class="col-12">
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;หนังสือยินยอมให้เก็บ ใช้หรือเปิดเผยข้อมูลส่วนบุคคลของผู้สมัคร
            เพื่อสมัครงานกับกรุงเทพมหานครฯ 1. คำยินยอมจากผู้ให้ข้อมูลกับกรุงเทพมหานครฯ ข้าพเจ้า
            <strong>{{ fullname }}</strong>
            ยินยอมให้ใช้หรือเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า สำหรับให้กรุงเทพมหานครฯ
            พิจารณาคุณสมบัติว่ามีความเหมาะสมกับตำแหน่งงานที่ทางกรุงเทพมหานครฯ เปิดรับหรือไม่
            ข้าพเจ้าฯ ยินยอมให้ทางกรุงเทพมหานครฯ เก็บข้อมูลส่วนบุคคล ตรวจสอบประวัติส่วนบุคคล
            ประวัติอาชญากรรม หรือประวัติ/ประสบการณ์การทำงานที่ผ่านมาของข้าพเจ้าฯ ไปยังบุคคล และ/หรือ
            หน่วยงานต่างๆ ที่เกี่ยวข้อง
            เพื่อเป็นข้อมูลประกอบการพิจารณาการคัดเลือกตามตำแหน่งที่ข้าพเจ้าสมัคร โดยข้าพเจ้าฯ
            ยินยอมให้เปิดเผยข้อมูลดังต่อไปนี้
          </p>
          <p>
            <span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. รายละเอียดข้อมูล
              ที่ผู้สมัครงานได้กรอกในใบสมัครงานของกรุงเทพมหานครฯ
              ข้อมูลบุคคลอ้างอิง/บุคคลที่เกี่ยวข้องตามที่ได้ระบุไว้ในใบสมคัร
              ประวัติส่วนบุคคลและประวัติการทำงานเป็นต้น 2.รายละเอียดข้อมูลต่างๆ
              ในเอกสารหรือหลักฐานที่ผู้สมัครได้นำส่งให้กับกรุงเทพมหานครฯ ทุกช่องทางการสื่อสาร เช่น
              จดหมาย หรืออีเมล์เป็นต้น ในกรณีที่ท่าน ไม่ผ่าน การพิจารณารับเข้าทำงาน
              ข้อมูลในใบสมคัรจะถูกเก็บรักษาไว้อีกเป็นระยะเวลา 24 เดือน
              เพื่อพิจารณาความเหมาะสมกับตำแหน่งงานอื่น ในกรณีที่ท่าน ผ่าน การพิจารณารับเข้าทำงาน
              ข้อมูลในใบสมัครจะถูกเก็บรักษาไว้ตลอดระยะเวลาการเป็นพนักงาน/ลูกจ้าง
              และเก็บต่อเนื่องอีกเป็นระยะเวลา 10 ปี
              เพื่อกรณีต้องใช้เป็นหลักฐานประกอบการใช้สิทธิเรียกร้องตามกฎหมาย
              พระราชบัญญัติคุ้มครองแรงงาน พ.ศ. 2541 และที่แก้ไขเพิ่มเติม
            </span>
          </p>
          <p>
            <span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. ข้อมูลส่วนบุคคลที่กรุงเทพมหานครฯ
              เก็บรวบรวมในคร้ังนี้ กรุงเทพมหานครฯ
              จะใช้วิธีการที่ชอบด้วยกฏหมายและเป็นธรรมในการเก็บรวบรวมข้อมูลส่วนบุคคลอย่างจำกัดเพียงเท่าที่จำเป็นภายใต้วัตถุประสงค์การทำงานของกรุงเทพมหานครฯ
              เพื่อใช้เป็นข้อมูลประกอบการพิจารณาคัดเลือกตามตำแหน่งที่ผู้ให้ข้อมูลประสงค์จะสมัครรับการคัดเลือกโดยกรุงเทพมหานครฯ
              จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่าน ดังนี้
              <ul style="list-style-type: circle;">
                  <li>ชื่อ-นามสกุล เพื่อติดต่อกับทางกรุงเทพมหานครฯ</li>
                  <li>อีเมล์ เพื่อใช้ในการติดต่อกับกรุงเทพมหานครฯ</li>
                  <li>เบอร์โทร เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
                  <li>ที่อยู่ เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li>
                  <li>ประวัติการทำงาน, ประวัติการศึกษา, ประวัติการฝึกอบรม ตามข้อมูลข้างต้น</li>
              </ul>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ท้้งนี้ข้อมูลส่วนบุคคลดังกล่าวเป็นข้อมูลที่จำเป็นสำหรับการทำงานของกรุงเทพมหานครฯ
              หากไม่มีข้อมูลดังกล่าว อาจส่งผลต่อกระบวนการพิจารณาคุณสมบัติของผู้สมัคร
            </span>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;ทั้งนี้ผู้สมัครเป็นผู้มีสิทธิเลือกได้ว่าจะบันทึกข้อมูลส่วนบุคคลอื่นใด
            และยินดีจะเปิดเผยข้อมูลดังกล่าวกับบุคคลหรือหน่วยงานอื่นหรือไม่
            วัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล กรุงเทพมหานครฯ
            จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่านเพื่อนำไปใช้หรือเปิดเผยเท่าที่จำเป็นภายใต้วัตถุประสงค์ในการใช้ประกอบการพิจารณาคัดเลือกตามตำแหน่งที่ผู้ให้ข้อมูลแสดงความประสงค์ไว้เท่าน้้น
            กรุงเทพมหานครฯ
            จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย
            เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย
          </p>
          <div class="row col-12 justify-center">
            <q-checkbox
              v-model="acceptTermOfUse"
              label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
            />
          </div>
        </div>
      </q-card>
    </div>
  </q-card-section>
  <q-separator />
  <q-card-actions align="right" class="bg-white text-teal justify-center">
    <q-btn label="ยอมรับ" style="width: 150px;" :color="!acceptTermOfUse ? 'grey':'primary'" @click="ok" :disable="!acceptTermOfUse" />
  </q-card-actions>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import keycloak from '@/plugins/keycloak'
const props = defineProps({
  close: {
    type: Function,
    default: () => console.log('not function')
  },
  ok: {
    type: Function,
    default: () => console.log('not function')
  }
})

const fullname = ref<string>('')
const acceptTermOfUse = ref<boolean>(false)

/**
 * ดิงชื่อผู้ใช้งานจาก keycloak
 */
if (keycloak.tokenParsed != null) {
  fullname.value = keycloak.tokenParsed.name
}

const ok = async () => {
  props.ok()
}
</script>
<style>
.mycard {
  border-radius: 30px 30px 0px 0px;
}
.mycardxl {
  border-radius: 30px;
}
</style>
