<script setup lang="ts">
import {computed, ref} from 'vue'
import type {TableProps} from "tdesign-vue-next";

const emit = defineEmits(['pageChange','onRowClick']);

const data = defineModel('data');
const columns = defineModel('columns');
const configurableColumns = defineModel('configurableColumns');
const indexColumns = defineModel('indexColumns');
const secondaryColumns = defineModel('secondaryColumns');
const dataColumns = defineModel('dataColumns');
const loading = defineModel('loading')
const defaultDisplayColumns = defineModel('defaultDisplayColumns')
const pagination = defineModel('pagination')
const selectedRowKeys = defineModel('selectedRowKeys');
const customText = ref("配置列");
//@ts-ignore
const columnControllerConfig = computed<TableProps['columnController']>(() => ({
    // 列配置按钮位置
    placement: "top-right",
    // // 用于设置允许用户对哪些列进行显示或隐藏的控制，默认为全部字段
    fields: configurableColumns.value,
    // 弹框组件属性透传
    dialogProps: {
        preventScrollThrough: true,
    },
    // 列配置按钮组件属性透传
    buttonProps: customText.value
        ? {
            content: '显示列控制',
            theme: 'primary',
            variant: 'base',
        }
        : undefined,
    // 数据字段分组显示
    groupColumns: columns.value
        ? [
            {
                label: '指标维度',
                value: 'index',
                columns: indexColumns.value,
            },
            {
                label: '次要维度',
                value: 'secondary',
                columns: secondaryColumns.value,
            },
            {
                label: '数据维度',
                value: 'data',
                columns: dataColumns.value,
            },
        ]
        : undefined,
}));

function rehandleChange() {
    console.log("change");
}

async function onPageChange(pageInfo:{current:number, pageSize:number}) {
    console.log("Page change");
    console.log(pageInfo);
    emit('pageChange', pageInfo);
}
function onRowClick(x:any){
    emit('onRowClick',x);
}
function onSelectChange() {
    console.log("Select change");
}
</script>

<template>
    <t-table row-key="index" :default-display-columns="defaultDisplayColumns" :data="data" :columns="columns"
             :selected-row-keys="selectedRowKeys"
             :column-controller="columnControllerConfig" :pagination="pagination"
             :table-layout="'auto'" :bordered="true" :stripe=true lazy-load="" :loading="loading"
             @change="rehandleChange"
             @page-change="onPageChange"
             @select-change="onSelectChange"
             @row-click="onRowClick"
    >
    </t-table>
</template>
