<script setup>
import { ref, watch } from 'vue'
import CAlertModal from '../CAlertModal.vue'

// モーダル非表示フラグを定義する
const isModalDispFlag = ref(false)

// モーダルv-model初期値を定義する
const isModalOpen = ref(false)

// チェックボックスステートv-model初期値を定義する
const isCheckBoxState = ref(false)

/**
 * OKボタンをクリックした場合
 * !チェックボックスステートv-modelがtrueの場合、CAlertModalを展開できないようにする
 */
const clickOkBtn = () => {
  if (isCheckBoxState.value) isModalDispFlag.value = true
}
</script>

<template>
  <button v-if="!isModalDispFlag" @click="isModalOpen = !isModalOpen">open modal</button>
  <CAlertModal
    v-model:isModalOpen="isModalOpen"
    v-model:isCheckBoxState="isCheckBoxState"
    p_Title="テストタイトル"
    p_Text="施工状態ステータスを「工事依頼」に変更する事でコードリックに発注依頼が完了します。"
    p_BtnLabel="OK"
    @click="clickOkBtn"
  />
  <div>チェックボックスステート:{{ isCheckBoxState }}</div>
  <div v-if="isModalDispFlag">
    チェックボックスステートの値がtrueの為、CAlertModalは展開できなくなりました。
  </div>
</template>
