<template>
    <el-row class="page-title-row mb10">
        <div class="page-title">{{ t('progressReport.form.title') }}</div>
        <div class="page-report-time">{{ t('progressReport.form.reportTime') }}: {{ formData.createTime || reportTime }}
        </div>
        <div class="page-unit">{{ t('progressReport.form.unit') }}</div>
    </el-row>
    <div class="project-progress-report-form">
        <div class="form-section-title">{{ t('progressReport.form.sectionTitle') }}</div>
        <el-form :model="formData" label-width="200px" class="progress-form" :rules="rules" ref="useForm">
            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('progressReport.form.projectName')" required prop="projectName">
                        <el-select v-model="formData.projectId"
                            :placeholder="t('progressReport.form.selectPlaceholder')" @change="handelSelectChange">
                            <el-option v-for="item in projectNameData" :key="item.id" :label="item.projectName || ''"
                                :value="item.id" />
                            <template #footer>
                                <el-pagination background layout="sizes, prev, pager, next, jumper, total"
                                    :total="total" :page-sizes="[10, 20, 50, 100]" v-model:page-size="queryForm.size"
                                    v-model:current-page="queryForm.page" @size-change="handlePageSizeChange"
                                    @current-change="handlePageChange" />
                            </template>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.projectStatus')" required prop="projectStatus">
                        <el-select v-model="formData.projectStatus"
                            :placeholder="t('progressReport.form.inputPlaceholder')" clearable>
                            <el-option v-for="item in projectStatusOptions" :key="item.value" :value="item.value"
                                :label="item.label" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.constructionStage')">
                        <el-select v-model="formData.constructionStage"
                            :placeholder="t('progressReport.form.selectPlaceholder')" clearable>
                            <el-option v-for="item in constructionStageOptions" :key="item.value" :value="item.value"
                                :label="item.label" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.projectImplementationUnit')">
                        <el-input v-model="formData.implementingBody"
                            :placeholder="t('progressReport.form.inputPlaceholder')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.totalInvestmentAmount')" required
                        prop="projectTotalAmount">
                        <el-input v-model="formData.projectTotalAmount"
                            :placeholder="t('progressReport.form.inputPlaceholder')">
                            <template #append>{{ t('progressReport.form.unitSuffix') }}</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.cumulativeInvestmentToMonthEnd')" required
                        prop="cumulativeInvestmentToDate">
                        <el-input v-model="formData.cumulativeInvestmentToDate"
                            :placeholder="t('progressReport.form.inputPlaceholder')">
                            <template #append>{{ t('progressReport.form.unitSuffix') }}</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.completionRate')" required prop="completionRate">
                        <el-input v-model="formData.completionRate"
                            :placeholder="t('progressReport.form.completionRatePlaceholder')">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="form-row">
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.cumulativePaymentToMonthEnd')">
                        <el-input v-model="formData.cumulativePaymentToDate"
                            :placeholder="t('progressReport.form.inputPlaceholder')">
                            <template #append>{{ t('progressReport.form.unitSuffix') }}</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="t('progressReport.form.paymentCompletionRate')">
                        <el-input v-model="formData.paymentCompletionRate"
                            :placeholder="t('progressReport.form.inputPlaceholder')">
                            <template #append>%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="plan-investment-block">
                <el-col :span="12">
                    <div class="plan-investment-panel left-panel">
                        <div class="panel-title">{{ t('progressReport.form.currentYearImageAmount') }}</div>
                        <div style="flex: 1;">
                            <el-form-item style="height: 82px;" :label="t('progressReport.form.reportYear')">
                                <el-date-picker v-model="formData.annualReport" type="year" value-format="YYYY"
                                    :placeholder="t('progressReport.form.selectYearPlaceholder')" style="width: 100%" />
                            </el-form-item>
                            <el-form-item style="height: 82px;"
                                :label="t('progressReport.form.currentYearPlannedInvestment')" required
                                prop="annualPlannedInvestment">
                                <el-input v-model="formData.annualPlannedInvestment"
                                    :placeholder="t('progressReport.form.inputPlaceholder')">
                                    <template #append>{{ t('progressReport.form.unitSuffix') }}</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item style="height: 82px;"
                                :label="t('progressReport.form.enterpriseCumulativeInvestmentToMonthEnd')" required
                                prop="ytdRemainingInvestment">
                                <el-input v-model="formData.ytdRemainingInvestment"
                                    :placeholder="t('progressReport.form.inputPlaceholder')">
                                    <template #append>{{ t('progressReport.form.unitSuffix') }}</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item style="height: 82px;"
                                :label="t('progressReport.form.investmentCompletionRate')">
                                <el-input v-model="formData.investmentCompletionRate"
                                    :placeholder="t('progressReport.form.inputPlaceholder')">
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="plan-investment-panel right-panel">
                        <div class="panel-title">{{ t('progressReport.form.currentYearPlannedAmount') }}</div>
                        <div style="flex: 1;">
                            <el-form-item style="height: 82px;" :label="t('progressReport.form.plannedPaymentAmount')">
                                <el-input v-model="formData.plannedPayment"
                                    :placeholder="t('progressReport.form.inputPlaceholder')">
                                    <template #append>{{ t('progressReport.form.unitSuffix') }}</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item style="height: 82px;"
                                :label="t('progressReport.form.completedPaymentAmount')">
                                <el-input v-model="formData.actualPayment"
                                    :placeholder="t('progressReport.form.inputPlaceholder')">
                                    <template #append>{{ t('progressReport.form.unitSuffix') }}</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item style="height: 82px;"
                                :label="t('progressReport.form.plannedAmountPaymentCompletionRate')">
                                <el-input v-model="formData.investmentPlanCompletionRate"
                                    :placeholder="t('progressReport.form.inputPlaceholder')">
                                    <template #append>%</template>
                                </el-input>
                            </el-form-item>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('progressReport.form.effectiveness')">
                        <el-input v-model="formData.achievements"
                            :placeholder="t('progressReport.form.inputPlaceholder')" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('progressReport.form.coordinationMatters')">
                        <el-input v-model="formData.coordinationIssues"
                            :placeholder="t('progressReport.form.inputPlaceholder')" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('progressReport.form.nextWorkArrangements')">
                        <el-input v-model="formData.nextWorkPlan"
                            :placeholder="t('progressReport.form.inputPlaceholder')" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('progressReport.form.currentStageEvidenceMaterials')">
                        <el-input v-model="formData.supportingDocuments"
                            :placeholder="t('progressReport.form.selectAttachmentPlaceholder')" readonly>
                            <template #append>
                                <UploadFile :modelValue="formData.supportingDocuments" @change="uploadChange"
                                    :fileSize="20" type="simple" :limit="10" :isShowTip="false" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('progressReport.form.remark')">
                        <el-input v-model="formData.remarks" :placeholder="t('progressReport.form.inputPlaceholder')" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="form-row">
                <el-col :span="24">
                    <el-form-item :label="t('progressReport.form.isLastDeclaration')">
                        <el-select v-model="formData.isFinalApplication"
                            :placeholder="t('progressReport.form.selectPlaceholder')" clearable>
                            <el-option :label="t('progressReport.form.yes')" value="1" />
                            <el-option :label="t('progressReport.form.no')" value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, computed, watch, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { InvestmentProjectProgress } from '/@/views/invMid/progressReport/interface/type';
import { investmentProjectsPlanList } from '/@/views/invMid/projectLibrary/interface/types';
import { investmentProjectsPlanPage } from '/@/api/investment/investmentManagement';
import { ProjectPlanApplyFormItem } from '/@/components/investment/interface/types';
import { constructionStageOptions, projectStatusOptions } from '/@/hooks/enums';
import UploadFile from "/@/components/Upload/index.vue";
import { type FormInstance, FormRules } from 'element-plus';

const { t } = useI18n();

export interface ProjectProgressReportFormData {
    projectName: string;
    projectStatus: string;
    constructionStage: string;
    projectImplementationUnit: string;
    totalInvestmentAmount: string;
    cumulativeInvestmentToMonthEnd: string;
    completionRate: string;
    cumulativePaymentToMonthEnd: string;
    paymentCompletionRate: string;
    // 本年投资形象额
    reportYear: string;
    currentYearPlannedInvestment: string;
    enterpriseCumulativeInvestmentToMonthEnd: string;
    investmentCompletionRate: string;
    // 本年投资计划额
    plannedPaymentAmount: string;
    completedPaymentAmount: string;
    plannedAmountPaymentCompletionRate: string;
    // 其他字段
    effectiveness: string;
    coordinationMatters: string;
    nextWorkArrangements: string;
    currentStageEvidenceMaterials: any[];
    remark: string;
    isLastDeclaration: string;
}

const props = defineProps<{
    modelValue?: InvestmentProjectProgress;
    rules?: FormRules;
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: InvestmentProjectProgress): void;
}>();
const useForm = ref<FormInstance | undefined>()
const defaultForm = reactive<InvestmentProjectProgress>({
    id: undefined,
    projectName: '',
    projectId: undefined,
    projectStatus: '',
    constructionStage: '',
    implementingBody: '',
    projectTotalAmount: undefined,
    cumulativeInvestmentToDate: undefined,
    completionRate: undefined,
    cumulativePaymentToDate: undefined,
    paymentCompletionRate: undefined,
    annualReport: undefined,
    annualPlannedInvestment: undefined,
    ytdRemainingInvestment: undefined,
    investmentCompletionRate: undefined,
    plannedPayment: undefined,
    actualPayment: undefined,
    investmentPlanCompletionRate: undefined,
    achievements: '',
    coordinationIssues: '',
    nextWorkPlan: '',
    supportingDocuments: '',
    remarks: '',
    isFinalApplication: undefined,
    createBy: '',
    createTime: '',
    updateBy: '',
    updateTime: '',
    delFlag: '',
    processInstanceId: '',
    status: '',
    deptId: ''
})
const formData = reactive<InvestmentProjectProgress>({ ...defaultForm, ...props.modelValue });
const projectNameData = ref<ProjectPlanApplyFormItem[]>([]);
// 获取当前日期作为汇报时间
const reportTime = computed(() => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
});
const total = ref(0)
const queryForm = reactive<investmentProjectsPlanList>({
    page: 1,
    size: 10,
});
const getProjectNameList = async () => {
    try {
        const res = await investmentProjectsPlanPage(queryForm);
        projectNameData.value = res.data?.records || [];
        total.value = res.data?.total || 0;
    } catch (error) {
        console.error(error);
        projectNameData.value = []; // 出错时设置为空数组
    }
}
getProjectNameList();
/**
 * 项目选择改变
 * @param {string | number} value - 选中的项目ID
 */
const handelSelectChange = (value: string | number) => {
    // 根据选中的项目ID查找对应的项目信息
    const selectedProject = projectNameData.value.find(item =>
        item.id == value
    );
    // 如果找到了对应的项目，则更新实施单位字段
    if (selectedProject) {
        formData.implementingBody = selectedProject.projectMainEntity || selectedProject.projectOwnerUnit || '';
        formData.projectName = selectedProject.projectName || '';
        formData.deptId = String(selectedProject.deptId);
    }
}
/**
 * 页码大小改变
 * @param {number} pageSize - 新的页码大小
 * */
const handlePageSizeChange = (pageSize: number) => {
    queryForm.size = pageSize;
    getProjectNameList();
}
/**
 * 页码改变
 * @param {number} page - 新的页码
 * */
const handlePageChange = (page: number) => {
    queryForm.page = page;
    getProjectNameList();
}

// 监听 formData 变化，同步到父组件
watch(
    formData,
    (newVal) => {
        console.log(newVal);
        emit('update:modelValue', { ...newVal });
    },
    { deep: true }
);

// 监听 props.modelValue 变化，同步到 formData
watch(
    () => props.modelValue,
    (newVal) => {
        if (newVal) {
            if (typeof newVal.annualReport === 'number') newVal.annualReport = newVal.annualReport.toString()
            Object.assign(formData, defaultForm, newVal);
        }
    },
    { immediate: true, deep: true }
);
const uploadChange = (_: any, data: any[]) => {
    if (!data || Object.prototype.toString.call(data) !== '[object Array]' || data.length === 0) {
        formData.supportingDocuments = [];
        return;
    }
    formData.supportingDocuments = data.map((item: any) => {
        return {
            name: item.name,
            url: item.url
        }
    })
}
defineExpose({
    validate: async () => {
        const isValid = await useForm.value?.validate();
        if (!isValid) return false
        return formData
    },
})
</script>

<style scoped>
.page-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

.page-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.page-report-time {
    position: absolute;
    left: 0;
    font-size: 14px;
    color: var(--el-text-color-secondary);
}

.page-unit {
    position: absolute;
    right: 0;
    font-size: 14px;
    color: var(--el-text-color-secondary);
}

.project-progress-report-form {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    border: 1px solid var(--el-border-color-light);
}

.form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 0 0 20px;
    padding-left: 10px;
    border-left: 4px solid var(--el-color-primary);
}

.progress-form {
    width: 100%;
}

/* 表单 label 左对齐 */
.progress-form :deep(.el-form-item__label) {
    text-align: left;
    justify-content: flex-start;
}


.form-row {
    margin-bottom: 16px;
    margin-top: 16px;
}

.form-row:last-of-type {
    margin-bottom: 0;
}

.cursor-pointer {
    cursor: pointer;
}

.plan-investment-block {
    margin-top: 24px;
}

.plan-investment-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f0f7ff;
    padding: 16px;
    border-radius: 4px;
    min-height: 414px;
}

.panel-title {
    width: 200px;
    padding-top: 0;
    margin-top: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    white-space: nowrap;
}

.plan-investment-panel :deep(.el-form-item__label) {
    padding-top: 0;
    line-height: 32px;
}

.plan-investment-panel :deep(.el-form-item) {
    align-items: center;
}
</style>
