<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="内涝点:" style="width: 45%" prop="stCode">
          <el-select
            value-key="stCode"
            @change="loggingListChange"
            clearable
            v-model="FormList.stCode"
            class="m-2"
            placeholder="请选择内涝点"
            size="mini"
            style="width: 100%"
          >
            <el-option v-for="i in FormList.loggingList" :key="i.stCode" :label="i.stName" :value="i.stCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联项目:" style="width: 45%" prop="projectNo">
          <el-select
            clearable
            v-model="FormList.projectNo"
            class="m-2"
            placeholder="请选择关联项目"
            size="mini"
            style="width: 100%"
            @change="projectListChange(item)"
            value-key="projectNo"
          >
            <el-option v-for="item in projectList" :key="item.projectNo" :label="item.projectName" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="内涝点状态:" style="width: 45%" prop="loggingRemoveStatus">
          <el-tag round :type="FormList.loggingRemoveStatus == 0 ? 'error' : 'success'">{{
            FormList.loggingRemoveStatus == 0 ? '未消除' : '已消除'
          }}</el-tag>
        </el-form-item>
        <el-form-item label="项目状态:" style="width: 45%" prop="projectStatus">
          <el-tag round :type="FormList.projectStatus == 0 ? 'error' : 'success'">{{
            FormList.projectStatus == 0 ? '未完工' : '已完工'
          }}</el-tag>
        </el-form-item>

        <el-form-item label="内涝点消除时间:" style="width: 45%" prop="loggingRemoveTime">
          <el-date-picker
            style="width: 100%"
            v-model="FormList.loggingRemoveTime"
            type="date"
            placeholder="请选择内涝点消除时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>

        <el-form-item label="项目完工时间:" style="width: 45%" prop="projectCompleteTime">
          <el-date-picker
            style="width: 100%"
            v-model="FormList.projectCompleteTime"
            type="date"
            placeholder="请选择项目完工时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="附件:" style="width: 93%">
          <el-upload
            v-model:file-list="fileList1"
            class="upload-demo"
            style="width: 100%"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width: 95%">
          <el-input v-model="FormList.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { onMounted, defineEmits, reactive, defineProps, defineExpose } from 'vue';
import {
  waterloggingRelationProjectList,
  waterloggingRelationAdd,
  waterloggingRelationEdit,
  waterloggingRelationWaterloggingList,
} from '@/api/waterloggedArea';
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 emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
const projectList  = ref([]);
let FormList = ref({});
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((i) => {
        if (i.hasOwnProperty("response")) {
          i.response.data.refType = "waterlogging_engineering";
          i.response.data.refField = "waterlogging_engineeringNode";
          FormList.value.fileSaveRequestList.push(i.response.data);
        } else {
          FormList.value.fileSaveRequestList.push(i);
        }
      });
      if (typeList.type == 4) {
        waterloggingRelationAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
          }
        });
      } else {
        waterloggingRelationEdit(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
          }
        });
      }
    }
  });
}
function loadProjerctListData() {
  fileList1.value = typeList.fileList1;
  FormList.value = typeList
  cons
  proxy.$refs.ruleForm.resetFields();
  waterloggingRelationProjectListM();
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
  fileList1.value = [];
}

function closed() {
  emits('onModalClose');
}
//工程和内涝点接口
async function waterloggingRelationProjectListM() {
  let { data } = await waterloggingRelationProjectList();
  projectList.value = data;
}
function loggingListChange({ stCode, loggingRemoveStatus }) {
  FormList.value.stCode = stCode;
  FormList.value.loggingRemoveStatus = loggingRemoveStatus || 0;
}
function projectListChange({ projectNo, projectStatus }) {
  FormList.value.projectNo = projectNo;
  FormList.value.projectStatus = projectStatus;
}
onMounted(() => {
  loadProjerctListData();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>