<template>
  <lrlayout style="background: #f1f2f5" :left="240">
    <template #left>
      <BasicTree
        title="查询字段"
        checkable
        :treeData="queryTree"
        :defaultExpandAll="true"
        :selectedKeys="selectedKeys"
        :fieldNames="{ key: 'key', title: 'label' }"
        @check="handleCheck"
      />
    </template>
    <a-layout style="background: #f1f2f5">
      <a-layout-sider :style="{ width: '1000px' }">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <div class="l-panel--item" size="mini">
              <a-radio-group
                v-model:value="radioData"
                size="mini"
                @change="radioChange"
                button-style="solid"
              >
                <a-radio-button value="1">风格一</a-radio-button>
                <a-radio-button value="2">风格二</a-radio-button>
              </a-radio-group>
            </div>
          </template>
        </BasicTable>
      </a-layout-sider>
      <a-layout-content>
        <div class="l-rblock">
          <img
            style="width: 100%"
            :src="`/public/mars/img/onlineform/query${config.queryType}.jpg`"
          />
        </div>
      </a-layout-content>
    </a-layout>
  </lrlayout>
</template>

<script lang="ts" setup>
  import { ref, inject, defineProps } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import lrlayout from '@/components/lrLayout';
  import { BasicTree } from '@/components/Tree';

  import { querys } from './config.data';

  // 定义props,树目录
  const props = defineProps({
    queryTree: {
      type: Object,
      default: () => ({}), // 设置默认值为一个空对象
    },
  });
  const queryTree = props.queryTree;

  // config
  const config = inject('formConfig');
  const querysData = ref(config.table.querys);
  const radioData = ref(config.queryType);

  const [registerTable, { reload }] = useTable({
    canResize: 'true',
    showIndexColumn: 'false',
    rowKey: 'key',
    dataSource: querysData,
    columns: querys(),
    bordered: true,
  });

  // 树的选择变动
  function handleCheck(keys) {
    querysData.value = queryTree[0].children.filter((item) => {
      return keys.includes(item.key);
    });
    config.table.querys = querysData.value;
    reload();
  }

  // 单选框的变动
  function radioChange(event) {
    radioData.value = event.target.value;
    config.queryType = radioData.value;
  }
</script>
