<template>
    <div class="project-manage-container">
        <div class="project-manage-header">
            <div class="header-left"></div>
            <div class="header-right"></div>
        </div>
        <div class="project-manage-content" v-loading="loading">
            <common-table
                :autoHeight="true"
                :maxRows="10"
                :data="tableData"
                :columns="tableColumns"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize"
                :index="true"
                :indexLabel="'序号'"
                title=""
                :border="true"
                @size-change="handleSizeChange"
                @current-page-change="handleCurrentPageChange"
            >
                <template #operations="{ row, index }">
                    <el-button link type="primary" size="small" @click="fillProject(row)">继续填报</el-button>
                    <el-button link type="primary" size="small"
                        :loading="row.loading" @click="fillProject(row)"
                    >发起决策审批</el-button>
                </template>
            </common-table>
        </div>
    </div>
</template>

<script setup>
    import { reactive, ref, onMounted, computed, getCurrentInstance } from "vue";
    import { useRouter } from "vue-router";
    import { ElMessage, ElMessageBox } from "element-plus";
    import CommonTable from "@/components/common/commonTable.vue";
    
    const router = useRouter();
    const { proxy } = getCurrentInstance();

    let tableData = ref([]);
    let tableColumns = ref([
        {
            prop: "projectName",
            label: "项目名称",
            showOverflowTooltip: true
        },
        {
            prop: "projectCode",
            label: "项目编号",
            showOverflowTooltip: true
        },
        {
            prop: "projectLzType",
            label: "状态",
            width: 120,
            align: "center",
            formatter: (data) => {
                return data.projectLzType === 1 ? "待立项" : data.projectLzType === 3 ? "立项审批中" :
                    data.projectLzType === 5 ? "已立项" : data.projectLzType === 7 ? "决策填报中" :
                        data.projectLzType === 8 ? "决策审批中" : data.projectLzType === 9 ? "已决策" : "待立项"
            }
        },
        {
            prop: "operations",
            label: "操作",
            width: 200,
            slot: "operations",
            fixed: "right",
            align: "center"
        }
    ]);
    let loading = ref(false);
    let total = ref(0);
    let currentPage = ref(1);
    let pageSize = ref(10);
    // 获取列表数据
    const getProjectData = () => {
        loading.value = true;
        proxy.$post({
            url: "/api/project/listProject",
            data: {
                page: currentPage.value,
                pagesize: pageSize.value,
                attributes: [],
                menuType: "xmlz"
            },
            callback: (data) => {
                tableData.value = data.rows;
                total.value = data.count;
                loading.value = false;
            }
        })
    };
    // 分页
    const handleSizeChange = (size) => {
        pageSize.value = size;
        currentPage.value = 1;
        getProjectData();
    }
    const handleCurrentPageChange = (page) => {
        currentPage.value = page;
        getProjectData();
    }
    const fillProject = (item) => {
        router.push({
            name: "addProject",
            params: {
                type: "xmlz"
            },
            query: {
                projectId: item.id
            }
        });
    };
    const approvalProject = (item) => {
        item.loading = true;
        proxy.$post({
            url: "/api/project/startJuece",
            data: {
                id: item.id
            },
            callback: (data) => {
                item.loading = false;
                getProjectData();
            }
        })
    };
    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;
        }
        &-header{
            display: flex;
            justify-content: space-between;
        }
        &-content{
            flex: 1;
            height: 0;
            display: flex;
            flex-direction: column;
        }
    }
</style>
