<script setup>
import { ref, computed, watch } from 'vue'
import CModal from '../CModal/CModal.vue'
import MDIcon from '../MDIcon/MDIcon.vue'
import CButton from '../CButton/CButton.vue'
import CCheckbox from '../CCheckbox/CCheckbox.vue'

const props = defineProps({
  /**
   * モーダルv-model
   * @example isModalOpen: true
   */
  isModalOpen: { type: Boolean, default: false },
  /**
   * チェックボックスステートv-model
   * @example isModalOpen: true
   */
  isCheckBoxState: { type: Boolean, default: false },
  /**
   * モーダルタイトル
   * @example p_Title: '確認'
   */
  p_Title: { type: String, default: '' },
  /**
   * モーダルテキスト
   * @example p_Text: 'テストテキスト'
   */
  p_Text: { type: String, default: '' },
  /**
   * ボタンラベル
   * @example p_BtnLabel: 'OK'
   */
  p_BtnLabel: { type: String, default: '' },
})

// モーダルタイトルを定義する
const isModalTitle = ref(props.p_Title)

// モーダルテキストを定義する
const isModalText = ref(props.p_Text)

// ボタンラベルを定義する
const isModalBtnLabel = ref(props.p_BtnLabel)

// チェックボックスの初期値を定義する
const isCheckBox = ref(false)

const emit = defineEmits(['update:isModalOpen', 'update:isCheckBoxState', 'click'])

// モーダルの展開状態を定義する
const isModalOpen = computed({
  get() {
    return props.isModalOpen
  },
  set(value) {
    emit('update:isModalOpen', value)
  },
})

// モーダルv-modelを監視する
watch(
  () => props.isModalOpen,
  () => {
    // モーダル展開時、チェックボックスステートv-modelの値がtrueではない場合、isCheckBox.valueの値をfalseにする
    if (props.isModalOpen && !props.isCheckBoxState) isCheckBox.value = false
  }
)

// OKボタンをクリックする
const clickOkBtn = () => {
  emit('update:isCheckBoxState', isCheckBox.value)
  emit('update:isModalOpen', false)
  emit('click')
}
</script>

<template>
  <CModal v-model="isModalOpen" :p_Title="isModalTitle">
    <!-- モーダルインナー -->
    <div class="_modal_inner">
      <!-- エラーアイコン -->
      <div class="_center_position_common">
        <MDIcon name="error" class="_error_icon" />
      </div>

      <!-- テキストエリア -->
      <div class="_center_position_common">
        <div class="_modal_text">{{ isModalText }}</div>
      </div>

      <!-- ボタンエリアコンテナ -->
      <div class="_btn_area_container">
        <!-- ボタン -->
        <div class="_modal_btn">
          <CButton :p_Label="isModalBtnLabel" @click="clickOkBtn" />
        </div>

        <!-- 今後表示しないコンテナ -->
        <div class="_do_not_disp_container">
          <div class="_do_not_disp_text">今後表示しない</div>
          <CCheckbox v-model="isCheckBox" />
        </div>
      </div>
    </div>
  </CModal>
</template>

<style lang="sass">
// モーダルインナー
._modal_inner
  width: 584px
  padding: 20px 0 30px 0

// 中央ポジション共通
._center_position_common
  display: flex
  justify-content: center

// エラーアイコン
._error_icon
  color: #FF0101

// テキストエリア
._modal_text
  color: #707070
  width: 320px
  text-align: center
  margin: 15px 0

// ボタンエリアコンテナ
._btn_area_container
  display: flex
  justify-content: center
  position: relative

// ボタン
._modal_btn
  width: 150px

// 今後表示しないコンテナ
._do_not_disp_container
  display: flex
  align-items: center
  position: absolute
  right: 0
._do_not_disp_text
  font-size: 12px
  color: #707070
</style>
