<template>
  <div class="flex flex-row gap-2 items-center">
    <p class="w-14 min-w-14">JOIN</p>
    {{ activeTable?.relations }}
  </div>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia";
import type { DynamicQueryStructure } from "../../types/dynamicQueries";
import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    table: {
      type: String,
      default: "",
    },
    modelValue: {
      type: Array as PropType<Array<DynamicQueryStructure & { foreignColumn: string }>>,
      default: [],
    },
  },
  emits: ["update:model-value"],
  data() {
    return {};
  },
  computed: {
    ...mapState(useQueryBuilderStore, ["tableMetas"]),
    activeTable() {
      return this.tableMetas.find((tm) => tm.tableName == this.table);
    },
  },
});
</script>
