<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form
        label-width="auto"
        :rules="projectEstimateRules"
        inline
        ref="ruleForm"
        :model="FormList"
        :disabled="typeList.type == 1"
      >
      <el-form-item
          :label="i.label"
          :style="{'width':i.prop == 'fileList1' ?'93%' :'45%'}"
          :prop="i.prop"
          v-for="i in projectEstimateForm"
          :disabled="typeList.type == 1 || typeList.type == 2"
        >
        <el-select
            style="width: 100%"
            v-if="i.prop == 'projectName'"
            @change="projectNameChange"
            v-model="FormList.projectName"
            :placeholder="i.placeholder"
            clearable
          >
            <el-option
              v-for="dict in ProjectListData"
              :key="dict.projectNo"
              :label="dict.projectName"
              :value="dict.projectNo"
            />
          </el-select>
          <el-select
            style="width: 100%"
            clearable
            v-model="FormList.fundSource"
            class="m-2"
            v-else-if="i.prop == 'fundSource'"
            :placeholder="i.placeholder"
          >
            <el-option
              v-for="dict in fund_source"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <el-date-picker
          v-else-if="i.prop == 'quoteDate'"
            style="width: 100%"
            clearable
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="FormList.quoteDate"
            type="date"
           
            range-separator="到"
            :placeholder="i.placeholder"
          />
          <el-upload
          v-else-if="i.prop == 'fileList1'"
            v-model:file-list="fileList1"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            style="width:100vh"
          >
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div>
            </template>
          </el-upload>
          <el-input
            v-else
            v-model="FormList[i.prop]"
            :placeholder="i.placeholder"
            :disabled="i.prop == 'projectNo'"
            :type="
              i.prop == 'requireContent'
                ? 'textarea'
                : ''
            "
          >
          <template #append    v-if="i.prop == 'budget'"> 万元 </template>
        </el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import {
  onMounted,
  defineEmits,
  reactive,
  defineProps,
  defineExpose,
} from "vue";
import { projectInfoAdd, projectInfoEdit } from "@/api/projectEstimate";
import { projectInfoList } from "@/api/project/tenderReview";
import { getToken } from "@/utils/auth";
import { projectEstimateRules } from "@/utils/rules";
import { projectEstimateForm } from "@/utils/form";
import { ElMessage, ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const {  fund_source} =proxy.useDict("fund_source");
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
const { typeList } = defineProps(["typeList"]);
const ProjectListData = ref([]);
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
let FormList = ref({ projectNo: "", fileSaveRequestList: [] });

function projectNameChange(v) {
  FormList.value.projectNo = v;
}
const fileList1 = ref([]);
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true
}
function submit() {
  proxy.$refs.ruleForm.validate((valid) => {
    if (valid) {
      FormList.value.fileSaveRequestList = [];
      fileList1.value.forEach((element) => {
        if (element.hasOwnProperty("response")) {
          element.response.data.refType = "proProjectBudget";
          FormList.value.fileSaveRequestList.push(element.response.data);
        } else {
          FormList.value.fileSaveRequestList.push(element);
        }
      });
      if (typeList.type == 4) {
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      } else {
        projectInfoEdit(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      }
    }
  });
}
function loadProjerctListData() {
  projectInfoList().then((response) => {
    ProjectListData.value = response.data;
    FormList.value = typeList;
    fileList1.value = typeList.fileList1;
    proxy.$refs.ruleForm.resetFields();
  });
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
  fileList1.value = [];
}

function closed() {
  emits("onModalClose");
}

onMounted(() => {
  loadProjerctListData();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>