<template>
    <div class="root">
        <div class="form-box">
            <el-form ref="formRef" :model="form" label-position="right" label-width="150px" style="padding-right: 50px"
                :rules="rules">
                <el-row>
                    <h4 style="margin:0 0 20px 50px;">基本信息</h4>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="区县名称" prop="区县名称">
                            <el-input :disabled="!isAddMode" v-model="form.districtName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路线编码" prop="路线编码">
                            <el-input :disabled="!isAddMode" v-model="form.routeNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="实施里程" prop="实施里程">
                            <el-input-number :disabled="!isAddMode" v-model="form.implementMileage" :controls="false">
                                <template #suffix>
                                    <span>公里</span>
                                </template>
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="塌方及损失" prop="塌方及损失">
                            <el-input-number :disabled="!isAddMode" v-model="form.earthworkLoss" :controls="false">
                                <template #suffix>
                                    <span>方/万元</span>
                                </template>
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="起点桩号" prop="起点桩号">
                            <el-input :disabled="!isAddMode" v-model="form.startStakeNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="止点桩号" prop="止点桩号">
                            <el-input :disabled="!isAddMode" v-model="form.endStakeNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="路况位置" prop="路况位置">
                            <el-input :disabled="!isAddMode" v-model="form.roadLocation"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="阻断点小地名" prop="阻断点小地名">
                            <el-input :disabled="!isAddMode" v-model="form.blockedPointName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="灾害类型" prop="灾害类型">
                            <el-input :disabled="!isAddMode" v-model="form.disasterType"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预估费用" prop="预估费用">
                            <el-input-number :disabled="!isAddMode" v-model="form.estimatedCost" :controls="false">
                                <template #suffix>
                                    <span>万元</span>
                                </template>
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="技术等级" prop="技术等级">
                            <el-select :disabled="!isAddMode" v-model="form.technicalGrade">
                                <el-option
                                    v-for="item in [{ value: '三级', label: '三级' }, { value: '二级', label: '二级' }, { value: '一级', label: '一级' }]"
                                    :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资金来源" prop="资金来源">
                            <el-input :disabled="!isAddMode" v-model="form.fundingSource"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="处置灾毁处数" prop="处置灾毁处数">
                            <el-input-number :disabled="!isAddMode" v-model="form.disposalCount"
                                :controls="false"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="已完工处数" prop="已完工处数">
                            <el-input-number :disabled="!isAddMode" v-model="form.completedCount"
                                :controls="false"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="总投资" prop="总投资">
                            <el-input-number :disabled="!isAddMode" v-model="form.totalInvestment" :controls="false">
                                <template #suffix>
                                    <span>万元</span>
                                </template>
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目费用类型" prop="项目费用类型">
                            <el-radio-group :disabled="!isAddMode" v-model="form.projectExpenseType">
                                <el-radio value="自费重修">自费重修</el-radio>
                                <el-radio value="申报重修">申报重修</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <h4 style="margin:0 0 20px 50px;">实施情况</h4>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="主要建设内容" prop="主要建设内容">
                            <el-input type="textarea" v-model="form.mainConstructionContent" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开工或预计开工时间" prop="开工或预计开工时间">
                            <el-date-picker type="date" v-model="form.startTime" clearable format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完工或预计完工时间" prop="完工或预计完工时间">
                            <el-date-picker type="date" v-model="form.endTime" clearable format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否在部交通统计报表管理系统报送投资" prop="是否在部交通统计报表管理系统报送投资" label-width="300px">
                            <el-radio-group v-model="form.isReportedToMinistry">
                                <el-radio value="0">是</el-radio>
                                <el-radio value="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="已报送投资额" prop="已报送投资额">
                            <el-input-number v-model="form.reportedInvestment" :controls="false">
                                <template #suffix>
                                    <span>万元</span>
                                </template>
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目实施进度" prop="项目实施进度">
                            <el-select :disabled="form.projectExpenseType === '申报重修'" v-model="form.projectProgress">
                                <el-option v-for="item in [
                                    { value: '立项', label: '立项' },
                                    { value: '财政评审', label: '财政评审' },
                                    { value: '开展施工图设计', label: '开展施工图设计' },
                                    { value: '完成施设于批复', label: '完成施设于批复' },
                                ]" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="建设单位名称" prop="建设单位名称">
                            <el-input v-model="form.constructionUnit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="建设单位联系人" prop="建设单位联系人">
                            <el-input v-model="form.constructionUnitContact"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="建设单位联系人电话" prop="建设单位联系人电话">
                            <el-input v-model="form.constructionUnitPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="施工单位名称" prop="施工单位名称">
                            <el-input v-model="form.executionUnit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工单位联系人" prop="施工单位联系人">
                            <el-input v-model="form.executionUnitContact"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="施工单位联系电话" prop="施工单位联系电话">
                            <el-input v-model="form.executionUnitPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设计单位名称" prop="设计单位名称">
                            <el-input v-model="form.designUnit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设计单位联系人" prop="设计单位联系人">
                            <el-input v-model="form.designUnitContact"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设计单位联系人电话" prop="设计单位联系人电话">
                            <el-input v-model="form.designUnitPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监理单位名称" prop="监理单位名称">
                            <el-input v-model="form.supervisionUnit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="监理单位联系人" prop="监理单位联系人">
                            <el-input v-model="form.supervisionUnitContact"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监理单位联系电话" prop="监理单位联系电话">
                            <el-input v-model="form.supervisionUnitPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工图批复时间" prop="施工图批复时间">
                            <el-date-picker type="date" v-model="form.designApprovalTime" clearable format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="施工图设计批复文件(附件)" prop="施工图设计批复文件" label-width="200px">
                            <FileUpload type="image" :limit="9" v-model="designApprovalFiles" :fileType=2 />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工合同时间" prop="施工合同时间">
                            <el-date-picker type="date" v-model="form.contractTime" clearable format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="施工合同金额" prop="施工合同金额">
                            <el-input-number v-model="form.contractAmount" :controls="false">
                                <template #suffix>
                                    <span>万元</span>
                                </template>
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工合同(附件)" prop="施工合同">
                            <FileUpload type="image" :limit="9" v-model="contractFiles" :fileType=3 />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="建设完成投资" prop="建设完成投资">
                            <el-input-number v-model="form.completedInvestment" :controls="false">
                                <template #suffix>
                                    <span>万元</span>
                                </template>
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="交竣工验收时间" prop="交竣工验收时间">
                            <el-date-picker type="date" v-model="form.acceptanceTime" clearable format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="交竣工证书(附件)" prop="交竣工证书" label-width="200px">
                            <FileUpload type="image" :limit="9" v-model="acceptanceFiles" :fileType=4 />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="其他佐证文件" prop="其他佐证文件">
                            <FileUpload type="image" :limit="9" v-model="otherFiles" :fileType=6 />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完工项目上传图片(附件)" prop="完工项目上传图片" label-width="200px">
                            <FileUpload type="image" :limit="9" v-model="completedFiles" :fileType=5 />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="button-box">
            <el-button type="primary" @click="submit" size="large">提交</el-button>
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted, watch, reactive, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import FileUpload from '@/component/FileUpload/FileUpload.vue'
import { request } from '../../../../../shared/utils/request'
import { ElLoading } from 'element-plus'
const router = useRouter()
const route = useRoute()
const form = ref({})
const formRef = ref(null)
const isAddMode = ref(false) // 是否为新增模式

// 附件分类: 1-现场图片/视频 2-施工图设计批复文件 3-施工合同 4-交竣工证书 5-完工项目上传图片 6-其他佐证文件
const designApprovalFiles = ref([]) // 施工图设计批复文件
const contractFiles = ref([]) // 施工合同
const acceptanceFiles = ref([]) // 交竣工证书
const completedFiles = ref([]) // 完工项目上传图片
const otherFiles = ref([]) // 其他佐证文件



// watch(() => designApprovalFiles.value, (data) => {
//     console.log('@@@@@', data);
// })

// watch(() => form.value, (data) => {
//     console.log('@@@@@form', data);
// }, { deep: true })

onMounted(() => {
    // 判断是否为新增模式
    if (route.params.mode === 'add') {
        isAddMode.value = true
        // 初始化空的表单数据
        form.value = {
            districtName: '',
            routeNo: '',
            implementMileage: null,
            earthworkLoss: null,
            startStakeNo: '',
            endStakeNo: '',
            roadLocation: '',
            blockedPointName: '',
            disasterType: '',
            estimatedCost: null,
            technicalGrade: '',
            fundingSource: '',
            disposalCount: null,
            completedCount: null,
            totalInvestment: null,
            projectExpenseType: '自费重修',
            mainConstructionContent: '',
            startTime: '',
            endTime: '',
            isReportedToMinistry: '0',
            reportedInvestment: null,
            projectProgress: '',
            constructionUnit: '',
            constructionUnitContact: '',
            constructionUnitPhone: '',
            executionUnit: '',
            executionUnitContact: '',
            executionUnitPhone: '',
            designUnit: '',
            designUnitContact: '',
            designUnitPhone: '',
            supervisionUnit: '',
            supervisionUnitContact: '',
            supervisionUnitPhone: '',
            designApprovalTime: '',
            contractTime: '',
            contractAmount: null,
            completedInvestment: null,
            acceptanceTime: ''
        }
    } else if (route.params.data) {
        // 编辑模式
        const data = JSON.parse(decodeURIComponent(route.params.data));

        if (data.projectExpenseType === '申报重修') {
            form.value = {
                ...data,
                projectProgress: '申报审批'
            }
        } else {
            form.value = data
        }
        designApprovalFiles.value = data.designApprovalFiles
        contractFiles.value = data.contractFiles
        acceptanceFiles.value = data.acceptanceFiles
        completedFiles.value = data.completedFiles
        otherFiles.value = data.otherFiles
    }
})

const submit = async () => {
    const data = {
        project: form.value,
        designApprovalFiles: designApprovalFiles.value,
        contractFiles: contractFiles.value,
        acceptanceFiles: acceptanceFiles.value,
        completedFiles: completedFiles.value,
        otherFiles: otherFiles.value,
    }
    await formRef.value.validate().then(async () => {
        try {
            const loading = ElLoading.service({
                lock: true,
                text: '操作中',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            let res = null;
            if (route.params.mode === 'add') {
                // 如果是新增填报 则调用新增接口
                res = await request({
                    url: '/snow-ops-platform/recovery/add',
                    method: 'POST',
                    data: data,
                })
            } else {
                // 如果是区县项目申报 调用申报接口
                res = await request({
                    url: '/snow-ops-platform/recovery/report',
                    method: 'POST',
                    data: data,
                })
            }
            loading.close();
            if (res.code === '00000') {
                router.push({
                    name: 'projectManagement',
                })
            } else {
                throw new Error(res.message || '操作失败')
            }
        } catch (error) {
            ElMessage.error(error.message);
        }
    })
        .catch((err) => {
            ElMessage.error('请处理表单中的错误项');
        });
}

</script>

<style scoped>
.root {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.form-box {
    width: 100%;
    height: 90%;
    overflow-y: auto;
    padding: 20px;
}

.button-box {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
</style>