<template>
  <lrlayout style="background: #f1f2f5" :left="240">
    <template #left>
      <BasicTree
        ref="asyncExpandTreeRef"
        title="列字段"
        checkable
        :treeData="columnsTree"
        :defaultExpandAll="true"
        :fieldNames="{ key: 'key', title: 'label' }"
        @check="handleCheck"
      />
    </template>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <span style="margin-right: 8px">是否分页</span>
        <a-switch class="mars-switch" v-model:checked="config.table.isPage" />
        <span style="margin-left: 20px; margin-right: 8px">排序字段</span>
        <a-select
          :options="columnsTree[0].children"
          v-model:value="config.table.sidx"
          placeholder="请选择"
          style="width: 120px"
        />
        <span style="margin-left: 20px; margin-right: 8px">是否倒序</span>
        <a-switch class="mars-switch" v-model:checked="config.table.isDESC" />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'width'">
          <div>
            <a-input v-model:value="record.width" defaultValue="120" />
          </div>
        </template>
        <template v-if="column.key === 'isMinWidth'">
          <div>
            <a-switch v-model:checked="record.isMinWidth" />
          </div>
        </template>
        <template v-if="column.key === 'align'">
          <div>
            <a-select
              placeholder="请选择"
              size="small"
              v-model:value="record.align"
              :options="alignOptions"
            />
          </div>
        </template>
      </template>
    </BasicTable>
  </lrlayout>
</template>

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

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

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

  // config
  const config = inject('formConfig');
  const columnsData = ref(config.table.columns);

  const alignOptions = [
    { value: 'left', label: '左' },
    { value: 'center', label: '中' },
    { value: 'right', label: '右' },
  ];

  const [registerTable, { reload }] = useTable({
    rowKey: 'key',
    dataSource: columnsData,
    columns: columns(),
    bordered: true,
  });

  const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
  async function fetch() {
    // 展开全部
    nextTick(() => {
      unref(asyncExpandTreeRef)?.expandAll(true);
    });
  }

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

  onMounted(() => {
    fetch();
  });
</script>
