<template>
  <div v-if="show" class="overlaydiv">
    <div class="overlaycontentdiv nopadding">
      <div class="overlayscrolldiv">
        <div class="scrollcontentdiv">
          <div class="overlayheader">BUCH</div>
          <div class="columns w-row">
            <div class="column w-col w-col-6">
              <div class="text-block-6">Bezeichnung:&nbsp;</div>
            </div>
            <div class="column-2 w-col w-col-6">
              <div class="form-block-3 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <input
                    type="text"
                    id="name"
                    name="name"
                    data-name="Name"
                    maxlength="256"
                    class="text-field-2 w-input"
                  >
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="columns-2 w-row">
            <div class="column-3 w-col w-col-6">
              <div class="text-block-6">Beschreibung:</div>
            </div>
            <div class="column-4 w-col w-col-6">
              <div class="form-block-4 w-form">
                <form id="email-form-2" name="email-form-2" data-name="Email Form 2">
                  <input
                    type="text"
                    id="name-2"
                    name="name-2"
                    data-name="Name 2"
                    maxlength="256"
                    class="text-field-3 w-input"
                  >
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="columns-3 w-row">
            <div class="column-7 w-col w-col-6">
              <div class="text-block-6">Cover:</div>
            </div>
            <div class="column-8 w-col w-col-6">
              <div class="form-block-5 w-form">
                <form id="email-form-3" name="email-form-3" data-name="Email Form 3" class="form-3">
                  <input
                    type="email"
                    class="text-field-4 w-input"
                    maxlength="256"
                    name="email"
                    data-name="Email"
                    id="email"
                    required
                  >
                  <input
                    type="submit"
                    value="UPLOAD"
                    data-wait="Please wait..."
                    class="uploadbutton w-button"
                  >
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="separatordiv"></div>
          <div class="columns w-row">
            <div class="column w-col w-col-6">
              <div class="text-block-6 large">Schultyp auswählen:</div>
            </div>
            <div class="column-2 w-col w-col-6">
              <div class="form-block-3 w-form">
                <form id="email-form" name="email-form" data-name="Email Form">
                  <select id="field" name="field" class="select-field-2 w-select">
                    <option value="Another Choice">HTL</option>
                    <option value="Another Choice">HAK</option>
                    <option value="Another Choice">HAS</option>
                  </select>
                </form>
                <div class="w-form-done"></div>
                <div class="w-form-fail"></div>
              </div>
            </div>
          </div>
          <div class="w-row">
            <div class="column-5 w-col w-col-6">
              <div class="assignmentdiv">
                <div class="assignmentheader">KOMPETENZMODULE</div>
                <div class="assignmentbody">
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Verfügbar</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">1. Klasse</div>
                        <div class="assignmentcontenttext">2. Klasse</div>
                        <div class="assignmentcontenttext">3. Klasse</div>
                        <div class="assignmentcontenttext">4. Klasse</div>
                        <div class="assignmentcontenttext">Jahrgang 1</div>
                        <div class="assignmentcontenttext">Jahrgang 2</div>
                        <div class="assignmentcontenttext">Jahrgang 3</div>
                        <div class="assignmentcontenttext">Jahrgang 4</div>
                        <div class="assignmentcontenttext">Jahrgang 5</div>
                        <div class="assignmentcontenttext">Modul 1</div>
                        <div class="assignmentcontenttext">Modul 2</div>
                        <div class="assignmentcontenttext">Modul 3</div>
                        <div class="assignmentcontenttext">Modul 4</div>
                        <div class="assignmentcontenttext">Modul 5</div>
                        <div class="assignmentcontenttext">Modul 7</div>
                      </div>
                    </div>
                  </div>
                  <div class="assignmentbuttons">
                    <a href="#" class="arrowrightbutton w-button"></a>
                    <a href="#" class="arrowleftbutton w-button"></a>
                  </div>
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Zugeordnet</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Modul 8</div>
                        <div class="assignmentcontenttext">Modul 9</div>
                        <div class="assignmentcontenttext">Modul 10</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="column-6 w-col w-col-6">
              <div class="assignmentdiv">
                <div class="assignmentheader">FÄCHER</div>
                <div class="assignmentbody">
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Verfügbar</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Latein</div>
                        <div class="assignmentcontenttext">Geschichte</div>
                      </div>
                    </div>
                  </div>
                  <div class="assignmentbuttons">
                    <a href="#" class="arrowrightbutton w-button"></a>
                    <a href="#" class="arrowleftbutton w-button"></a>
                  </div>
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Zugeordnet</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Deutsch</div>
                        <div class="assignmentcontenttext">Englisch</div>
                        <div class="assignmentcontenttext">Mathematik</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="schooltypdiv">
            <div class="columns w-row">
              <div class="column w-col w-col-6">
                <div class="text-block-6 large">Schultyp auswählen:</div>
              </div>
              <div class="column-2 w-col w-col-6">
                <div class="form-block-3 w-form">
                  <form id="email-form" name="email-form" data-name="Email Form">
                    <select
                      id="field-2"
                      name="field-2"
                      data-name="Field 2"
                      class="select-field-2 w-select"
                    >
                      <option value="Another Choice">HTL</option>
                      <option value="Another Choice">HAK</option>
                      <option value="Another Choice">HAS</option>
                    </select>
                  </form>
                  <div class="w-form-done"></div>
                  <div class="w-form-fail"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-row">
            <div class="column-5 w-col w-col-6">
              <div class="assignmentdiv">
                <div class="assignmentbuttonheader">
                  <div class="text-block-7">FERTIGKEITEN</div>
                  <a
                    href="#"
                    @click.prevent.stop="handleClick($event, 1, {lol: 'bar'})"
                    class="w-inline-block"
                  >
                    <img src="images/play-button_1.png" alt>
                  </a>
                </div>
                <div class="assignmentbody">
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Verfügbar</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Wortschatz</div>
                      </div>
                    </div>
                  </div>
                  <div class="assignmentbuttons">
                    <a href="#" class="arrowrightbutton w-button"></a>
                    <a href="#" class="arrowleftbutton w-button"></a>
                  </div>
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Zugeordnet</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Lesen</div>
                        <div class="assignmentcontenttext">Schreiben</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="column-6 w-col w-col-6">
              <div class="assignmentdiv">
                <div class="assignmentbuttonheader">
                  <div class="text-block-7">THEMEN</div>
                  <a
                    href="#"
                    @click.prevent.stop="handleClick($event, 2, {lol: 'bar'})"
                    class="w-inline-block"
                  >
                    <img src="images/play-button_1.png" alt>
                  </a>
                </div>
                <div class="assignmentbody">
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Verfügbar</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Familie</div>
                      </div>
                    </div>
                  </div>
                  <div class="assignmentbuttons">
                    <a href="#" class="arrowrightbutton w-button"></a>
                    <a href="#" class="arrowleftbutton w-button"></a>
                  </div>
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Zugeordnet</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Business</div>
                        <div class="assignmentcontenttext">Tierwelt</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="withpadding columns-4 w-row">
            <div class="column-5 w-col w-col-6">
              <div class="assignmentdiv">
                <div class="assignmentbuttonheader">
                  <div class="text-block-7">PAKETE</div>
                  <a
                    href="#"
                    @click.prevent.stop="handleClick($event, 3, {lol: 'bar'})"
                    class="w-inline-block"
                  >
                    <img src="images/play-button_1.png" alt>
                  </a>
                </div>
                <div class="assignmentbody">
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Verfügbar</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Wortschatz</div>
                      </div>
                    </div>
                  </div>
                  <div class="assignmentbuttons">
                    <a href="#" class="arrowrightbutton w-button"></a>
                    <a href="#" class="arrowleftbutton w-button"></a>
                  </div>
                  <div class="assignmentcolumn small">
                    <div class="assignmentcolumnheader">Zugeordnet</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Lesen</div>
                        <div class="assignmentcontenttext">Schreiben</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="column-6 w-col w-col-6">
              <div class="assignmentdiv">
                <div class="assignmentbuttonheader">
                  <div class="text-block-7">KAPITEL</div>
                  <a
                    href="#"
                    @click.prevent.stop="handleClick($event, 4, {lol: 'bar'})"
                    class="w-inline-block"
                  >
                    <img src="images/play-button_1.png" alt>
                  </a>
                </div>
                <div class="assignmentbody">
                  <div class="assignmentcolumn small largewidth">
                    <div class="assignmentcolumnheader">Zugeordnet</div>
                    <div class="assignmentcolumnscrolldiv">
                      <div class="assignmentcolumncontent">
                        <div class="assignmentcontenttext">Unit 1</div>
                        <div class="assignmentcontenttext">Unit 2</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="#" class="overlaybutton w-button">SPEICHERN</a>
        </div>
      </div>
    </div>
    <vue-simple-context-menu
      :elementId="'myUniqueId1'"
      :options="optionsSkill"
      :ref="'vueSimpleContextMenu1'"
      @option-clicked="optionClicked"
    ></vue-simple-context-menu>
    <vue-simple-context-menu
      :elementId="'myUniqueId2'"
      :options="optionsTopic"
      :ref="'vueSimpleContextMenu2'"
      @option-clicked="optionClicked"
    ></vue-simple-context-menu>
    <vue-simple-context-menu
      :elementId="'myUniqueId3'"
      :options="optionsPackage"
      :ref="'vueSimpleContextMenu3'"
      @option-clicked="optionClicked"
    ></vue-simple-context-menu>
    <vue-simple-context-menu
      :elementId="'myUniqueId4'"
      :options="optionsChapter"
      :ref="'vueSimpleContextMenu4'"
      @option-clicked="optionClicked"
    ></vue-simple-context-menu>
    <a @click="hide" href="#" class="closedialogbutton w-button"></a>
  </div>
</template>

<script>
import overlay from "@/components/mixins/overlay.mixin";
export default {
  mixins: [overlay],
  components: {},
  data() {
    return {
      optionsSkill: [
        {
          name: "Neue Fertigkeit",
          value: "skill-new",
          action: "showSkill"
        },
        {
          name: "Fertigkeit bearbeiten",
          slug: "skill-edit"
        },
        {
          name: "Fertigkeit löschen",
          slug: "skill-delete"
        }
      ],
      optionsChapter: [
        {
          name: "Neues Kapitel",
          value: "chapter-new",
          action: "showChapter"
        },
        {
          name: "Kapitel bearbeiten",
          slug: "skill-edit"
        },
        {
          name: "Kapitel löschen",
          slug: "skill-delete"
        }
      ],
      optionsPackage: [
        {
          name: "Neues Paket",
          value: "skill-new",
          action: "showPackage"
        },
        {
          name: "Paket bearbeiten",
          slug: "skill-edit"
        },
        {
          name: "Paket löschen",
          slug: "skill-delete"
        }
      ],
      optionsTopic: [
        {
          name: "Neues Thema",
          value: "skill-new",
          action: "showTopic"
        },
        {
          name: "Thema bearbeiten",
          slug: "skill-edit"
        },
        {
          name: "Thema löschen",
          slug: "skill-delete"
        }
      ]
    };
  },
  methods: {
    handleClick(event, no, item) {
      console.log(event);
      this.$refs["vueSimpleContextMenu" + no].showMenu(event, item);
      const menu = document.getElementById("myUniqueId" + no);
      menu.style.top = event.clientY + "px";
      console.log();
    },
    optionClicked(event) {
      this.$emit('choose', event)
    }
  }
};
</script>

<style>
</style>
