<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form
        label-width="auto"
        :rules="rules"
        inline
        ref="ruleForm"
        :model="FormList"
        :disabled="typeList.type == 1"
      >
      <el-form-item label="内涝点:" style="width: 45%" prop="stCode" v-show="typeList.type == 2||typeList.type == 1">
            <el-input v-model="FormList.stName" disabled />
        </el-form-item>
        <el-form-item label="内涝点:" style="width: 45%" prop="stCode" v-show="typeList.type == 4 ">
          <el-select
            value-key="stCode"
            clearable
            v-model="FormList.stCode"
            class="m-3"
            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%"
            value-key="projectNo"
            @change="projectListChange"
          >
            <el-option v-for="i in projectList" :key="i.projectNo" :label="i.projectName" :value="i.projectNo" />
          </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="completeTime">
          <el-date-picker
            style="width: 100%"
            v-model="FormList.completeTime"
            type="date"
            placeholder="请选择项目完工时间"
            disabled
            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> -->
          <ImageFileUpload
              v-model:saveFileArr="FormList.fileSaveRequestList"
              :listType="'text'"
              :refType="'waterlogging_engineering'"
              :refField="'waterlogging_engineeringNode'"
            />
        </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 { projectEstimateForm } from '@/utils/form';
import { ElMessage, ElMessageBox } from 'element-plus';
import ImageFileUpload from '@/components/ImageFileUpload'; //图片文件上传

const { proxy } = getCurrentInstance();
// const { fund_source } = proxy.useDict('fund_source');
const uploadHeader = ref({
  Authorization: 'Bearer ' + getToken(),
});
const { typeList ,isComponent,waterloggingRelationWaterloggingListM} = defineProps(['typeList','isComponent','waterloggingRelationWaterloggingListM']);
console.log("isComponent", isComponent)
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
const projectList  = ref([]);
let FormList = ref({});
const rules = reactive({
  stCode: [{ required: true, message: '内涝点不能为空', trigger: ['blur', 'change'] }],
  projectNo: [{ required: true, message: '关联项目不能为空', trigger: ['blur', 'change'] }],
 
})
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}

function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      if (typeList.type == 4) {
        waterloggingRelationAdd({...FormList.value,year:isComponent.examineYear}).then(({ code }) => {
        // waterloggingRelationAdd({...FormList.value,...isComponent,year:isComponent.examineYear,...typeList}).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
            waterloggingRelationWaterloggingListM()
          }
        });
      } else {
        waterloggingRelationEdit({...FormList.value,year:isComponent.examineYear,}).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
            waterloggingRelationWaterloggingListM()
          }
        });
      }
    }
  });
}
function loadProjerctListData() {
  FormList.value = typeList
  FormList.value.completeTime=typeList.projectCompleteTime
  proxy.$refs.ruleForm.resetFields();
  waterloggingRelationProjectListM();
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
}

function closed() {
  emits('onModalClose');
}
//工程和内涝点接口
async function waterloggingRelationProjectListM() {
  let { data } = await waterloggingRelationProjectList();
  projectList.value = data;
}

function projectListChange(v) {
 let arr= projectList.value.filter((k)=>{ 
    return v==k.projectNo; 
  })
  FormList.value.projectNo = v;
  FormList.value.projectStatus =arr[0]?. projectStatus;
  FormList.value.completeTime =arr[0]?. completeTime;
}
onMounted(() => {
  loadProjerctListData();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>