<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="30">
                    <a-col :md="20">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                        </span>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="6" :sm="8">
                        <a-form-item label="数据类型">
                            <a-select placeholder="选择同步状态" option-filter-prop="children" size="large"
                                v-model="queryParam.syncState">
                                <a-select-option key="">
                                    全部
                                </a-select-option>
                                <a-select-option key="0">
                                    未同步
                                </a-select-option>
                                <a-select-option key="1">
                                    进行中
                                </a-select-option>
                                <a-select-option key="2">
                                    已结束
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <a-form-item label="关键词">
                            <a-input placeholder="请输入搜索关键词" v-model="queryParam.databaseName"></a-input>
                        </a-form-item>
                    </a-col>
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                        <a-col :md="6" :sm="24">
                            <a-button type="primary" style="left: 10px" icon="search">查询</a-button>
                        </a-col>
                    </span>

                </a-row>
            </a-form>
        </div>

        <a-row :gutter="30" style="padding: 0 10px;">
            <a-col :md="6">
                <div class="linese"></div>
                <!-- 分类区域 -->
                <div style="height:calc(100vh - 300px);background: #e6e9f1;padding:10px;">

                </div>
                <div class="linese"></div>
            </a-col>
            <a-col :md="18">
                <div class="linese"></div>
                <!-- 表格区域 -->
                <div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
                    <a-table ref="table" size="middle" style="height:calc(100vh - 344px);" bordered rowKey="id"
                        :columns="columns" :dataSource="dataSource" :loading="loading">

                        <!-- 字符串超长截取省略号显示-->
                        <!-- <span slot="name" slot-scope="text">
                            <j-ellipsis :value="text" :length="20" />
                        </span>
                        <span slot="describe" slot-scope="text">
                            <j-ellipsis :value="text" :length="20" />
                        </span> -->
                    </a-table>
                </div>
                <div class="linese"></div>
            </a-col>
        </a-row>
    </a-card>
</template>
<script>
export default {
    name: "metadata",
    components: {
    },
    data() {
        return {
            loading: false,
            // 查询条件
            queryParam: {
                databaseName: null,
                syncState: null,
                pageNum: 1,
                pageSize: 9999999,
            },
            dataSource: [],
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'id',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '字段名称',
                    width: 200,
                    align: "center",
                    dataIndex: 'name',
                },
                {
                    title: '索引类型',
                    width: 130,
                    align: "center",
                    dataIndex: 'name',
                },
                {
                    title: '数据长度',
                    width: 100,
                    align: "center",
                    dataIndex: 'name',
                },
                {
                    title: '数据精度',
                    width: 100,
                    align: "center",
                    dataIndex: 'name',
                },
                {
                    title: '描述',
                    align: "center",
                    dataIndex: 'issuingTime',
                }
            ]
        }
    },
    mounted() {

    },
    computed: {

    },
    created() {

    },
    methods: {

    }
}
</script>