<template>
  <q-card-section class="row items-center col-12 q-py-sm bg-grey-2">
    <div class="row col-12 justify-center">
      <div class="text-bold text-subtitle1">ข้อกำหนดและเงื่อนไข</div>
    </div>
  </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">
          <div v-html="editorCondition"></div>
          <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({
  ok: {
    type: Function,
    default: () => console.log('not function')
  },
  editorCondition: {
    type: String,
    default: () =>
      `<div style="text-align: center;"><span style="color: rgb(193, 0, 21); font-weight: 700; letter-spacing: 0.14992px;">ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล</span><br></div><div><p style="margin-bottom: 16px; font-size: 14px;">&nbsp; &nbsp; หนังสือยินยอมให้เก็บ ใช้หรือเปิดเผยข้อมูลส่วนบุคคลของผู้สมัคร เพื่อสมัครงานกับกรุงเทพมหานครฯ 1. คำยินยอมจากผู้ให้ข้อมูลกับกรุงเทพมหานครฯ ข้าพเจ้า&nbsp;<strong>System Administrator</strong>&nbsp;ยินยอมให้ใช้หรือเปิดเผยข้อมูลส่วนบุคคลที่เกี่ยวข้องกับข้าพเจ้า สำหรับให้กรุงเทพมหานครฯ พิจารณาคุณสมบัติว่ามีความเหมาะสมกับตำแหน่งงานที่ทางกรุงเทพมหานครฯ เปิดรับหรือไม่ ข้าพเจ้าฯ ยินยอมให้ทางกรุงเทพมหานครฯ เก็บข้อมูลส่วนบุคคล ตรวจสอบประวัติส่วนบุคคล ประวัติอาชญากรรม หรือประวัติ/ประสบการณ์การทำงานที่ผ่านมาของข้าพเจ้าฯ ไปยังบุคคล และ/หรือ หน่วยงานต่างๆ ที่เกี่ยวข้อง เพื่อเป็นข้อมูลประกอบการพิจารณาการคัดเลือกตามตำแหน่งที่ข้าพเจ้าสมัคร โดยข้าพเจ้าฯ ยินยอมให้เปิดเผยข้อมูลดังต่อไปนี้</p><p style="margin-bottom: 16px; font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. รายละเอียดข้อมูล ที่ผู้สมัครงานได้กรอกในใบสมัครงานของกรุงเทพมหานครฯ ข้อมูลบุคคลอ้างอิง/บุคคลที่เกี่ยวข้องตามที่ได้ระบุไว้ในใบสมคัร ประวัติส่วนบุคคลและประวัติการทำงานเป็นต้น 2.รายละเอียดข้อมูลต่างๆ ในเอกสารหรือหลักฐานที่ผู้สมัครได้นำส่งให้กับกรุงเทพมหานครฯ ทุกช่องทางการสื่อสาร เช่น จดหมาย หรืออีเมล์เป็นต้น ในกรณีที่ท่าน ไม่ผ่าน การพิจารณารับเข้าทำงาน ข้อมูลในใบสมคัรจะถูกเก็บรักษาไว้อีกเป็นระยะเวลา 24 เดือน เพื่อพิจารณาความเหมาะสมกับตำแหน่งงานอื่น ในกรณีที่ท่าน ผ่าน การพิจารณารับเข้าทำงาน ข้อมูลในใบสมัครจะถูกเก็บรักษาไว้ตลอดระยะเวลาการเป็นพนักงาน/ลูกจ้าง และเก็บต่อเนื่องอีกเป็นระยะเวลา 10 ปี เพื่อกรณีต้องใช้เป็นหลักฐานประกอบการใช้สิทธิเรียกร้องตามกฎหมาย พระราชบัญญัติคุ้มครองแรงงาน พ.ศ. 2541 และที่แก้ไขเพิ่มเติม</p><p style="margin-bottom: 16px; font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. ข้อมูลส่วนบุคคลที่กรุงเทพมหานครฯ เก็บรวบรวมในคร้ังนี้ กรุงเทพมหานครฯ จะใช้วิธีการที่ชอบด้วยกฏหมายและเป็นธรรมในการเก็บรวบรวมข้อมูลส่วนบุคคลอย่างจำกัดเพียงเท่าที่จำเป็นภายใต้วัตถุประสงค์การทำงานของกรุงเทพมหานครฯ เพื่อใช้เป็นข้อมูลป</p></div><div><ul style="font-size: 14px; list-style-type: circle;"><li>ชื่อ-นามสกุล เพื่อติดต่อกับทางกรุงเทพมหานครฯ</li><li>อีเมล์ เพื่อใช้ในการติดต่อกับกรุงเทพมหานครฯ</li><li>เบอร์โทร เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li><li>ที่อยู่ เพื่อใช้สมัครงานกับทางกรุงเทพมหานครฯ</li><li>ประวัติการทำงาน, ประวัติการศึกษา, ประวัติการฝึกอบรม ตามข้อมูลข้างต้น</li></ul></div><div><p style="margin-bottom: 16px; font-size: 14px;">&nbsp; &nbsp; &nbsp; &nbsp; ท้้งนี้ข้อมูลส่วนบุคคลดังกล่าวเป็นข้อมูลที่จำเป็นสำหรับการทำงานของกรุงเทพมหานครฯ หากไม่มีข้อมูลดังกล่าว อาจส่งผลต่อกระบวนการพิจารณาคุณสมบัติของผู้สมัคร</p><p style="margin-bottom: 16px; font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;ทั้งนี้ผู้สมัครเป็นผู้มีสิทธิเลือกได้ว่าจะบันทึกข้อมูลส่วนบุคคลอื่นใด และยินดีจะเปิดเผยข้อมูลดังกล่าวกับบุคคลหรือหน่วยงานอื่นหรือไม่ วัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล กรุงเทพมหานครฯ จะเก็บรวบรวมข้อมูลส่วนบุคคลของท่านเพื่อนำไปใช้หรือเปิดเผยเท่าที่จำเป็นภายใต้วัตถุประสงค์ในการใช้ประกอบการพิจารณาคัดเลือกตามตำแหน่งที่ผู้ให้ข้อมูลแสดงความประสงค์ไว้เท่าน้้น กรุงเทพมหานครฯ จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย</p></div>`
  }
})

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>
