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

<!--
 ******************************
 *
 * 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="loading"><img :src="imgPath"></div>
   <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 imgPath = "/commons/components/loading/imgs/loading.png";
    const loadingObj = Vue.ref(null);
    const styleObj = Vue.ref({});

    const open = (title) => {
      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 {
      imgPath,
      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.loading {
  width: 5vw;
  margin: auto;
}
div.loadingWrap > div.whiteWrap > div.loading > img {
  width: 100%;
  animation-name: spinner;
  animation-duration: 1s;
  animation-timing-function: steps( 8, start );
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
@keyframes spinner{
    0%{ transform: rotate(  0deg); }
  100%{ transform: rotate(360deg); }
}
div.loadingWrap > div.whiteWrap > div.title {
  padding: 1em;
  font-size: 1.5vw;
}
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 */
}
</style>