<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">
        <div v-for="i in FormList.monitorDynamicTableTitleList" style="display: flex; flex-direction: column">
          <el-form-item
            v-if="i.key == 'real' || i.key == 'target'"
            v-for="k in i.titleGroup"
            :label="i.key == 'real' ? '实际' + k.value + ':' : '目标' + k.value + ':'"
            :prop="k.key"
            :disabled="typeList.type == 1 || typeList.type == 2"
          >
            <el-input
              :disabled="i.key != 'real'"
              v-model="FormList[k.key]"
              :placeholder="k.placeholder"
              @change="ChangeClick(k.key, FormList[k.key])"
            >
            </el-input>
          </el-form-item>
          <el-form-item v-else :label="i.value + ':'" :prop="i.key" :disabled="typeList.type == 1 || typeList.type == 2">
            <ImageFileUpload
              v-if="i.key == 'attachFileList'"
              v-model:saveFileArr="fileSaveRequestList"
              :listType="'text'"
              :refType="'CSFHBZ'"
            />
            <div v-else-if="i.key == 'standardFlag'">
              <el-tag v-if="typeList.data.standardFlag === ''" type="warning">未填报</el-tag>
              <el-tag v-else-if="typeList.data.standardFlag === 102" type="warning">无法评价</el-tag>
              <el-tag v-else :type="typeList.data.standardFlag === 1 ? 'success' : 'error'">
                {{ typeList.data.standardFlag === 1 ? '达标' : '未达标' }}
              </el-tag>
            </div>
            <div v-else>
              {{ FormList[i.key] }}
            </div>
          </el-form-item>
        </div>
        <!-- 地图渲染河道断面，默认显示监测站站点名称、设防水位、实时水位，点击查看历史水位数据 -->
        <div class="csfhbzM"></div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { projectInfoAdd, projectInfoEdit } from '@/api/spongePerformance/prevention';
import { getToken } from '@/utils/auth';
import { projectEstimateRules } from '@/utils/rules';
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 IsStandFlag1 = ref(0);
const fileSaveRequestList = ref([]);
const IsStandText = ref('');
let FormList = ref({ projectNo: '', fileSaveRequestList: [] });
function ChangeClick(v, m) {
  typeList.iSstandardFlag = null;
  if (v == 'realMB') {
    IsStandFlag1.value = m * 1 - FormList.value.targetMB * 1;
  }
  if (IsStandFlag1.value >= 0) typeList.data.standardFlag = 1;
  else typeList.data.standardFlag = 0;
}

function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      const itemUpdateFieldRequestList = [
        { id: typeList.data['MB-id'], realValue: FormList.value.realMB, standardFlag: typeList.data.standardFlag },
      ];
      FormList.value = {
        itemDataType: typeList.itemDataType,
        standardFlag: typeList.data.standardFlag,
        itemUpdateFieldRequestList,
        fileSaveRequestList: fileSaveRequestList.value,
        performanceEvaluateId: typeList.data.performanceEvaluateId,
      };
      console.log('FormList.value', FormList.value);
      projectInfoEdit(FormList.value).then(({ code }) => {
        if (code == 200) {
          emits('onModalClose');
        }
      });
    }
  });
}
function loadProjerctListData() {
  console.log('typeListtypeList', typeList);
  let ln = typeList.monitorDynamicTableTitleList?.length;
  FormList.value = typeList.data;
  fileSaveRequestList.value = typeList.fileList1;
  FormList.value.monitorDynamicTableTitleList = typeList.monitorDynamicTableTitleList.slice(0, ln - 2);
  proxy.$refs.ruleForm.resetFields();
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
}

function closed() {
  emits('onModalClose');
}
onMounted(() => {
  loadProjerctListData();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  .csfhbzM {
    width: 100%;
    height: 400px;
    border: 1px solid red;
  }
}
</style>