<template>
  <div class="q-gutter-y-md" style="max-width: 600px;">
    <q-card >
     <q-tabs
          v-model="tab"
          dense
          class="text-grey"
          active-color="white"
          active-bg-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab name="fields" label="フィールド"></q-tab>
          <q-tab name="vars" label="変数"></q-tab>
        </q-tabs>

        <q-separator></q-separator>

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="fields">
              <field-list v-model="selected" type="single" :filter="filter" :appId="sourceApp ? sourceApp :appId " :fields="sourceFields"></field-list>
            </q-tab-panel>

          <q-tab-panel name="vars" >
            <variable-list v-model="selected" type="single" :vars="vars"></variable-list>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
</div>
</template>
<script lang="ts">
import { ref, onMounted, reactive, inject } from 'vue'
import FieldList from './FieldList.vue';
import VariableList from './VariableList.vue';

export default {
  name: 'ConditionObjects',
  components:{
    FieldList,
    VariableList
  },
  props: {
    name: String,
    type: String,
    appId: Number,
    vars: Array,
    filter:String
  },
  setup(props) {
    const selected = ref([]);
    console.log(selected);
    
    return {
      sourceFields : inject('sourceFields'),
      sourceApp : inject('sourceApp'),
      tab: ref('fields'),
      selected
    }
  },

}
</script>
