<template>
  <q-page>
    <div class="flowchart">
      <q-btn @click="showCondition()" class="q-mt-md" color="primary" icon="mdi-plus">条件エディタ表示</q-btn>
    </div>
    <condition-editor v-model:show="show" v-model:conditionTree="tree"></condition-editor>
    <q-code>{{conditionString}}</q-code>
  </q-page>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue';
import ConditionEditor from '../components/ConditionEditor/ConditionEditor.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
import { ConditionTree,GroupNode,ConditionNode,LogicalOperator,Operator } from 'app/src/types/Conditions';

const store = useFlowEditorStore();
const tree = reactive(new ConditionTree());
const newNode = new ConditionNode({},Operator.Equal,'',tree.root);
tree.addNode(tree.root,newNode);

const show =ref(false);
const showCondition=()=>{
  show.value=true;
}
const conditionString = computed(()=>{
    return tree.buildConditionString(tree.root);
  });
store.setApp({
  appId:'146',
  name:'トリトン管理部日報'
});
</script>

<style lang="scss">
.flowchart {
  padding-top: 10px;
}
</style>
