<template>
  <q-page>

    <div class="q-pa-md column content-center items-center">
      <div>
        <q-btn label="アクション選択" color="primary" @click="showDg()" v-if="addshow" />
        <show-dialog v-model:visible="show" name="アクション" @close="closeDg" width="350px">
          <action-select ref="appDg" name="アクション" type="single"></action-select>
        </show-dialog>
      </div>
      <div id="action"></div>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ShowDialog from 'components/ShowDialog.vue';
import ActionSelect from 'components/ActionSelect.vue';

const show = ref(false);
const addshow = ref(true);
const appDg = ref();

const showDg = () => {
  show.value = true;
};

const closeDg = (val: string) => {
  if (val == 'OK') {
    //alert(JSON.stringify(appDg.value.selected[0].content));
    let oDiv1 = document.getElementById('action');
    let oDiv2 = document.createElement('div');
    oDiv2.setAttribute('class', 'action');
    if (oDiv1 !== null) {
      oDiv2.innerHTML = appDg.value.selected[0].content;
      oDiv1?.append(oDiv2);
      // let oAdd = oDiv2.getElementsByClassName('next')[0];
      // oAdd.addEventListener('mouseenter', mouseenter);
      // oAdd.addEventListener('mouseleave', mouseleave);
      // let oDel = oDiv2.getElementsByClassName('del')[0];
      // oDel.addEventListener('click', clickdel);
    }

    if (document.getElementsByClassName('action').length > 0) {
      addshow.value = false;
    }
  };
};

const mouseenter = (event: Event) => {
  console.log('1');
  let oAdd = "<div style='display: table-cell;'><button type='button' onclick='clickadd(this.parentElement.parentElement.parentElement.parentElement)'>+</button></div>";
  let oDiv1 = event.target as Element
  let oDivs = oDiv1?.getElementsByClassName('add');
  if (oDivs.length === 0) {
    let oDiv2 = document.createElement('div');
    oDiv2.className = "add";
    oDiv2.setAttribute("style", "display:table-row;height:inherit;position: absolute;left:calc(50% - 19px);");
    oDiv2.innerHTML = oAdd;
    oDiv1?.append(oDiv2);
  }
};

const mouseleave = (event: Event) => {
  console.log('2');
  let oDiv2 = (event.target as Element)?.parentElement?.getElementsByClassName('add');
  oDiv2[0]?.remove();

};

const clickadd = (pdiv: Element) => {
  console.log('3');
  show.value = true;
};

const clickdel = (pdiv: Element) => {
  pdiv.remove();
  if (document.getElementsByClassName('action').length == 0) {
    addshow.value = true;
  }
};

window.clickadd = clickadd;
window.clickdel = clickdel;
window.mouseenter = mouseenter;
window.mouseleave = mouseleave;

</script>
