<template>
  <Row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10">
    <Col :xl="4" style="margin-bottom: 10px;">
      <ClassifyLeftTree ref="leftTree" @select="onTreeSelect" />
    </Col>
    <Col :xl="20" style="margin-bottom: 10px;">
      <div style="height: 100%" :class="[`${prefixCls}`]">
        <SourceList ref="jTableRef" :data="classify" />
      </div>
    </Col>
  </Row>
</template>

<script lang="ts" setup>
  import { provide, ref } from 'vue';
  import { useDesign } from '@jdlinker/func';
  import ClassifyLeftTree from './components/ClassifyLeftTree.vue';
  import SourceList from './components/SourceList.vue';
  import { Row, Col } from 'ant-design-vue';

  const { prefixCls } = useDesign('address-list');
  provide('prefixCls', prefixCls);

  const leftTree = ref();
  const jTableRef = ref();
  const classify = ref('');

  const onTreeSelect = (data) => {
    console.log('onTreeSelect', data);
    classify.value = data.key === '1' ? undefined : data;
  };
</script>

<style lang="less" scoped>
  @import './index.less';
  .logo {
    width: 200px;
    height: 148px;
    display: inline-block;
  }
  :deep(.ant-pagination-options) {
    display: none;
  }
  :deep(._jtable-body_mjnfl_1 ._jtable-pagination_mjnfl_55) {
    margin-top: 12px;
    margin-bottom: 5px;
  }
  :deep(._jtable-body_mjnfl_1) {
    padding: 16px 24px 5px;
  }
  :deep(.ant-empty) {
    margin: 334px 0px;
  }
  :deep(._jtable-body_mjnfl_1 ._jtable-content_mjnfl_42 ._jtable-card_mjnfl_48 ._jtable-card-items_mjnfl_48) {
    grid-gap: 20px;
  }
</style>
