<template>
    <!-- 右侧表格 -->
    <div>
        <el-card style="min-height: calc(100vh - 125px)">
            <!-- 查询 -->
            <el-form
                size="small"
                ref="queryForm"
                :inline="true"
                :model="queryParams"
            >
                <el-form-item prop="dataTypeName">
                    <el-input
                        clearable
                        placeholder="数据类型名称"
                        v-model="queryParams.dataTypeName"
                        @keyup.enter.native="onHandleQuery"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-search"
                        @click="onHandleQuery"
                    >
                        查询
                    </el-button>
                    <el-button
                        size="mini"
                        icon="el-icon-refresh"
                        @click="onResetQuery"
                    >
                        重置
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 表格 -->
            <el-table :data="tableData" border>
                <el-table-column
                    align="center"
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    v-for="column in columns"
                />
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { getListDataSetAPI } from '@/api/data-collect/data-set-manage'
export default {
    name: 'RightTable',
    props: {
        selectedNodeId: {
            type: [Number, String],
            default: 0,
        },
    },
    data() {
        return {
            queryParams: {
                dataTypeName: undefined,
            },
            tableData: [],
            columns: [],
        }
    },
    methods: {
        // 查询
        onHandleQuery() {
            console.log(this.queryParams)
        },

        // 重置
        onResetQuery() {
            this.queryParams = {}
        },

        // 获取数据列表
        async getListDataSetClassFun(node) {
            const res = await getListDataSetAPI({
                dataClassifyId: node
            })
            console.log(res);
            
            // this.tableData = res.rows
            // this.total = res.total

            // 动态添加表格列和数据源

            /* const num = Math.floor(Math.random() * 6) + 1
            const num2 = Math.floor(Math.random() * 6) + 1
            for (let i = 0; i < num; i++) {
                this.columns.push({
                    label: `字段${i + 1}`,
                    prop: `dataTypeName${i}`,
                })
            }

            for (let i = 0; i < num2; i++) {
                const obj = {}
                for (let j = 0; j < num; j++) {
                    obj[this.columns[j].prop] = `字段${j + 1}的值`
                }
                this.tableData.push(obj)
            } */
        },
    },

    // 监听选中的节点ID
    watch: {
        selectedNodeId: {
            handler(newVal) {
                this.columns = []
                this.tableData = []
                this.getListDataSetClassFun(newVal)
            },
            immediate: true, // 表示立即执行
        },
    },
}
</script>
