<template>
    <div class="project-manage-container">
        <div class="project-manage-header">
            <div class="header-left"></div>
            <div class="header-right">
                <el-button type="primary" @click="addProject">新增</el-button>
            </div>
        </div>
        <div class="project-manage-content">
            <div class="table-wrap">
                <el-table :data="tableData" style="width: 100%"
                    empty-text="暂无数据" height="100%"
                >
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="projectName" label="项目名称" />
                    <el-table-column prop="projectCode" label="项目编号" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small">查看</el-button>
                            <el-button link type="primary" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-wrap">
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, ref, onMounted, getCurrentInstance } from "vue";
    import { useRouter } from "vue-router";
    const router = useRouter();
    const { proxy } = getCurrentInstance();

    const tableData = ref([]);
    const getProjectData = () => {
        proxy.$post({
            url: "/api/project/listProject",
            data: {
                page: 1,
                pagesize: 10,
                attributes: []
            },
            callback: (data) => {
                tableData.value = data.rows;
            }
        })
    };
    const addProject = () => {
        router.push("/addProject");
    };
    onMounted(() => {
        getProjectData();
    })
</script>

<style scoped lang="less">
    .project-manage{
        &-container{
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .tab-content{
                padding: 10px 15px;
            }
        }
        &-header{
            display: flex;
            justify-content: space-between;
        }
        &-content{
            flex: 1;
            height: 0;
            display: flex;
            flex-direction: column;
            .table-wrap{
                margin: 15px 0;
                flex: 1;
                height: 0;
            }
            .page-wrap{
                display: flex;
                justify-content: flex-end;
            }
        }
    }
</style>
