<template>
  <div id="pagetwo">
    <div class="form">
      <span class="SelectTitle">站点编号:</span>
      <el-input v-model="site" placeholder="请输入站点编号"></el-input>
      <span class="SelectTitle">时间选择:</span>
      <el-date-picker
        v-model="TimeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="search" v-has="'Search'">查询</el-button>
    </div>
    <div class="tableSection">
      <table>
        <thead>
          <tr>
            <th rowspan="2">序号</th>
            <th rowspan="2">日期</th>
            <th colspan="3">流量（m³/h）</th>
            <th colspan="3">水位（m）</th>
            <th colspan="3">SS值（mg/L）</th>
            <th rowspan="2">SS负荷量（g）</th>
            <th rowspan="2">雨量（mm）</th>
            <th rowspan="2">外排水量（m³）</th>
          </tr>
          <tr>
            <th>最大值</th>
            <th>最小值</th>
            <th>平均值</th>
            <th>最大值</th>
            <th>最小值</th>
            <th>平均值</th>
            <th>最大值</th>
            <th>最小值</th>
            <th>平均值</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in List" :key="index">
            <td>{{ index +1 }}</td>
            <td>{{ item.tt }}</td>
            <td>{{ item.sbl1Max }}</td>
            <td>{{ item.sbl1Min }}</td>
            <td>{{ item.sbl1Avg }}</td>
            <td>{{ item.zMax }}</td>
            <td>{{ item.zMin }}</td>
            <td>{{ item.zAvg }}</td>
            <td>{{ item.ssMax }}</td>
            <td>{{ item.ssMin }}</td>
            <td>{{ item.ssAvg }}</td>
            <td>{{ item.totalSS }}</td>
            <td>{{ item.pd }}</td>
            <td>{{ item.totalWater }}</td>
          </tr>
          <tr>
            <th colspan="13">合计</th>
            <th>{{alltotalWater}}</th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: "StatisticalReport",
  data() {
    return {
      site: "",
      TimeValue: [
        this.moment()
          .subtract("days", 3)
          .format("YYYY-MM-DD HH:mm:ss"),
        this.moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //时间快捷选项
      loading: "",
      alltotalWater: "",
      List: [],
      loading: ""
    };
  },
  mounted() {
    //			this.search()
  },
  methods: {
    getData1() {
      var url =
        this.nozzle.Conn +
        "?siteNo=" +
        this.site +
        "&startTime=" +
        this.TimeValue[0] +
        "&endTime=" +
        this.TimeValue[1];
      this.$http.get(url).then(res => {
        this.loading.close();
        this.List = res.data;
        var math = 0;
        for (let i in this.List) {
          math += parseFloat(this.List[i].totalWater);
        }
        this.alltotalWater = math.toFixed(3);
      });
    },
    search() {
      if (this.site == "") {
        this.$message({
          message: "请输入站点编号",
          type: "warning"
        });
        return;
      }
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.getData1();
    }
  }
};
</script>
<style scoped>
.form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  text-align: left;
  color: white;
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 10px;
}
.form .el-input {
  width: 200px;
  margin: 0 10px;
}

.title {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}

.tableSection {
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
}

table {
  border-collapse: collapse;
  width: 100%;
  box-sizing: border-box;
}

th,
td {
  border: 1px solid rgb(165, 163, 163);
  text-align: center;
  height: 30px;
  color: white;
}

th {
  background: rgba(255, 255, 255, 0.05);
}
</style>