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

<!--
 ******************************
 *
 * template
 *
 ****************************** -->
<template>
 <div class="loadingWrap" v-if="loadingObj !== null" :style="('zIndex' in styleObj ? 'z-index:' + styleObj.zIndex : '')">
  <div class="close icon-batsu_01" v-if="('closeButton' in styleObj ? styleObj.closeButton : false)" @click="close"></div>
  <div class="whiteWrap">
   <div class="spinnerWrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
   </div><!-- END div.spinnerWrap -->
   <div class="title" v-html="loadingObj.title"></div>
  </div><!-- END div.whiteWrap -->
 </div><!-- END div.loadingWrap -->
</template>




<!--
 ******************************
 *
 * script
 *
 ****************************** -->
<script scoped>
export default{
  setup (props) {
    const loadingObj = Vue.ref(null);
    const styleObj = Vue.ref({});

    const open = (title, styleObj) => {
      if (styleObj !== undefined) setStyle(styleObj);
      loadingObj.value = {
        title: title
      };
    };

    const close = () => {
      loadingObj.value = null;
    };

    const setStyle = (args) => {
      if ('zIndex' in args) styleObj.value.zIndex = args.zIndex;
      if ('closeButton' in args) styleObj.value.closeButton = args.closeButton;
    };

    return {
      loadingObj,
      styleObj,
      open,
      close,
      setStyle,
    };

  }
}
</script>


<!--
 ******************************
 *
 * style
 *
 ****************************** -->
<style scoped>
div.loadingWrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
}
div.loadingWrap > div.whiteWrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 1em;
  color: #fff;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap {
  display: inline-block;
  margin: auto;
  position: relative;
  animation-name: spinner;
  animation-duration: 2s;
  animation-timing-function: steps(120, start);
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
@keyframes spinner{
    0%{ transform: rotate(  0deg); }
  100%{ transform: rotate(360deg); }
}

div.loadingWrap > div.whiteWrap > div.spinnerWrap > div {
  display: inline-block;
  width: 20%;
  height: 20%;
  background-color: white;
  border-radius: 50%;
  position: absolute;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(2) {
  top: 15%;
  left: 85%;
  transform: translate(-85%, -15%);
  opacity: .3;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(3) {
  top: 50%;
  left: 100%;
  transform: translate(-100%, -50%);
  opacity: .4;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(4) {
  top: 85%;
  left: 85%;
  transform: translate(-85%, -85%);
  opacity: .5;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(5) {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: .6;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(6) {
  top: 85%;
  left: 15%;
  transform: translate(-15%, -85%);
  opacity: .7;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(7) {
  top: 50%;
  left: 0%;
  transform: translate(0, -50%);
  opacity: .8;
}
div.loadingWrap > div.whiteWrap > div.spinnerWrap > div:nth-child(8) {
  top: 15%;
  left: 15%;
  transform: translate(-15%, -15%);
  opacity: .9;
}


div.loadingWrap > div.whiteWrap > div.title {
  padding: 1em;
}
div.loadingWrap > div.close {
  position: fixed;
  top: 1em;
  right: 1em;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
}


@media print, screen and (min-width: 1025px){
  /* px */

  div.loadingWrap > div.whiteWrap {
    width: 50vw;
  }
  div.loadingWrap > div.whiteWrap > div.spinnerWrap {
    width: 5vw;
    height: 5vw;
  }
  div.loadingWrap > div.whiteWrap > div.title {
    font-size: 18px;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8.5 */

  div.loadingWrap > div.whiteWrap {
    width: 70vw;
  }
  div.loadingWrap > div.whiteWrap > div.spinnerWrap {
    width: 8vw;
    height: 8vw;
  }
  div.loadingWrap > div.whiteWrap > div.title {
    font-size: 2.1077vw;
  }
}
@media screen and (max-width: 640px){
	/* px/4 */

  div.loadingWrap > div.whiteWrap {
    width: 80vw;
  }
  div.loadingWrap > div.whiteWrap > div.spinnerWrap {
    width: 15vw;
    height: 15vw;
  }
  div.loadingWrap > div.whiteWrap > div.title {
    font-size: 4.5vw;
  }
}

</style>