<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="考核年份" prop="year">
          <el-input v-model="FormList.year" disabled="true" />
        </el-form-item>
        <el-form-item label="目标雨水资源化利用(万吨/年)" prop="itemTarget">
          <el-input v-model="FormList.itemTarget" disabled="true" />
        </el-form-item>
        <el-form-item label="建筑小区雨水资源利用量(万吨/年)" prop="realValue">
          <el-input-number
            v-model="FormList.buildingYszyly"
            controls-position="right"
            :min="0"
            :precision="2"
            :step="0.1"
            style="width: 300px"
          />
        </el-form-item>
        <el-table :data="tableData1" max-height="300">
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column label="月份" prop="yslyName" />
          <!-- <el-table-column label="占地面积(公顷)" prop="area" /> -->
          <el-table-column label="年雨水资源化利用量(万吨)" prop="yslyAmount" />
        </el-table>
        <el-divider></el-divider>
        <el-form-item label="景观水体雨水资源利用量(万吨/年)" prop="realValue">
          <el-input-number
            v-model="FormList.waterYszyly"
            controls-position="right"
            :min="0"
            :precision="2"
            :step="0.1"
            style="width: 300px"
          />
        </el-form-item>
        <el-table :data="tableData2" max-height="300">
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column label="景观水体名称" prop="yslyName" />
          <el-table-column label="占地面积(公顷)" prop="area" />
          <el-table-column label="年雨水资源化利用量(万吨)" prop="yslyAmount" />
        </el-table>
        <!-- <div v-for="i in typeList.monitorDynamicTableTitleList" style="display: flex; flex-direction: column">
          <el-form-item :label="i.value + ':'" :prop="i.key" :disabled="typeList.type == 1 || typeList.type == 2">
            <el-input-number
              v-if="i.key == 'realValue'"
              :placeholder="i.value"
              :min="0"
              :precision="2"
              :step="0.1"
              style="width: 300px"
              @change="trsyAreaChange"
              v-model="FormList[i.key]"
            >
            </el-input-number>

            <div v-else-if="i.key == 'itemTarget'">
              {{ itemTarget }}
            </div>
            <div v-else>
              {{ FormList[i.key] }}
            </div>
          </el-form-item>
        </div> -->
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { projectInfoEdit, yszylyDetailList } from '@/api/spongePerformance/naturalWaterArea';
import { projectEstimateRules } from '@/utils/rules';
import { ref } from 'vue';
const { proxy } = getCurrentInstance();

const { typeList } = defineProps(['typeList']);
const tableData1 = ref([]);
const tableData2 = ref([]);
const configId = ref('');
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
const IsStandFlag1 = ref(0);
const fileSaveRequestList = ref([]);
let FormList = ref({});
const itemTarget = computed(() => {
  return typeList.data?.itemDataTypePerformanceEvaluateItemList[0]?.itemTarget || 0;
});
const realScore = computed(() => {
  return typeList.data?.itemDataTypePerformanceEvaluateItemList[0]?.realScore || 0;
});

function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      let arr = typeList.data.itemDataTypePerformanceEvaluateItemList;
      let flay = null;
      if (IsStandFlag1.value > 0) flay = 1;
      else flay = 0;
      if (arr.length == 0) {
        arr.push({
          standardFlag: IsStandFlag1.value || 0,
          realValue: FormList.value.realValue,
          realScore: FormList.value.realScore,
        });
      } else {
        arr[0].standardFlag = typeList.data.standardFlag;
        arr[0].realValue = FormList.value.realValue;
        if (typeList.data.standardFlag == '0') arr[0].realScore = 0;
        else arr[0].realScore = arr[0].itemScore;
      }
      //  arr[0].realValue =FormList.value.realScore;
      typeList.data.itemDataTypePerformanceEvaluateItemList = arr;
      FormList.value = {
        fileSaveRequestList: fileSaveRequestList.value,
        ...typeList.data,
        itemDataType: 'YSZYHLY',
      };
      projectInfoEdit(FormList.value).then(({ code }) => {
        if (code == 200) {
          emits('onModalClose');
        }
      });
    }
  });
}
// function loadProjerctListData() {
//   FormList.value = typeList.data;

//   configId.value = typeList.data.id;
//   console.log(configId.value, ' `````````typeList`````````');
//   console.log(typeList.data, ' typeList');
//   FormList.value.itemTarget = typeList.data.itemDataTypePerformanceEvaluateItemList[0]?.itemTarget || 0;
//   FormList.value.realValue = typeList.data.itemDataTypePerformanceEvaluateItemList[0]?.realValue || 0;
//   fileSaveRequestList.value = typeList.fileList1;
//   FormList.value.realScore = realScore.value;

//   proxy.$refs.ruleForm.resetFields();
// }
//业务分页搜索海绵考核评估项数据类型
const loadProjerctListData = async id => {
  FormList.value = typeList.data;
  configId.value = typeList.data.id;
  FormList.value.itemTarget = typeList.data.itemDataTypePerformanceEvaluateItemList[0]?.itemTarget || 0;
  FormList.value.realValue = typeList.data.itemDataTypePerformanceEvaluateItemList[0]?.realValue || 0;

  fileSaveRequestList.value = typeList.fileList1;
  FormList.value.realScore = realScore.value;
  proxy.$refs.ruleForm.resetFields();
  let res = await yszylyDetailList({
    configId: configId.value,
  });
  if (res && res.code == 200) {
    console.log(res, 9999999999999999999);
    let dats = res.data;
    FormList.value.buildingYszyly = dats.buildingYszyly;
    FormList.value.waterYszyly = dats.waterYszyly;
    tableData1.value = dats.buildingList;
    tableData2.value = dats.waterList;
  }
};

function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
  fileSaveRequestList.value = [];
}
function closed() {
  emits('onModalClose');
}
function trsyAreaChange(v) {
  typeList.iSstandardFlag = 0;
  let st = v * 1 - (itemTarget.value || 0);
  if (st >= 0) {
    IsStandFlag1.value = 1;
    typeList.data.standardFlag = '1';
  } else {
    IsStandFlag1.value = 0;
    typeList.data.standardFlag = '0';
  }
}
onMounted(() => {
  loadProjerctListData();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>