<script setup lang="tsx">
  import { ElContainer,ElTreeSelect,ElTree } from 'element-plus';
  import { ref, reactive, toRefs, watch, onMounted, nextTick } from 'vue';

  let databaseList = reactive([]);//数据库信息
  let database = ref("");//当前选择的数据库名称
  let datatable = reactive([]);//当前选择的数据库表
  let datatableList = reactive([]);
  const datatableProps = {
    children: 'children',
    label: 'label',
  }

  // 过滤表格数据
  const filterDataTableList = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

</script>

<template>
  <!-- 左侧选择数据库表 -->
  <!-- 右侧显示筛选信息什么的信息 -->
  <div class="common-layout">
    <ElContainer>
      <ElAside width="250px" height="100%">
        <ElTabs type="border-card">
          <ElTabPane label="数据表" name="dataTable">
            <ElTreeSelect
              v-model="database"
              :data="databaseList"
              placeholder="请选择数据库"
              filterable
              style="width: 230px"
            />
            <ElTree
              ref="treeRef"
              style="max-width: 230px"
              class="filter-tree"
              :data="datatableList"
              :props="datatableProps"
              default-expand-all
              :filter-node-method="filterDataTableList"
            />
          </ElTabPane>
          <ElTabPane label="指标加工规则" name="IndexProcessRule" />
        </ElTabs>
      </ElAside>
      <ElMain>
        <ElTabs tab-position="right">
          <ElTabPane label="查询结构图" name="struTreePane" />
          <ElTabPane label="过滤条件" name="filterPane" />
        </ElTabs>
        <ElDivider>关联关系</ElDivider>
        
      </ElMain>
    </ElContainer>
  </div>
</template>
<style scoped>
  .vue3-cron-plus-container>>>.language{
    top:40px !important;
  }
</style>