<template>
    <div class="add-project-container">
        <div class="add-project-content" v-loading="loading">
            <div class="add-project-header">
                <div class="header-left"></div>
                <div class="header-right">
                    <el-button type="default" @click="backClick">返回</el-button>
                    <template v-if="!loading && !isPreview">
                        <el-button type="primary" @click="saveClick">保存</el-button>
                    </template>
                </div>
            </div>
            <div class="tabs-content">
                <div class="project-tab-content">
                    <div class="tab-content">
                        <el-form :model="formData" :label-width="130" :disabled="isPreview">
                            <el-collapse v-model="activeCollapse">
                                <el-collapse-item title="投资额控制" name="投资额控制">
                                    <el-row :gutter="20">
                                        <el-col :span="24">
                                            <el-form-item label="项目信息" required>
                                                <el-select v-model="formData.projectId" placeholder="请选择" no-data-text="暂无数据"
                                                    @change="changeProject"
                                                >
                                                    <el-option v-for="item in projectList" :key="item.id"
                                                        :label="item.projectName" :value="item.id"
                                                    ></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-form-item label="费用分项控制、阶段对比表" :label-width="200"></el-form-item>
                                            <el-table :data="tzekzData" style="width: 100%" empty-text="暂无数据" border>
                                                <el-table-column type="index" label="序号" width="60" />
                                                <el-table-column prop="xm" label="项目">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.xm" />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="zbgs" label="招标估算" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.zbgs" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="jcgs" label="决策估算" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.jcgs" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="pfgusuan" label="批复估算" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.pfgusuan" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="pfgs" label="批复概算" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.pfgs" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="tkjgs" label="同口径概算" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.tkjgs" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="pfys" label="批复预算" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.pfys" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="zbqy" label="招标签约" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.zbqy" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="sqyc" label="上期预测" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.sqyc" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="bqyc" label="本期预测" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.bqyc" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="bqjsq" label="本期-上期" width="180">
                                                    <template #default="scope">
                                                        <el-input-number v-model="scope.row.bqjsq" :min="0" :max="99999999999.99999999"
                                                            controls-position="right"
                                                        />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="cysm" label="本期较上期差异原因说明">
                                                    <template #default="scope">
                                                        <el-input v-model="scope.row.cysm" type="textarea" />
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                                <el-collapse-item title="费用分项控制、阶段对比表" name="费用分项控制、阶段对比表"></el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { reactive, ref, onMounted, getCurrentInstance, h } from "vue";
    import { useRouter, useRoute } from "vue-router";
    import { ElMessage, ElMessageBox } from "element-plus";
    import { useUserStore } from "@/stores/user.js";
    const userStore = useUserStore();
    const router = useRouter();
    const route = useRoute();
    const { proxy } = getCurrentInstance();
    let token = ref("");
    token.value = userStore.authToken || sessionStorage.getItem("authToken") || "";

    const activeCollapse = reactive([
        "投资额控制", "费用分项控制、阶段对比表"
    ]);
    let formData = reactive({});
    let loading = ref(false);
    
</script>

<style lang="less">
    @import "@/styles/manage.less";
    .add-project-header{
        margin-bottom: 10px;
    }
</style>