<template>
  <div>
    <div class="q-ma-md">
      <div class="q-gutter-xs row items-start">
        <q-breadcrumbs class="q-pt-xs q-mr-sm" active-color="black">
          <q-breadcrumbs-el icon="home" />
          <q-breadcrumbs-el :label="actName" />
          <q-breadcrumbs-el
            v-for="flowName in flowNames"
            :key="flowName"
            :label="flowName"
          />
        </q-breadcrumbs>
        <q-separator vertical class="q-mr-xs" />
        <q-btn
          outline
          class="q-py-sm"
          padding="none md none sm"
          color="primary"
          size="md"
          @click="drawerLeft = !drawerLeft"
          label="変 更"
          icon="expand_more"
          dense
        />

        <q-space />
        <q-btn
          class="q-px-sm q-mr-sm"
          color="white"
          size="sm"
          text-color="black"
          label="キャンセル"
          dense
        />

        <q-btn
          class="q-px-sm"
          color="primary"
          size="sm"
          label="保存する"
          dense
        />
      </div>
    </div>
    <q-layout
      container
      style="height: 91.5dvb"
      class="shadow-2 rounded-borders"
    >
      <q-drawer side="left" overlay bordered v-model="drawerLeft">
        <div class="q-pa-sm fixed-right">
          <q-btn
            flat
            round
            color="primary"
            icon="close"
            @click="drawerLeft = !drawerLeft"
          />
        </div>

        <div class="q-mt-lg q-pa-sm">
          <q-card-section>
            <p class="text-h6 q-pl-md">アクション選択</p>
            <div>
              <q-btn
                label="アクション選択"
                color="primary"
                @click="showDg()"
                v-if="addshow"
              />
              <show-dialog
                v-model:visible="show"
                name="アクション"
                @close="closeDg"
              >
                <action-select
                  ref="appDg"
                  name="アクション"
                  type="single"
                ></action-select>
              </show-dialog>
            </div>
          </q-card-section>
        </div>
        <q-separator />
        <div class="q-mt-md q-pa-sm">
          <q-card-section>
            <p class="text-h6 q-pl-md q-mb-none">フロー選択</p>
            <ControlPanel />
          </q-card-section>
        </div>
        <q-separator />
        <q-card-actions align="right">
          <div class="q-pa-sm">
            <q-btn
              flat
              color="primary"
              size="md"
              @click="drawerLeft = !drawerLeft"
              label="ジャンプ"
              dense
            />
          </div>
        </q-card-actions>
      </q-drawer>

      <FlowChartTest />
    </q-layout>
  </div>
</template>

<script setup lang="ts">
import FlowChartTest from 'pages/FlowChartTest.vue';
import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
import { computed, 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();

interface FlowEditorPageProps {
  actName: string;
  flowNames: string[];
}

const props = withDefaults(defineProps<FlowEditorPageProps>(), {
  actName: '勤怠管理 - 4',
  flowNames: () => ['レコードを追加画面', '保存をクリックした時'],
});
const actName = computed(() => props.actName);
const flowNames = computed(() => props.flowNames);

const drawerLeft = ref(false);


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;
    }
  };
};


</script>

<style lang="sass">
.ItemSelector
  border: 0.15em solid rgba(#999, .4)
  border-radius: 0.4em
</style>
