<template>
    <div class="add-project-container">
        <div class="add-project-header">
            <div class="header-left"></div>
            <div class="header-right">
                <el-button type="default" @click="backClick">返回</el-button>
                <el-button type="primary" @click="saveClick">保存</el-button>
            </div>
        </div>
        <div class="add-project-content">
            <el-tabs v-model="tabActiveName">
                <el-tab-pane label="项目基本信息" name="项目基本信息">
                    <div class="tab-content">
                        <el-form :model="formData" :label-width="190">
                            <el-collapse v-model="activeCollapse">
                                <el-collapse-item title="项目基本信息" name="项目基本信息">
                                    <el-row :gutter="20">
                                        <el-col :span="12">
                                            <el-form-item label="项目名称">
                                                <el-input v-model="formData.projectName" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="项目编号">
                                                <el-input v-model="formData.projectCode" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="是否再决策">
                                                <el-radio-group v-model="formData.sfzjc">
                                                    <el-radio value="1">是</el-radio>
                                                    <el-radio value="2">否</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="项目外文名称">
                                                <el-input v-model="formData.projectForeignName" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="是否能建联合体项目">
                                                <el-radio-group v-model="formData.sfnjlhtxm">
                                                    <el-radio value="1">是</el-radio>
                                                    <el-radio value="2">否</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="申报单位">
                                                <el-input v-model="formData.applicationUnit" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="主业/非主业">
                                                <el-radio-group v-model="formData.zyfzy">
                                                    <el-radio value="1">是</el-radio>
                                                    <el-radio value="2">否</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="直属企业">
                                                <el-input v-model="formData.zsqy" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="是否能建重大或重要投资">
                                                <el-radio-group v-model="formData.sfnjzdhzytz">
                                                    <el-radio value="1">是</el-radio>
                                                    <el-radio value="2">否</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="是否自主决策">
                                                <el-radio-group v-model="formData.sfzzjc">
                                                    <el-radio value="1">是</el-radio>
                                                    <el-radio value="2">否</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="财务报表类型">
                                                <el-select  v-model="formData.financialStatementType" placeholder="请选择">
                                                    <el-option label="1" value="1"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="政府审批（核准、备案）级别">
                                                <el-select  v-model="formData.zfsphzbajb" placeholder="请选择">
                                                    <el-option label="1" value="1"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="是否履行标前预审程序">
                                                <el-radio-group v-model="formData.sflxbqyscx">
                                                    <el-radio value="1">是</el-radio>
                                                    <el-radio value="2">否</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                                <el-collapse-item title="项目所在地" name="项目所在地">
                                    <el-row :gutter="20">
                                        <el-col :span="6">
                                            <el-form-item label="境内/外">
                                                <el-select v-model="formData.domesticOrOverseas" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="省（境内）/洲际（境外）">
                                                <el-select v-model="formData.sjnzjjw" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="地市（境内）/国家（境外）">
                                                <el-select v-model="formData.cityOrCountry" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="区县(境内)/国家(境外)">
                                                <el-select v-model="formData.qxjngjjw" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="项目区域">
                                                <el-select v-model="formData.xmqy" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="是否一带一路沿线国家">
                                                <el-select v-model="formData.sfydylyxgj" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                                <el-collapse-item title="计量币种" name="计量币种">
                                    <el-row :gutter="20">
                                        <el-col :span="6">
                                            <el-form-item label="币种">
                                                <el-select v-model="formData.bizhong" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="汇率">
                                                <el-input v-model="formData.huilv" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                                <el-collapse-item title="实施时间" name="实施时间">
                                    <el-row :gutter="20">
                                        <el-col :span="6">
                                            <el-form-item label="项目建设期">
                                                <el-input
                                                    v-model="formData.xmjsqy"
                                                    placeholder="请输入"
                                                    type="number"
                                                >
                                                    <template #append>月</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="运营年限">
                                                <el-input
                                                    v-model="formData.yynxn"
                                                    placeholder="请输入"
                                                    type="number"
                                                >
                                                    <template #append>年</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="项目合作期">
                                                <el-input
                                                    v-model="formData.xmhzqn"
                                                    placeholder="请输入"
                                                    type="number"
                                                >
                                                    <template #append>月</template>
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6"></el-col>
                                        <el-col :span="6">
                                            <el-form-item label="项目开工时间（预计）">
                                                <el-date-picker
                                                    v-model="formData.xmkgsjyj"
                                                    type="date"
                                                    placeholder="请选择"
                                                />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="项目交工时间（预计）">
                                                <el-date-picker
                                                    v-model="formData.xmjgsjyj"
                                                    type="date"
                                                    placeholder="请选择"
                                                />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="决策及批复信息" name="决策及批复信息">
                    <div class="tab-content">
                        <el-form :model="formData" :label-width="190">
                            <el-collapse v-model="activeCollapse">
                                <el-collapse-item title="投资分类" name="投资分类">
                                    <el-row :gutter="20">
                                        <el-col :span="6">
                                            <div class="col-title">投资属性分类</div>
                                            <el-form-item label="一级分类">
                                                <el-select v-model="formData.tzsxyjfl" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="二级分类">
                                                <el-select v-model="formData.tzsxejfl" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="投资板块">
                                                <el-select v-model="formData.tzbk" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="细分板块">
                                                <el-select v-model="formData.subsector" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <div class="col-title">投资目的分类</div>
                                            <el-form-item label="一级分类">
                                                <el-select v-model="formData.tzmdyjfl" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="二级分类">
                                                <el-select v-model="formData.tzmdejfl" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="四新分类">
                                                <el-select v-model="formData.sxfl" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-row :gutter="20">
                                                <el-col :span="12">
                                                    <div class="col-title">投资指南分类</div>
                                                    <el-form-item label="一级分类">
                                                        <el-select v-model="formData.tzznyjfl" placeholder="请选择">
                                                            <el-option label="1" value="1" />
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="二级分类">
                                                        <el-select v-model="formData.tzznejfl" placeholder="请选择">
                                                            <el-option label="1" value="1" />
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="投资指南分类概述">
                                                        <el-input v-model="formData.tzznflgs" type="textarea" />
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="国民经济行业">
                                                        <el-select v-model="formData.gmjjhy" placeholder="请选择">
                                                            <el-option label="1" value="1" />
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                                <el-collapse-item title="特别关注、特别监管类等信息" name="特别关注、特别监管类等信息">
                                    <el-row :gutter="20">
                                        <el-col :span="6">
                                            <el-form-item label="是否需报国家发展改革委和商务部核准">
                                                <el-select v-model="formData.sfxbgjfzggwhswbhz" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="是否国家领导见签">
                                                <el-select v-model="formData.sfgjldjq" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="6">
                                            <el-form-item label="是否境内特别监管类">
                                                <el-select v-model="formData.sfjntbjgl" placeholder="请选择">
                                                    <el-option label="1" value="1" />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-collapse-item>
                            </el-collapse>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="项目公司落实批复信息" name="项目公司落实批复信息">
                    <div class="tab-content">
                        <el-collapse v-model="activeCollapse">
                            <el-collapse-item title="建设规模（实物量指标）" name="建设规模（实物量指标）">
                                <div class="tab-handle">
                                    <el-button type="primary" size="small" @click="addSwlzb">新增</el-button>
                                </div>
                                <el-table :data="swlzbData" style="width: 100%" empty-text="暂无数据">
                                    <el-table-column type="index" width="50" />
                                    <el-table-column prop="name" label="指标名称">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.name" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="count" label="数量">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.count" type="number" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="unit" label="单位">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.unit" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="mark" label="补充说明">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.mark" type="textarea" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="90">
                                        <template #default="scope">
                                            <el-button link type="danger" size="small" @click="deleteSwlzb(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                            <el-collapse-item title="股东信息" name="股东信息">
                                <div class="tab-handle">
                                    <el-button type="primary" size="small" @click="addGdxx">新增</el-button>
                                </div>
                                <el-table :data="gdxxData" style="width: 100%" empty-text="暂无数据">
                                    <el-table-column type="index" width="50" />
                                    <el-table-column prop="type" label="股东类型">
                                        <template #default="scope">
                                            <el-select  v-model="scope.row.type" placeholder="请选择">
                                                <el-option label="1" value="1"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="name" label="股东名称">
                                        <template #default="scope">
                                            <el-select  v-model="scope.row.name" placeholder="请选择">
                                                <el-option label="1" value="1"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="percent" label="持股比例（%）">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.percent" type="number" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="cze" label="出资额（万元）">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.cze" type="number" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="yjzczb" label="应缴注册资本（万元）">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.yjzczb" type="number" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="ycxmzbj" label="应出项目资本金（万元）">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.ycxmzbj" type="number" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="hzfqk" label="合作方情况">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.hzfqk" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="mark" label="备注">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.mark" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="90">
                                        <template #default="scope">
                                            <el-button link type="danger" size="small" @click="deleteGdxx(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                            <el-collapse-item title="项目必要性及可行性" name="项目必要性及可行性">
                                <el-form :model="formData" :label-width="150">
                                    <el-form-item label="建设内容及规模">
                                        <el-input v-model="formData.jsnrjgm" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="项目必要性">
                                        <el-input v-model="formData.xmbyx" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="项目可行性">
                                        <el-input v-model="formData.xmkxx" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="其他说明">
                                        <el-input v-model="formData.qtsm" type="textarea" />
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="项目合法合规性附件" name="项目合法合规性附件">
                    <div class="tab-content">
                        <el-collapse v-model="activeCollapse">
                            <el-collapse-item title="立项资料" name="立项资料">
                                <el-form :model="formData" :label-width="150">
                                    <el-form-item label="相关支撑材料">
                                        <el-upload
                                            v-model:file-list="zcclFileList"
                                            class="upload-demo"
                                            action=""
                                            :show-file-list="false"
                                        >
                                            <el-button type="default">上传</el-button>
                                        </el-upload>
                                        <el-button type="default">删除选中文件</el-button>
                                    </el-form-item>
                                </el-form>
                                <el-table :data="zcclData" style="width: 100%" empty-text="暂无数据">
                                    <el-table-column type="selection" width="55" />
                                    <el-table-column prop="fileName" label="文件名" />
                                    <el-table-column prop="fileTime" label="上传时间" />
                                    <el-table-column prop="fileSize" label="大小" />
                                    <el-table-column fixed="right" label="操作" width="90">
                                        <template #default="scope">
                                            <el-button link type="danger" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="全生命周期策划文件" name="全生命周期策划文件">全生命周期策划文件</el-tab-pane>
                <el-tab-pane label="项目绩效评价" name="项目绩效评价">项目绩效评价</el-tab-pane>
                <el-tab-pane label="目标责任书考核" name="目标责任书考核">目标责任书考核</el-tab-pane>
                <el-tab-pane label="后评价" name="后评价">后评价</el-tab-pane>
                <el-tab-pane label="重大事项上报" name="重大事项上报">重大事项上报</el-tab-pane>
                <el-tab-pane label="投资分析" name="投资分析">投资分析</el-tab-pane>
                <el-tab-pane label="投资检查" name="投资检查">投资检查</el-tab-pane>
                <el-tab-pane label="投资回收" name="投资回收">投资回收</el-tab-pane>
                <el-tab-pane label="管理费上缴" name="管理费上缴">管理费上缴</el-tab-pane>
                <el-tab-pane label="PPP整改方案" name="PPP整改方案">PPP整改方案</el-tab-pane>
                <el-tab-pane label="项目结束/暂停(备案资料)" name="项目结束/暂停(备案资料)">项目结束/暂停(备案资料)</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
    import { reactive, ref, onMounted, getCurrentInstance } from "vue";
    import { useRouter } from "vue-router";
    const router = useRouter();
    const { proxy } = getCurrentInstance();

    // tab相关
    const tabActiveName = ref("项目基本信息");
    const activeCollapse = reactive([
        "项目基本信息","项目所在地", "计量币种", "实施时间", "投资分类", "特别关注、特别监管类等信息",
        "建设规模（实物量指标）", "股东信息", "项目必要性及可行性", "立项资料"
    ]);
    // 获取资源库数据
    const getResourceData = () => {
        proxy.$post({
            url: "/api/resource/listResourceAll",
            data: {
                page: 1,
                pagesize: 1000
            },
            callback: (data) => {}
        });
    };
    onMounted(() => {
        getResourceData();
    })
    const formData = reactive({});
    // 建设规模（实物量指标）
    const swlzbData = reactive([]);
    const addSwlzb = () => {
        swlzbData.push({});
    };
    const deleteSwlzb = (index) => {
        swlzbData.splice(index, 1);
    };
    // 股东信息
    const gdxxData = reactive([]);
    const addGdxx = () => {
        gdxxData.push({});
    };
    const deleteGdxx = (index) => {
        gdxxData.splice(index, 1);
    };

    // 支撑材料
    const zcclFileList = reactive([]);
    const zcclData = reactive([]);
    
    // 返回列表页
    const backClick = () => {
        router.push("/projectManage");
    }
    // 保存数据
    const saveClick = () => {
        proxy.$post({
            url: "/api/project/createProject",
            data: formData,
            callback: (data) => {
                router.push("/projectManage");
            }
        })
    };
</script>

<style lang="less">
    .add-project{
        &-container{
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .el-collapse-item__header{
                color: var(--el-color-primary);
            }
        }
        &-header{
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
        }
        &-content{
            flex: 1;
            height: 0;
            .el-tabs{
                height: 100%;
            }
            .el-tab-pane{
                height: 100%;
                .tab-content{
                    height: 100%;
                    overflow: auto;
                    padding: 0 10px;
                    .col-title{
                        font-weight: bold;
                        text-align: center;
                    }
                    .tab-handle{
                        display: flex;
                        justify-content: flex-end;
                    }
                }
            }
        }
    }
</style>