<template>
  <div id="action1">
        <q-card class="my-card">
          <q-card-section class="bg-primary text-white">
            <div class="text-h6">Our Changing Planet</div>
            <div class="text-subtitle2">by John Doe</div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right">
            <q-btn flat>設定</q-btn>
            <q-btn class="del" flat @click="clickdel">削除</q-btn>
          </q-card-actions>
        </q-card>
        <div class="next" style="display: table;width: 100%;height:40px;" @mouseenter="showAdd = true" @mouseleave="()=>{if(!showMenu) showAdd = false;}">
          <div aria-hidden="false" style="display: table-row;">
            <div
              style="display: table-cell;background: url(&quot;data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEzIDMwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojNUI1QjVDO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe2ZpbGw6IzVCNUI1Qzt9PC9zdHlsZT4NCiA8cmVjdCB4PSI5IiB3aWR0aD0iMiIgaGVpZ2h0PSIzNy45NzQiIGZpbGw9IiM1MTUxNTEiIHN0cm9rZS13aWR0aD0iNC41MDYyIi8+DQogPHBvbHlnb24gdHJhbnNmb3JtPSJtYXRyaXgoMS4xNzg1IDAgMCAxLjE3ODUgLS42MDY5MiAyMy41NDQpIiBwb2ludHM9IjEuOTI4IDQuMDY1IDguOTk5IDExLjEzNiAxNi4wNzIgNC4wNjUgMTcuNDg2IDUuNDc5IDguOTk5IDEzLjk2NCAwLjUxNSA1LjQ3OSIgZmlsbD0iIzUxNTE1MSIvPg0KPC9zdmc+DQo=&quot;) center center no-repeat;">
            </div>
          </div>
          <div v-if="showAdd" style="display:table-row;height:inherit;position:absolute;left:50%;">
            <div style="display:table-cell;">
              <q-btn round size="xs" color="primary" label="+">
                <q-menu v-model="showMenu">
                  <q-list style="min-width: 100px">
                    <q-item clickable v-close-popup>
                      <q-item-section @click="clickadd">New tab</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>
          </div>
        </div>
      </div>
</template>
<script lang="ts">
import { ref,watch } from 'vue'
export default {
  emits: [
    'addaction'
  ],
  setup(props,context) {
    const showAdd = ref(false)
    const showMenu = ref(false)

    watch(showMenu,(newVal) =>{
       console.log('3');
       if(!newVal)
       {
        showAdd.value = false;
       }
      });

    const clickadd = () => {
      console.log('3');
      context.emit('addaction');
      //let oDiv1 = pdiv;
      // let oDiv1 = document.getElementById('action1');
      // let oDiv2 = document.createElement('div');
      // if (oDiv1 !== null) {
      //   oDiv2.innerHTML = oDiv1?.innerHTML;
      //   oDiv1?.after(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);
      // }
    };
    const clickdel = (event: Event) => {
      let oBtn = event.target as Element;
      oBtn.parentElement?.parentElement?.parentElement?.parentElement?.remove();
    };
    // window.clickadd = clickadd;
    // window.clickdel = clickdel;
    // window.mouseenter = mouseenter;
    // window.mouseleave = mouseleave;

    return {clickadd, clickdel, showAdd,  showMenu }
  }

}
</script>
