<template>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>计算结果</span>
      </div>
    </template>
    <el-form class="form" ref="targetForm" :model="form">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="面积加和㎡:" prop="areaTotal">
            <template #label>
              <span>面积加和㎡</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>不同类型下垫面面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.areaTotal }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="硬质地面㎡:" prop="hardGroundAreaTotal">
            <template #label>
              <span>硬质地面㎡</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>硬质地面面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.hardGroundAreaTotal }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards">
            <template #label>
              <span>硬质地面率是否达标</span>
              <popover :width="260">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>硬质地面占总面积的百分比，跟目标硬质地面对比，小于等于目标则达标</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag v-if="standardMap.get(form.hardGroundStandards)?.text" :type="standardMap.get(form.hardGroundStandards)?.type">{{
              standardMap.get(form.hardGroundStandards)?.text
            }}</el-tag>
            <span v-else></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="综合径流系数:" prop="comprehensiveRunoffCoefficient">
            <template #label>
              <span>综合径流系数</span>
              <popover :width="260">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>不同类型下垫面径流系数×不同类型下垫面面积/下垫面面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.comprehensiveRunoffCoefficient }}</span>
          </el-form-item></el-col
        >
        <el-col :span="8">
          <el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity">
            <template #label>
              <span>目标调蓄量m³</span>
              <popover :width="280">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>0.01*设计降雨量*面积加和*综合径流系数</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.targetStorageCapacity }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>目标调蓄量计算参数</span>
      </div>
    </template>
    <el-form class="tableForm" ref="tableForm" :model="formModel" :disabled="props.disabled">
      <el-table :data="formModel.tableData" v-loading="loading" element-loading-text="数据加载中...">
        <el-table-column label="下垫面类型" prop="itemName" show-overflow-tooltip />
        <el-table-column label="面积㎡" prop="area">
          <template #default="{ row, $index }">
            <el-form-item :prop="'tableData.' + $index + '.' + 'area'" :rules="rules['area']">
              <el-input v-model="row.area" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="径流系数" prop="runoffCoefficient">
          <template #header>
            <span>径流系数</span>
            <popover>
              <span style="font-weight: 700">说明</span>
              <br />
              <span>可输入参考值范围内的值，默认取径流系数参考值下限</span>
            </popover>
          </template>
          <template #default="{ row, $index }">
            <el-form-item :prop="'tableData.' + $index + '.' + 'runoffCoefficient'" :rules="rules['runoffCoefficient']">
              <el-input v-model="row.runoffCoefficient" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="径流系数参考值" show-overflow-tooltip>
          <template #header>
            <span>径流系数参考值</span>
            <popover>
              <span style="font-weight: 700">说明</span>
              <br />
              <span>由下垫面建议径流系数配置获取</span>
            </popover>
          </template>
          <template #default="{ row }">
            <span>{{ `${row.downValue}-${row.upValue}` }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { getUnderlyingSurfaceRunoffConfigItemList } from '@/api/preassess/runoffCoefficient';
import { facilitiesStandardCalcEdit } from '@/api/preassess/calculate';
import { standardMap } from './map';
import { inheritAttr } from '@/utils/v3';
import popover from '@/components/popover';

const areaValidate = (rule, value, callback) => {
  if (value === '') {
    callback();
  } else {
    const reg = /^\d+(\.\d+)?$/;
    if (reg.test(value)) callback();
    else callback(new Error('请输入数字'));
  }
};

const runoffCoefficientValidate = (rule, value, callback) => {
  if (value === '') {
    callback();
  } else {
    const reg = /^\d+(\.\d+)?$/;
    if (reg.test(value)) {
      const props = rule.field.split('.');
      const { downValue, upValue } = formModel[props[0]][props[1]];
      if (parseFloat(value) >= downValue * 1 && parseFloat(value) <= upValue * 1) {
        callback();
      } else {
        callback(new Error('请输入参考值范围的值'));
      }
    } else {
      callback(new Error('请输入参考值范围的值'));
    }
  }
};

const { proxy } = getCurrentInstance();
const emit = defineEmits(['success', 'set-computed-disabled']);
const props = defineProps({
  id: {
    type: [String, Number],
    default: '',
  },
  opts: {
    type: Object,
    default: () => {},
  },
  projectInfo: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const { id, opts, projectInfo } = props;

const form = reactive({
  id: '',
  areaTotal: '',
  hardGroundAreaTotal: '',
  hardGroundStandards: '',
  comprehensiveRunoffCoefficient: '',
  targetStorageCapacity: '',
  facilityStorageCapacity: '',
  storageCapacityStandards: '',
  facilityStorageCapacityToAnnualRunoffTotalControlRate: '',
  pollutionRemovalRate: '',
  pollutionRemovalStandards: '',
});

const formModel = reactive({
  tableData: [],
});
const rules = reactive({
  area: [{ validator: areaValidate, trigger: ['blur'] }],
  runoffCoefficient: [{ validator: runoffCoefficientValidate, trigger: ['blur'] }],
});
const loading = ref(false);

const params = computed(() => {
  const data = JSON.parse(JSON.stringify(formModel.tableData));
  for (const item of data) {
    item.area = item.area || '0';
    item.runoffCoefficient = item.runoffCoefficient || item.downValue;
  }
  return {
    calculateType: 0,
    id: form.id,
    projectNo: projectInfo.projectNo,
    standardCalcUnderlyingSurfaceRunoffSaveRequestList: data,
  };
});

const getTableList = async () => {
  loading.value = true;
  const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1' });
  if (res?.code !== 200) return;
  loading.value = false;
  res.data.forEach(item => {
    item.area = '';
    item.runoffCoefficient = item.downValue;
  });
  formModel.tableData = res.data;
  emit('set-computed-disabled', !formModel.tableData.length);
};

const getDetailInfo = data => {
  inheritAttr(data, form);
  formModel.tableData = data.standardCalcUnderlyingSurfaceRunoffSaveRequestList;
};

const getList = (data = {}) => {
  if (formModel.tableData.length) return;
  if (id) {
    getDetailInfo(data);
  } else {
    getTableList();
  }
};

const submit = () => {
  proxy.$refs.tableForm.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit', params);
      const res = await facilitiesStandardCalcEdit(params.value);
      if (res?.code !== 200) return;
      proxy.$modal.msgSuccess('计算成功！');
      inheritAttr(res.data, form);
      for (const item of formModel.tableData) {
        item.area = item.area || '0';
        item.runoffCoefficient = item.runoffCoefficient || item.downValue;
      }
      emit('success');
    } else {
      console.log('error submit!', fields);
    }
  });
};

const heavyLoad = async () => {
  loading.value = true
  const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1'})
  if(res?.code !== 200) return
  loading.value = false
  res.data.forEach((item) => {
    item.area = ''
    item.runoffCoefficient = item.downValue
    const oldData = formModel.tableData.find(it => it.itemName === item.itemName)
    if(oldData) {
      item.area = oldData.area
      item.runoffCoefficient = oldData.runoffCoefficient
    }
  })
  formModel.tableData = res.data
}

onMounted(() => {});

defineExpose({
  getList,
  submit,
  form,
  heavyLoad
});
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  .card-header {
    font-weight: 700;
    font-size: 16px;
  }

  :deep(.form) {
    .el-form-item {
      margin-bottom: 0;
    }
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>