<template>
    <el-form label-width="auto" ref="ruleFormRef" :model="tableDate" class="demo-form-inline">
        <el-row gutter="10">
            <el-col :span="24">
                <el-form-item label="项目名称:" prop="name">
                    <el-input disabled v-model="tableDate.name" placeholder="项目名称" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="项目状态:" prop="state" :rules="[{ required: true, message: '项目状态', trigger: 'change' }]">
                    <el-select @change="stateChange" clearable style="width: 100%" v-model="tableDate.state"
                        placeholder="项目状态" size="mini">
                        <el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item label="建设进度:" prop="progressNum"
                    :rules="[{ required: true, message: '建设进度', trigger: 'blur' }]">
                    <el-input-number :disabled="isDisabled" v-model="progressNum" :min="0" :max="100" />（%）
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item label="当月完成项目总投资:" prop="investAmountMoneyMonth"
                    :rules="[{ required: true, message: '当月完成项目总投资', trigger: 'blur' }]">
                    <el-input-number v-model="tableDate.investAmountMoneyMonth" :min="0"  />（万元）
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="当月完成海绵相关投资:" prop="spongeInvestAmountMonth"
                    :rules="[{ required: true, message: '当月完成海绵相关投资', trigger: 'blur' }]">
                    <el-input-number v-model="tableDate.spongeInvestAmountMonth" :min="0"  />（万元）
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label-width="auto" label="完成项目总投资:" :rules="[
                    { required: true, message: '完成项目总投资', trigger: 'blur' },
                ]" prop="investAmountMoney">
                    <el-input-number clearable v-model="tableDate.investAmountMoney" placeholder="完成项目总投资" :min="0" />（万元）
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label-width="auto" label="完成海绵相关投资:" :rules="[
                    { required: true, message: '完成海绵相关投资', trigger: 'blur' },
                ]" prop="spongeInvestAmount">
                    <el-input-number clearable v-model="tableDate.spongeInvestAmount" placeholder="完成海绵相关投资" :min="0" />（万元）
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="上传附件">
                    <el-upload :action="FileUpSrc" :auto-upload="false" :on-change="handleExceed"
                        :limit='1' v-model:file-list="investFileUrl" :on-remove="handleExceedMove">
                        <el-button type="primary">上传附件</el-button>
                    </el-upload>
                </el-form-item>

            </el-col>
            <el-col :span="24">
                <el-form-item label="上传视频:">
                    <el-upload ref="upload" class="upload-demo" action="#" :limit="1" :on-change="handleExceedMove1"
                        v-module="tableDate.videoUrl" :auto-upload="false">
                        <template #trigger>
                            <!-- investFileUrl -->
                            <el-button type="primary">上传视频</el-button>
                        </template>
                        <template #tip> </template>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="填报日期:">
                    <el-date-picker :disabled-date="disabledDate" v-model="reportTime" type="date" placeholder="请选择日期"
                        :size="size" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="补充说明:">
                    <el-input type="textarea" v-model="tableDate.remark" placeholder="补充说明" />
                </el-form-item>
            </el-col>

        </el-row>
    </el-form>
    <div style="text-align: right; margin: 10px">
        <el-button type="" @click="Emits('closed')">关闭</el-button>
        <el-button type="primary" @click="checkClick(ruleFormRef)">确定</el-button>
    </div>
</template>

<script setup>

// import { progressSave, systemUpload ,progressOInfo} from "../api";
import { stateOption } from "@/utils/common";
// import config from '@/config'
const Emits = defineEmits(['closed'])
// const baseUrl = config.baseUrl
let { tableList } = defineProps(["tableList"]);
let Datas = new Date().getDate()
let Datam = new Date().getMonth()
const disabledDate = (time = new Date()) => {
    let dataM = time.getMonth()
    if (Datas < 15) {
        return dataM >= Datam
    }
}
let tableDate = ref({ FileUpSrc: '/api' + '/system/upload', imgsUrl: [], 
spongeInvestAmountMonth:0,investAmountMoneyMonth:0,spongeInvestAmountMonth:0,investAmountMoney:0,spongeInvestAmount:0})
async function systemUploadM(p) {
    if (p.length > 0) {
        let formData = new FormData()
        formData.append("file", p[0].raw)
        let { data: { originalName, url } } = await systemUpload(formData)
        tableDate.value.imgsUrl = [url]
    }
        let array = {
            reportTime: Date.parse(reportTime.value),
        }
        delete tableDate.value.id
        progressSaveM({ ...tableDate.value, ...array })
}
//建设进度数据
let isDisabled = ref(true)
let progressNum = ref(0)
// 上传照片
let isRequired = ref(false)
let reportTime = ref(new Date())
// 项目状态变更
const stateChange = (v) => {
    if (v > 4) {
        isDisabled.value = false
        isRequired.value = true
    } else {
        isDisabled.value = true
        isRequired.value = false
    }
}
const progressSaveM = async (data) => {
    let { code } = await progressSave(data)
    if (code == 200) {
        Emits('closed')
    }
}
let investFileUrl = ref([])
const ruleFormRef = ref()
const checkClick = async (ruleFormRef) => {
    console.log(investFileUrl, 9999);
    tableDate.value.progressNum = progressNum.value
    if (!ruleFormRef) return
    await ruleFormRef.validate((valid, fields) => {
        if (valid) {
            systemUploadM(investFileUrl.value)

        }
    })

}



onMounted(() => {
    console.log(tableList,9);
    let {name,id}=tableList
    tableDate.value.name =name
    tableDate.value.projectId =id
});
</script>
<style lang="scss"  scoped>
.water-analysis-page {
    padding: 20px;
    border: 1px solid #ddd;
    .top {
       // margin-bottom: 15px;
    }

    .el-input__inner {
        // color: #fff;//
    }
}
</style>