<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="addItem">新增</el-button>
                    <el-button type="primary" @click="exportData">导出</el-button>
                </div>
            </div>
            <div class="manage-content">
                <el-table :data="tableData" style="width: 100%; height: 100%;" empty-text="暂无数据" border>
                    <el-table-column type="index" width="50" />
                    <el-table-column v-for="column in tableColumns" :key="column.prop"
                        :prop="column.prop" :label="column.label"
                    >
                        <template #default="scope">
                            <el-input v-model="scope.row[column.prop]" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60">
                        <template #default="scope">
                            <el-button link type="danger" size="small" @click="deleteItem(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { reactive, ref } from "vue";
    import { exportTableFile } from "../../common/tableFileHandle";
    const tableColumns = reactive([
        {
            prop: "projectName",
            label: "项目名称"
        },
        {
            prop: "tzglzt",
            label: "投资管理主体"
        },
        {
            prop: "jcdw",
            label: "决策单位"
        },
        {
            prop: "xdpfsj",
            label: "下达批复时间"
        },
        {
            prop: "zyx",
            label: "重要性"
        },
        {
            prop: "ssjd",
            label: "实施阶段"
        },
        {
            prop: "pfnr",
            label: "批复内容"
        },
        {
            prop: "pfyjsm",
            label: "批复意见落实情况具体说明"
        },
        {
            prop: "lszxqk",
            label: "落实（执行）情况"
        },
        {
            prop: "zcclxh",
            label: "支撑材料序号"
        },
        {
            prop: "wlsyy",
            label: "未落实原因"
        },
        {
            prop: "xybgzcs",
            label: "下一步工作措施"
        },
        {
            prop: "yjwcsj",
            label: "预计完成时间"
        },
        {
            prop: "zrld",
            label: "责任领导"
        },
        {
            prop: "zrbnmjzrr",
            label: "责任部门及责任人"
        },
        {
            prop: "sfgx",
            label: "是否更新"
        },
        {
            prop: "bz",
            label: "备注"
        }
    ]);
    let tableData = ref([]);
    const addItem = () => {
        tableData.value.push({});
    }
    const deleteItem = (index) => {
        ElMessageBox.confirm("确认删除该项？", "提示",{
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            tableData.value.splice(index, 1);
        }).catch(() => {});
    };
    const exportData = () => {
        exportTableFile(tableData.value, tableColumns, "投资项目批复意见落实情况统计表", "导出文件")
    };
</script>

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