<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="showFieldsModal">表头筛选</el-button>
                <el-button type="primary" @click="addProject">新增</el-button>
            </div>
        </div>
        <div class="project-manage-content" v-loading="loading">
            <common-table
                :autoHeight="true"
                :maxRows="10"
                :rowHeight="40"
                :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="previewProject(row)">查看</el-button>
                    <el-button link type="primary" size="small" @click="editProject(row)">编辑</el-button>
                    <el-button link type="danger" size="small" @click="deleteProject(row)">删除</el-button>
                </template>
            </common-table>
            <!-- <div class="table-wrap">
                <el-table :data="tableData" style="width: 100%"
                    empty-text="暂无数据" height="100%" border
                >
                    <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" @click="previewProject(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" @click="editProject(scope.row)">编辑</el-button>
                            <el-button link type="danger" size="small" @click="deleteProject(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-wrap">
                <el-pagination background layout="prev, pager, next" :total="1000" />
            </div> -->
        </div>
        <el-dialog v-model="filedsModalShow"
            modal-class="fields-modal"
            title="筛选查询" width="50%" top="10vh"
        >
            <common-table
                :data="tableFields"
                :columns="fieldsTableColumns"
                :selection="true"
                :border="true"
                :pagination="false"
                :autoHeight="true"
                :rowHeight="40"
                @selection-change="handleFieldsSelectChange"
            ></common-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelFieldsModal">取消</el-button>
                    <el-button type="primary" @click="confirmFieldsModal">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

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

    
    // 计算表格高度
    let tableData = ref([]);
    let tableColumns = ref([
        {
            prop: "projectName",
            label: "项目名称",
            showOverflowTooltip: true
        },
        {
            prop: "projectCode",
            label: "项目编号",
            showOverflowTooltip: true
        },
        {
            prop: "operations",
            label: "操作",
            width: 160,
            slot: "operations",
            fixed: "right",
            align: "center"
        }
    ]);
    // 获取可显示表头项
    let filedsModalShow = ref(false);
    let tableFields = reactive([]);
    const fieldsTableColumns = reactive([
        {
            prop: "comment",
            label: "名称"
        }
    ]);
    const getTableFields = () => {
        proxy.$post({
            url: "/api/project/getProjectFields",
            data: {},
            callback: (data) => {
                tableFields = (data[0] && data[0].attributes) || [];
            }
        })
    };
    const showFieldsModal = () => {
        filedsModalShow.value = true;
    }
    let selectFields = ref([]);
    const handleFieldsSelectChange = (datas) => {
        selectFields.value = datas;
    };
    const cancelFieldsModal = () => {
        selectFields.value = [];
        filedsModalShow.value = false;
    }
    const confirmFieldsModal = () => {
        tableColumns.value = selectFields.value.map(item => {
            return {
                prop: item.fieldName,
                label: item.comment,
                showOverflowTooltip: true
            };
        }).concat({
            prop: "operations",
            label: "操作",
            width: 160,
            slot: "operations",
            fixed: "right",
            align: "center",
        });
        filedsModalShow.value = false;
    };


    const tableHeight = computed(() => {
        const headerHeight = 50;
        const rowHeight = 45;        
        // 1.如果数据超过10条，固定显示10行的高度 + 滚动条；2.如果数据不超过10条，按实际行数计算高度
        const maxRows = Math.min(tableData.value.length, 10);
        const contentHeight = maxRows * rowHeight;
        return `${headerHeight + contentHeight}px`;
    });
    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/getOwnProjects",
            data: {
                page: currentPage.value,
                pagesize: pageSize.value,
                attributes: []
            },
            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 addProject = () => {
        router.push("/addProject");
    };
    const editProject = (item) => {
        router.push({
            name: "addProject",
            query: {
                projectId: item.id
            }
        });
    };
    const previewProject = (item) => {
        router.push({
            name: "addProject",
            query: {
                isPreview: true,
                projectId: item.id
            }
        })
    }
    const deleteProject = (item) => {
        ElMessageBox.confirm("确认删除该项？", "提示",{
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            proxy.$post({
                url: "/api/project/deleteProject",
                data: {
                    id: item.id
                },
                callback: (data) => {
                    ElMessage.success("删除成功");
                    getProjectData();
                }
            })
        }).catch(() => {})
    }
    onMounted(() => {
        getTableFields();
        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>
