<template>
  <div id="pagetwo" class="report">
    <div class="form">
      <el-select
        class="widthinput"
        v-model="curProjectCode"
        filterable
        :clearable="true"
        placeholder="请选择项目"
        @change="handleChange"
      >
        <el-option
          v-for="(item, index) in allPlatSite"
          :key="index"
          :label="item.platformName"
          :value="item.platformCode"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="site"
        filterable
        placeholder="请选择站点"
        class="widthinput"
      >
        <el-option
          v-for="item in siteList"
          :key="item.index"
          :label="item.siteName"
          :value="item.siteNo"
        ></el-option>
      </el-select>
      <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>
import { mapGetters } from "vuex";
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: "",
      //项目存放数组
      projectList: [],
      //当前所选项目编码
      curProjectCode: "",
      //当前所选项目下的所有站点
      siteList: []
    };
  },
  computed: {
    ...mapGetters(["allPlatSite"])
  },
  methods: {
    //获取项目下的站点
    getSiteList(platformCode) {
      this.siteList = [];
      let siteArr = this.allPlatSite.filter((item,index) =>{
        if(item.platformCode === platformCode) {
          return item.dropSiteList;
        }
      })
      this.siteList = siteArr[0].dropSiteList;
    },
    //项目选择事件
    handleChange(value) {
      this.site = "";
      if(value) {
        this.getSiteList(value);
      }else{
       this.siteList = [];
      }
    },
    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(255, 255, 255, 0.3)"
      });
      this.getData1();
    }
  }
};
</script>
<style lang="scss" scoped>
.form {
  @include fa();
  text-align: left;
  color: var(--white);
  font-size: 14px;
  box-sizing: border-box;
  flex-wrap: wrap;
  &>div{
    margin-right: 10px;
    margin-bottom: 10px;
  }
  /deep/ .el-button{
    margin-bottom: 10px;
  }
}
.report{
  @include fd();
  .tableSection{
    flex: 1;
    table{
      height: 100%;
      tbody{
        min-height: calc(100% - 62px);
      }
    }
  }
}
.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: var(--white);
}

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