<template>
  <q-page>

      <div class="flowchart">
        <node-item v-for="(node,) in refFlow.actionNodes" :key="node.id"
         :isSelected="node===state.activeNode" :actionNode="node"
         @addNode="addNode"
         @nodeSelected="onNodeSelected"
         @nodeEdit="onNodeEdit"
         @deleteNode="onDeleteNode"
         @deleteAllNextNodes="onDeleteAllNextNodes"
         ></node-item>
      </div>
  </q-page>
  <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
  <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
      <action-select ref="appDg" name="アクション" type="single"></action-select>
  </show-dialog>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue';
import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction, IActionProperty } from 'src/types/ActionTypes';
import NodeItem from 'src/components/main/NodeItem.vue';
import ShowDialog from 'components/ShowDialog.vue';
import ActionSelect from 'components/ActionSelect.vue';
import PropertyPanel from 'components/right/PropertyPanel.vue';


const rootNode:RootAction =new RootAction('app.record.create.submit','レコード追加画面','保存するとき');
const actionFlow: ActionFlow = new ActionFlow(rootNode);
const saibanProps:IActionProperty[]=[{
  component:'InputText',
  props:{
    displayName:'フォーマット',
    modelValue:'',
    name:'format',
    placeholder:'フォーマットを入力してください',
  }
},{
  component:'FieldInput',
  props:{
    displayName:'採番項目',
    modelValue:'',
    name:'field',
    placeholder:'採番項目を選択してください',
  }
}];

actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する','',[],saibanProps));
actionFlow.addNode(new ActionNode('入力データ取得','電話番号を取得する',''));
const branchNode = actionFlow.addNode(new ActionNode('条件分岐','電話番号入力形式チャック','',['はい','いいえ'] ));
// actionFlow.addNode(new ActionNode('入力データ取得','住所を取得する',''),branchNode,'はい');
actionFlow.addNode(new ActionNode('エラー表示','エラー表示して保存しない',''),branchNode,'いいえ' );

// ref関数を使ってtemplateとバインド
const state=reactive({
  activeNode:rootNode,
})

const refFlow = ref(actionFlow);
const showAddAction=ref(false);
const drawerRight=ref(false);

const addActionNode=(action:IActionNode)=>{
  refFlow.value.actionNodes.push(action);
}

const addNode=(node:IActionNode,inputPoint:string)=>{
  showAddAction.value=true;
}

const onNodeSelected=(node:IActionNode)=>{
  //右パネルが開いている場合、自動閉じる
  if(drawerRight.value && state.activeNode.id!==node.id){
    drawerRight.value=false;
  }
  state.activeNode = node;
}

const onNodeEdit=(node:IActionNode)=>{
  state.activeNode = node;
  drawerRight.value=true;
}

const onDeleteNode=(node:IActionNode)=>{
  refFlow.value.removeNode(node);
}

const onDeleteAllNextNodes=(node:IActionNode)=>{
  refFlow.value.removeAllNext(node.id);
}
const closeDg=(val :any)=>{
  console.log('Dialog closed->',val);
}
</script>

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