<template>
  <c-row
    style="width: 100%"
    :gutter="{
      xs: 8,
      sm: 12,
      md: 12,
      lg: 16,
      xl: 24,
      xxl: 32
    }"
  >
    <c-col :span="{ xs: 24, sm: 24, md: 6, lg: 6, xl: 5, xxl: 4 }">
      <f-dept-tree @change="handleChange"></f-dept-tree>
    </c-col>
    <c-col :span="{ xs: 24, sm: 24, md: 18, lg: 18, xl: 19, xxl: 20 }"
      ><c-table ref="tableRef" :option="option" :params="params"> </c-table
    ></c-col>
  </c-row>
</template>
<script setup lang="ts">
import { nextTick, ref } from 'vue'
import option from './option'
import FDeptTree from '@/components/f-dept-tree/index.vue'

const tableRef = ref<any>()
const params = ref<any>({})
const handleChange = (e: { deptId?: string; innerOnly: boolean }) => {
  params.value = e
  nextTick(() => {
    tableRef.value.load(true)
  })
}
</script>
