<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 {
  waterloggingRelationProjectList,
  waterloggingRelationAdd,
  waterloggingRelationEdit,
  waterloggingRelationWaterloggingList,
} from '@/api/spongePerformance/waterloggedArea';
import { getToken } from '@/utils/auth';
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, 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>