<template>
  <q-field v-model="selectedObject" labelColor="primary" class="condition-object"
          :clearable="isSelected" stack-label  :dense="true" :outlined="true" >
    <template v-slot:control >
      <q-chip  color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
        {{ selectedObject.name }}
      </q-chip>
      <q-chip  color="info" text-color="white" v-if="isSelected && selectedObject.objectType==='variable'" :dense="true" class="selected-obj">
        {{ selectedObject.name }}
      </q-chip>
    </template>
   <template v-slot:append>
    <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
    </template>
  </q-field>
  <show-dialog v-model:visible="show" name="条件設定項目一覧" @close="closeDg" width="600px">
    <template v-slot:toolbar>
        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
          <template v-slot:before>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
    <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
  </show-dialog>
  </template>

  <script lang="ts">
  import { defineComponent, reactive, ref ,watchEffect,computed} from 'vue';
  import ShowDialog from '../ShowDialog.vue';
  import ConditionObjects from '../ConditionObjects.vue';
  import { useFlowEditorStore } from '../../stores/flowEditor';
  import {IActionFlow,IActionNode,IActionVariable} from '../../types/ActionTypes';
  export default defineComponent({
    name: 'ConditionObject',
    components: {
      ShowDialog,
      ConditionObjects
    },
    props: {
      modelValue: {
        type: Object,
        default: null
      },
    },
    setup(props, { emit }) {
      const appDg = ref();
      const show = ref(false);
      const selectedObject = ref(props.modelValue);
      const store = useFlowEditorStore();
      const isSelected = computed(()=>{
        return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
      });
      let vars:IActionVariable[] =[];
      if(store.currentFlow!==undefined && store.activeNode!==undefined ){
        vars =store.currentFlow.getVarNames(store.activeNode);
      }
      const filter=ref('');
      const showDg = () => {
        show.value = true;
      };

      const closeDg = (val:string) => {
        if (val == 'OK') {
          selectedObject.value = appDg.value.selected[0];
        }
      };

      watchEffect(() => {
        emit('update:modelValue', selectedObject.value);
      });

      return {
        store,
        appDg,
        show,
        showDg,
        closeDg,
        selectedObject,
        vars:reactive(vars),
        isSelected,
        filter
      };
    }
  });
  </script>
<style lang="scss">
.condition-object{
  min-width: 200px;
  max-height: 40px;
  padding: 2px;
}
.selected-obj{
  margin: 0px;
}
</style>
