<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="m-2 mr-0 w-1/4 xl:w-1/5 bg-white tree">
      <BasicTree
        ref="columnsTreeRef"
        title="列字段"
        checkable
        :treeData="props.columnsTree"
        :checkedKeys="props.columnsCheckedKeys"
        :defaultExpandAll="true"
        :fieldNames="{ key: 'key', title: 'label' }"
        @check="handleCheck"
      />
    </div>
    <BasicTable @register="columnsTable" class="m-2 mr-0 w-3/4 xl:w-4/5 overflow-hidden">
      <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="props.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"
              style="width: 100%"
            />
          </div>
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>

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

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

  // 定义props,树目录
  const props = defineProps({
    columnsTree: {
      type: Object,
      default: () => ({}), // 设置默认值为一个空对象
    },
    columnsCheckedKeys: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
  });

  // config
  const config: any = inject('formConfig');
  const columnsData = ref(config.table.columns);
  // 展开全部
  const columnsTreeRef = ref<Nullable<TreeActionType>>(null);

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

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

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

  watch(
    () => config.table.columns,
    () => {
      columnsData.value = config.table.columns;
    },
  );

  function fetch() {
    // 展开全部
    nextTick(() => {
      unref(columnsTreeRef)?.expandAll(true);
      unref(columnsTreeRef)?.setCheckedKeys(props.columnsCheckedKeys);
    });
  }

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

<style lang="less" scoped>
  .tree {
    overflow: auto;
    height: calc(100vh - 120px);
  }
</style>
