<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-el :label="flowNames1" />
        </q-breadcrumbs>
        <q-separator vertical class="q-mr-xs" />
        <q-btn
          unelevated
          class="q-py-sm"
          padding="none md none sm"
          color="blue-1"
          text-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>
            <div class="flex-center">
              <div class="row q-pl-md">
                <p class="text-h6">アクション選択</p>
              </div>
              <ItemSelector :actName="actName" />
            </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 { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useFlowEditorStore } from 'stores/flowEditor';

const actName = ref('勤怠管理 - 4');
const flowNames = ref(['レコードを追加画面', '保存をクリックした時']);

const drawerLeft = ref(false);
const store = useFlowEditorStore();
const { flowNames1 } = storeToRefs(store);




</script>

<style lang="sass"></style>
