<template>
    <div class="shidi-page">
        <div class="img-cnt">
            <!-- <img src="~@/assets/images/shidi.png" alt=""> -->
        </div>
        <table>
            <tr>
                <th></th>
                <th>氨氮</th>
                <th>COD</th>
                <th>悬浮物SS</th>
                <th>unit</th>
                <th>水质评价</th>
            </tr>
            <tr>
                <td>计算结果</td>
                <td>{{result.nh}}</td>
                <td>{{result.cod}}</td>
                <td>{{result.ss}}</td>
                <td>(mg/L)</td>
                <td rowspan="4">{{waterGrade}}水体</td>
            </tr>
            <tr>
                <td>污水处理厂放流流量</td>
                <td>
                    <el-input
                        v-model="nh.sewageFlow"
                        min="0"
                        max="9999"
                        type="number"
                        maxlength="5"
                    ></el-input>
                </td>
                <td>
                    <el-input v-model="cod.sewageFlow" min="0" max="9999" type="number"></el-input>
                </td>
                <td>
                    <el-input v-model="ss.sewageFlow" min="0" max="9999" type="number"></el-input>
                </td>
                <td>(吨/日)</td>
                <td></td>
            </tr>
            <!-- <tr>
                <td>污水处理厂放流浓度</td>
                <td>
                    <el-input v-model="nh.concentration" min="0" max="9999" type="number"></el-input>
                </td>
                <td>
                    <el-input v-model="cod.concentration" min="0" max="9999" type="number"></el-input>
                </td>
                <td>
                    <el-input v-model="ss.concentration" min="0" max="9999" type="number"></el-input>
                </td>
                <td></td>
            </tr>-->
            <!-- <tr>
                <td>雨水排口流量</td>
                <td>
                    <el-input v-model="nh.rainFlow" min="0" max="9999" type="number"></el-input>
                </td>
                <td>
                    <el-input v-model="cod.rainFlow" min="0" max="9999" type="number"></el-input>
                </td>
                <td>
                    <el-input v-model="ss.rainFlow" min="0" max="9999" type="number"></el-input>
                </td>
                <td></td>
            </tr>-->
            <tr>
                <td>雨水排口浓度</td>
                <td>
                    <el-input v-model="nh.outletConcentration" min="0" max="9999" type="number"></el-input>
                </td>
                <td>
                    <!-- <el-input v-model="cod.outletConcentration" min="0" max="9999" type="number"></el-input> -->
                </td>
                <td>
                    <el-input v-model="ss.outletConcentration" min="0" max="9999" type="number"></el-input>
                </td>
                <td>(mg/L)</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <el-button type="primary" @click="calc(1)">计算</el-button>
                </td>
                <td>
                    <el-button type="primary" @click="calc(2)">计算</el-button>
                </td>
                <td>
                    <el-button type="primary" @click="calc(3)">计算</el-button>
                </td>
                <td></td>
            </tr>
        </table>
        <div class="txt-explain">
            <p>
                <span>*计算方法透过CSTR假设，以完全混合系统透过质量平衡公式计算。</span>
            </p>
            <p>
                <span>*水质评价指标依"地表水环境标准"评价。</span>
            </p>
        </div>
    </div>
</template>

<script>
import { proWetlandCalc } from "@/services";
export default {
  data() {
    return {
      waterGrade: "Ⅲ类",
      waterGradeNo: {
        nh: 0,
        cod: 0,
        ss: 0
      },
      result: {
        nh: 0.65,
        cod: 19.4,
        ss: 17.1
      },
      nh: {
        sewageFlow: 20000,
        sewageConcentration: 5,
        outletFlow: 0.02,
        outletConcentration: 1.65,
        factor: "NH4N"
      },
      cod: {
        sewageFlow: 20000,
        sewageConcentration: 5,
        outletFlow: 0.02,
        outletConcentration: 32,
        factor: "COD"
      },
      ss: {
        sewageFlow: 20000,
        sewageConcentration: 5,
        outletFlow: 0.02,
        outletConcentration: 24,
        factor: "SS"
      }
    };
  },
  mounted() {
    this.calc(1);
    this.calc(2);
    this.calc(3);
  },
  methods: {
    async calc(type) {
      let data = {};
      switch (type) {
        case 1:
          data = this.nh;
          break;
        case 2:
          data = this.cod;
          break;
        case 3:
          data = this.ss;
          break;
        default:
          break;
      }
      let param = { data };
      let res = await proWetlandCalc(param);
      if (res.code === 200) {
        switch (type) {
          case 1:
            this.result.nh = res.data.value;
            this.waterGradeNo.nh = res.data.gradeNo;
            this.getWaterGrade(res.data.grade);
            break;
          case 2:
            this.result.cod = res.data.value;
            this.waterGradeNo.cod = res.data.gradeNo;
            this.getWaterGrade(res.data.grade);
            break;
          case 3:
            this.result.ss = res.data.value;
            this.waterGradeNo.ss = res.data.gradeNo;
            this.getWaterGrade(res.data.grade);
            break;
          default:
            break;
        }
      }
    },
    getWaterGrade(grade) {
      let max =
        this.waterGradeNo.nh > this.waterGradeNo.cod
          ? this.waterGradeNo.nh
          : this.waterGradeNo.cod;
      max = max > this.waterGradeNo.ss ? max : this.waterGradeNo.ss;

      switch (max) {
        case 1:
          this.waterGrade = "I类";
          break;
        case 1:
          this.waterGrade = "Ⅱ类";
          break;
        case 1:
          this.waterGrade = "Ⅲ类";
          break;
        case 1:
          this.waterGrade = "Ⅳ类";
          break;
        case 1:
          this.waterGrade = "Ⅴ类";
          break;
        default:
          this.waterGrade = "Ⅲ类";
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.shidi-page {
  .img-cnt {
    text-align: center;
    margin-bottom: 15px;
    img {
      width: 650px;
    }
  }
  table {
    margin-left: 7em;
    border-collapse: separate;
    border-spacing: 0px 10px;
    color: aqua;
  }
  td,
  th {
    padding: 5px 20px;
    .unit {
      float: left;
    }
  }
  .txt-explain {
    margin-left: 8em;
    color: aqua;
  }
}
</style>