<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 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
              disabled
              v-if="i.key == 'trsyTargetArea'"
              :placeholder="i.value"
              style="width: 300px"
              :min="0"
              :precision="2"
              :step="0.1"
              :max="typeList.allRealValue"
              @change="trsyAreaChange"
              v-model="FormList[i.key]"
            >
              <template #append> k㎡ </template>
            </el-input> -->
            <div v-if="i.key == 'trsyTargetArea'">{{ typeList.data.itemTargetval }} k㎡</div>
            <div v-else-if="i.key == 'allRealValue'">{{ typeList.allRealValue }}</div>
            <!-- <div v-else-if="i.key == 'trsyArea'">{{ typeList.data.trsyArea }}</div> -->
            <div v-else-if="i.key == 'trsyArea'">{{ typeList.data.trsyArea.toString() }}</div>
            <div v-else-if="i.key == 'trsyTargetArea'">
              <!-- {{ ((itemTarget * typeList.allRealValue) / 100 || 0).toFixed(3) }} -->
            </div>
            <div v-else-if="i.key == 'itemTarget'">
              {{ itemTarget || 0 }}
            </div>
            <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>
      </el-form>
      <el-table :data="tableData" v-loading="tableLoading" max-height="300">
        <el-table-column label="项目名称" prop="projectName" />
        <el-table-column label="占地面积(k㎡)" prop="projectArea" />
        <el-table-column label="新增天然水域面积(k㎡)" prop="newTrsyArea" />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { projectInfoEdit, trsyAreaByYear } from '@/api/spongePerformance/naturalWaterArea';
import { projectEstimateRules } from '@/utils/rules';
import { getConfigKey } from '@/api/system/config'; //获取参数值

const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableLoading = ref(true);
const { typeList } = defineProps(['typeList']);
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
const IsStandFlag1 = ref(0);
const fileSaveRequestList = ref([]);
let FormList = ref({ projectNo: '' });
const itemTarget = computed(() => {
  return typeList.data?.itemDataTypePerformanceEvaluateItemList[0]?.itemTarget;
});
// 提交
function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      let ar = typeList.data.itemDataTypePerformanceEvaluateItemList;
      let arr1 = typeList.data;
      if (ar.length > 0) {
        ar[0].realValue = arr1.trsyAreaRate;
        ar[0].standardFlag = typeList.data.standardFlag;
        if (typeList.data.standardFlag === '1') {
          ar[0].realScore = ar[0].itemScore;
        } else {
          ar[0].realScore = 0;
        }
      } else {
        ar.push({
          standardFlag: typeList.data.standardFlag,
          realValue: typeList.data.trsyAreaRate,
          realScore: typeList.data.standardFlag >= 0 ? arr1.trsyTargetArea || 0 : 0,
        });
      }

      typeList.data.itemDataTypePerformanceEvaluateItemList = ar;
      FormList.value = {
        fileSaveRequestList: fileSaveRequestList.value,
        ...typeList.data,
        itemDataType: 'TRSYMJBL',
      };
      projectInfoEdit(FormList.value).then(({ code }) => {
        if (code == 200) {
          emits('onModalClose');
        }
      });
    }
  });
}
function loadProjerctListData() {
  FormList.value = typeList.data;
  fileSaveRequestList.value = typeList.fileList1;
  IsStandFlag1.value = typeList.data.trsyArea * 1 - (((itemTarget.value * typeList.allRealValue) / 100).toFixed(3) || 0);
  proxy.$refs.ruleForm.resetFields();
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
  fileSaveRequestList.value = [];
}
function closed() {
  emits('onModalClose');
}
function trsyAreaChange(v) {
  let st = v * 1 - (((itemTarget.value * typeList.allRealValue) / 100).toFixed(3) || 0);
  console.log(st, 333);
  if (st >= 0) {
    IsStandFlag1.value = 1;
    typeList.data.standardFlag = '1';
  } else {
    IsStandFlag1.value = 0;
    typeList.data.standardFlag = '0';
  }
  FormList.value.trsyAreaRate = ((v / typeList.allRealValue) * 100).toFixed(2) || 0;
}
// 获取现状天然水域面积
function getAreaData() {
  getConfigKey(`water_area_${typeList.data.year}`).then(res => {
    typeList.data.trsyArea = res.data;
  });
}
// 获取具体项目列表
async function getProjectList() {
  let res = await trsyAreaByYear({ year: typeList.data.year });
  if (res && res.code == 200) {
    tableData.value = res.data;
  }
  tableLoading.value = false;
}
onMounted(() => {
  // getAreaData();
  loadProjerctListData();
  getProjectList();
  // typeList.data.trsyArea = typeList.data.trsyArea.toString().match(/^\d+(?:\.\d{0,2})?/);
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>