<!--
 ************************************************************
 *
 * Copyright (c) 2025 ysrock Co., Ltd.	<info@ysrock.co.jp>
 * Copyright (c) 2025 Yasuo Sugano	<sugano@ysrock.co.jp>
 *
 * Version	: 1.0.2
 * Update	  : 2025.04.04
 *
 ************************************************************ -->

<!--
 ******************************
 *
 * template
 *
 ****************************** -->
<template>
 <div class="dialogWrap" v-if="dialogObj !== null">
  <div class="whiteWrap">
   <div class="header">
    <div class="subject">{{ 'subject' in dialogObj.header ? dialogObj.header.subject : "" }}</div>
    <div class="close" @click="dialogObj=null;"></div>
   </div><!-- END div.header -->
   <div class="body">
    <div class="html" v-html="dialogObj.body.html"></div>
    <label v-if="'html' in dialogObj.body.agree">
     <input type="checkbox" v-model="dialogObj.body.agree.checked">
     <span>{{ dialogObj.body.agree.html }}</span>
    </label>
   </div><!-- END div.body -->
   <div class="footer">
    <template v-for="(buttonObj, buttonIdx) in dialogObj.footer.button" :key="'footer_button_' + buttonIdx">
     <button type="button" class="background " :class="buttonObj.class" @click="buttonObj.click" :disabled="buttonObj.type == 'execute' && dialogObj.body.agree.checked !== null ? !dialogObj.body.agree.checked : false">{{ buttonObj.text }}</button>
    </template>
   </div><!-- END div.footer -->
  </div><!-- END div.whiteWrap -->
 </div><!-- END div.dialogWrap -->
</template>




<!--
 ******************************
 *
 * script
 *
 ****************************** -->
<script scoped>
export default{
  setup (props) {
    /**
     * 表示する
     *  XXXX.value.open(dialogObj)
     *    header (Object)
     *      subject (String)
     *    body (Object)
     *      html (String) 
     *      agree (Object) undefinedで同意checkなし
     *        html (String)
     *        click (Callback)
     *    footer (Object)
     *      button (Array)
     *        type (Enum) cancel, execute
     *        text (String)
     *        class (String)
     *        click (Function)
     *
     *  閉じる
     *    XXXX.value.close()
     */
    const dialogObj = Vue.ref(null);

    /**
     * 確認ダイアログを表示する
     */
    const open = (args) => echoClosure.execute(args);
    const echoClosure = (() => {
      return {
        execute: (args) => {
          dialogObj.value = deepCopyClosure.execute({}, args);
          echoClosure.initialize();
        },
        initialize: () => {
          if ('header' in dialogObj.value === false) dialogObj.value.header = {};
          if ('body' in dialogObj.value === false) dialogObj.value.body = {};
          if ('agree' in dialogObj.value.body === false) dialogObj.value.body.agree = { checked: null };
          if ('footer' in dialogObj.value === false) dialogObj.value.footer = {};
          if ('button' in dialogObj.value.footer === false) dialogObj.value.footer.button = [];
          for (let i=0, len=dialogObj.value.footer.button.length; i<len; i++) echoClosure._initialButton(i);
        },
        _initialButton: (i) => {
          if ('type' in dialogObj.value.footer.button[i] === false) return;
          if (dialogObj.value.footer.button[i].type == "cancel") {
            dialogObj.value.footer.button[i] = echoClosure.cancelButton(dialogObj.value.footer.button[i]);
            return;
          };
          if (dialogObj.value.footer.button[i].type == "execute") {
            dialogObj.value.footer.button[i] = echoClosure.executeButton(dialogObj.value.footer.button[i]);
            return;
          };
        },
        cancelButton: (args) => {
          const cancelObj = {
            text: 'キャンセル',
            class: '',
            click: () => dialogObj.value = null
          };
          // return Object.assign(cancelObj, JSON.parse(JSON.stringify(args)));
          return deepCopyClosure.execute(cancelObj, args);
        },
        executeButton: (args) => {
          const executeObj = {
            text: 'ＯＫ',
            class: 'blue',
            click: () => console.debug([ 'dialog.vue', 'executeButton', dialogObj.value ])
          };
          // return Object.assign(executeObj, JSON.parse(JSON.stringify(args)));
          return deepCopyClosure.execute(executeObj, args);
        },
      };
    })();


    /**
     * 閉じる
     */
    const close = () => dialogObj.value = null;


    /**
     * ディープコピー
     */
    const deepCopyClosure = (() => {
      return {
        execute: (a, b) => {
          if (Array.isArray(b)) return deepCopyClosure.forArray(a, b);
          if (typeof b === "object") return deepCopyClosure.forObject(a, b);
          return b;
        },
        forArray: (a, b) => {
          for (let i=0, len=b.length; i<len; i++) {
            if (Array.isArray(b[i])) {
              if (a[i] === undefined) a[i] = [];           
              a[i] = deepCopyClosure.forArray(a[i], b[i]);
              continue;
            };
            if (typeof b[i] === "object") {
              if (a[i] === undefined) a[i] = {};           
              a[i] = deepCopyClosure.forObject(a[i], b[i]);
              continue;
            };
            a[i] = b[i];
          };
          return a;
        },
        forObject: (a, b) => {
          for (let key in b) {
            if (Array.isArray(b[key])) {
              a[key] = deepCopyClosure.forArray(key in a ? a[key] : [], b[key]);
              continue;
            };
            if (typeof b[key] === "object") {
              a[key] = deepCopyClosure.forObject(key in a ? a[key] : {}, b[key]);
              continue;
            };
            a[key] = b[key];
          };
          return a;
        },
      };
    })();

    return {
      open,
      close,
      dialogObj,
    };
  }
}
</script>


<!--
 ******************************
 *
 * style
 *
 ****************************** -->
<style scoped>

div.dialogWrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba( 0, 0, 0, .2);
  text-align: left;
}
div.dialogWrap > div.whiteWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
/* div.header */
div.dialogWrap > div.whiteWrap > div.header {
  display: flex;
  flex-direction: row;
  border-style: solid;
  border-color: #d9e0e8;
  font-weight: bold;
  line-height: 1em;
}
div.dialogWrap > div.whiteWrap > div.header > div.subject {
  flex: 1;
}
div.dialogWrap > div.whiteWrap > div.header > div.close {
  position: relative;
  margin: auto;
  cursor: pointer;
}
div.dialogWrap > div.whiteWrap > div.header > div.close::before,
div.dialogWrap > div.whiteWrap > div.header > div.close::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: #858c90;
}
div.dialogWrap > div.whiteWrap > div.header > div.close::before {
  transform: rotate(45deg);
}
div.dialogWrap > div.whiteWrap > div.header > div.close::after {
  transform: rotate(-45deg);
}
/* div.body */
div.dialogWrap > div.whiteWrap > div.body {
  background-color: #fff;
  word-break: break-all;
  overflow-x: hidden;
  overflow-y: auto;
}
div.dialogWrap > div.whiteWrap > div.body > label {
  cursor: pointer;
}
/* div.footer */
div.dialogWrap > div.whiteWrap > div.footer {
  display: flex;
  justify-content: flex-end;
  background-color: #f9fbfd;
  border-top-style: solid;
  border-top-color: #d9e0e8;
}
div.dialogWrap > div.whiteWrap > div.footer > button {
  background-color: #fff;
  border-style: solid;
  border-color: #d9e0e8;
  font-weight: bold;
  color: #888d65;
  transition: background-color .2s, color .2s;
}
@media print, screen and (min-width: 1025px){
  /* px */

  div.dialogWrap > div.whiteWrap {
    width: 560px;
    box-shadow: 0 8px 40px rgb(22 37 51 / 20%);
    border-radius: 8px;
  }
  div.dialogWrap > div.whiteWrap > div:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  div.dialogWrap > div.whiteWrap > div:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  /* div.header */
  div.dialogWrap > div.whiteWrap > div.header {
    border-width: 1px;
    padding: 12px 16px;
    font-size: 18px;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.subject {
    padding: 8px 0;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.close {
    width: 20px;
    height: 20px;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.close::before,
  div.dialogWrap > div.whiteWrap > div.header > div.close::after {
    width: 18px;
    height: 3px;
  }
  /* div.body */
  div.dialogWrap > div.whiteWrap > div.body {
    min-height: 150px;
    max-height: 300px;
    padding: 24px 24px 48px;
    font-size: 18px;
  }
  div.dialogWrap > div.whiteWrap > div.body > label > input {
    margin: 10px 5px;
  }
  /* div.footer */
  div.dialogWrap > div.whiteWrap > div.footer {
    border-top-width: 1px;
    padding: 12px 16px;
  }
  div.dialogWrap > div.whiteWrap > div.footer > button {
    height: 40px;
    margin-right: 8px;
    border-width: 1px;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 16px;
    line-height: 16px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8.5 */

  div.dialogWrap > div.whiteWrap {
    width: 65.5737vw;
    box-shadow: 0 0.9367vw 4.6838vw rgb(22 37 51 / 20%);
    border-radius: 0.9367vw;
  }
  div.dialogWrap > div.whiteWrap > div:first-child {
    border-top-left-radius: 0.9367vw;
    border-top-right-radius: 0.9367vw;
  }
  div.dialogWrap > div.whiteWrap > div:last-child {
    border-bottom-left-radius: 0.9367vw;
    border-bottom-right-radius: 0.9367vw;
  }
  /* div.header */
  div.dialogWrap > div.whiteWrap > div.header {
    border-width: 0.117vw;
    padding: 1.4051vw 1.8735vw;
    font-size: 2.1077vw;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.subject {
    padding: 0.9367vw 0;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.close {
    width: 2.3419vw;
    height: 2.3419vw;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.close::before,
  div.dialogWrap > div.whiteWrap > div.header > div.close::after {
    width: 2.1077vw;
    height: 0.3512vw;
  }
  /* div.body */
  div.dialogWrap > div.whiteWrap > div.body {
    min-height: 17.5644vw;
    max-height: 35.1288vw;
    padding: 2.8103vw 2.8103vw 5.6206vw;
    font-size: 2.1077vw;
  }
  div.dialogWrap > div.whiteWrap > div.body > label > input {
    margin: 1.1709vw 0.5854vw;
  }
  /* div.footer */
  div.dialogWrap > div.whiteWrap > div.footer {
    border-top-width: 0.117vw;
    padding: 1.4051vw 1.8735vw;
  }
  div.dialogWrap > div.whiteWrap > div.footer > button {
    height: 4.6838vw;
    margin-right: 0.9367vw;
    border-width: 0.117vw;
    border-radius: 0.4683vw;
    padding: 0 1.4051vw;
    font-size: 1.8735vw;
    line-height: 1.8735vw;
  }
}
@media screen and (max-width: 640px){
	/* px/4 */

  div.dialogWrap > div.whiteWrap {
    width: 90vw;
    box-shadow: 0 2vw 10vw rgb(22 37 51 / 20%);
    border-radius: 2vw;
  }
  div.dialogWrap > div.whiteWrap > div:first-child {
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
  }
  div.dialogWrap > div.whiteWrap > div:last-child {
    border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
  }
  /* div.header */
  div.dialogWrap > div.whiteWrap > div.header {
    border-width: 0.25vw;
    padding: 3vw 4vw;
    font-size: 4.5vw;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.subject {
    padding: 2vw 0;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.close {
    width: 5vw;
    height: 5vw;
  }
  div.dialogWrap > div.whiteWrap > div.header > div.close::before,
  div.dialogWrap > div.whiteWrap > div.header > div.close::after {
    width: 4.5vw;
    height: 0.75vw;
  }
  /* div.body */
  div.dialogWrap > div.whiteWrap > div.body {
    min-height: 37.5vw;
    max-height: 75vw;
    padding: 6vw 6vw 12vw;
    font-size: 4.5vw;
  }
  div.dialogWrap > div.whiteWrap > div.body > label > input {
    margin: 2.5vw 1.25vw;
  }
  /* div.footer */
  div.dialogWrap > div.whiteWrap > div.footer {
    border-top-width: 0.25vw;
    padding: 3vw 4vw;
  }
  div.dialogWrap > div.whiteWrap > div.footer > button {
    height: 10vw;
    margin-right: 2vw;
    border-width: 0.25vw;
    border-radius: 1vw;
    padding: 0 3vw;
    font-size: 4vw;
    line-height: 4vw;
  }
}

</style>