<template>
  <q-splitter :model-value="70" class="w-full" style="height: 100%">
    <template #before>
      <div class="pr-1" style="height: 100%">
        <IndepFactorDefine
          ref="factorDefineTreeGridRef"
          @row-click="
            (args) => {
              currentSelectedFactorDefineRef = args.row;
              factorGridRef.refresh();
            }
          "
          @before-request-data="
            () => {
              currentSelectedFactorDefineRef = {};
              factorGridRef.refresh();
            }
          "
        ></IndepFactorDefine>
      </div>
    </template>
    <template #after>
      <IndepFactor ref="factorGridRef" :factor-define="currentSelectedFactorDefineRef"></IndepFactor>
    </template>
  </q-splitter>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import IndepFactorDefine from './IndepFactorDefine.vue';
import IndepFactor from './IndepFactor.vue';

const factorDefineTreeGridRef = ref();
const currentSelectedFactorDefineRef = ref();
const factorGridRef = ref();
</script>
