<template>
  <div class="row">
    <q-select v-model="currentNode" :options="allCol" option-label="name" class="col-3" dense option-value="value" map-options filled></q-select>
    <where-node :node="currentNode" v-if="currentNode"></where-node>
  </div>
</template>

<script>
import { ref, inject, provide, watch } from 'vue'
import whereNode from './whereNode.vue'
export default {
  components: { whereNode },
  props: {
    data: Object
  },
  setup(props, context) {
    const allCol = inject('columns')
    const currentNode = ref(null)
    const model = ref(props.data)

    provide('whereModel', model)
    console.log(model.value, '....')

    watch(
      () => model,
      val => {
        context.emit('change', val.value)
      },
      { deep: true }
    )

    if (model.value.Name) {
      const temp = allCol.find(x => x.data.Id === model.value.Name)
      currentNode.value = temp ? temp : allCol[0]
      console.log(currentNode)
    } else {
      currentNode.value = allCol ? allCol[0] : null
    }

    return { allCol, currentNode }
  }
}
</script>

<style></style>
