<template>
    <div class="manage-container">
        <div class="manage-wrap">
            <div class="manage-header">
                <div class="header-left"></div>
                <div class="header-right">
                    <el-button type="primary" @click="addStatement">新增</el-button>
                </div>
            </div>
            <div class="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="previewStatement(row)">查看</el-button>
                        <el-button link type="primary" size="small" @click="editStatement(row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="deleteStatement(row)">删除</el-button>
                    </template>
                </common-table>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted, 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: "tzzt",
            label: "投资主体",
            showOverflowTooltip: true
        },
        {
            prop: "xmdd",
            label: "项目地点",
            showOverflowTooltip: true
        },
        {
            prop: "xmkgrq",
            label: "项目开工日期",
            showOverflowTooltip: true,
            width: 170
        },
        {
            prop: "xmssqx",
            label: "项目实施期限(年)",
            showOverflowTooltip: true,
            width: 120
        },
        {
            prop: "operations",
            label: "操作",
            width: 170,
            slot: "operations",
            fixed: "right",
            align: "center"
        }
    ]);
    let loading = ref(false);
    let total = ref(0);
    let currentPage = ref(1);
    let pageSize = ref(10);
    // 获取列表数据
    const getStatementData = () => {
        loading.value = true;
        proxy.$post({
            url: "/api/project/getTzmbzrsList",
            data: {
                page: currentPage.value,
                pagesize: pageSize.value
            },
            callback: (data) => {
                tableData.value = data.rows;
                total.value = data.count;
                loading.value = false;
            }
        })
    };
    // 分页
    const handleSizeChange = (size) => {
        pageSize.value = size;
        currentPage.value = 1;
        getStatementData();
    }
    const handleCurrentPageChange = (page) => {
        currentPage.value = page;
        getStatementData();
    }
    const addStatement = () => {
        router.push("/addStatement");
    };
    const editStatement = (item) => {
        router.push({
            name: "addStatement",
            query: {
                statementId: item.id
            }
        });
    };
    const previewStatement = (item) => {
        router.push({
            name: "addStatement",
            query: {
                isPreview: true,
                statementId: item.id
            }
        })
    }
    const deleteStatement = (item) => {
        ElMessageBox.confirm("确认删除该项？", "提示",{
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            proxy.$post({
                url: "/api/project/deleteTzmbzrs",
                data: {
                    id: item.id
                },
                callback: (data) => {
                    ElMessage.success("删除成功");
                    getStatementData();
                }
            })
        }).catch(() => {})
    }
    onMounted(() => {
        getStatementData();
    })
</script>

<style scoped lang="less">
    @import "@/styles/manage.less";
</style>