<template>
  <div id="dataScreening">
    <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.siteNo"
          :label="item.siteName"
          :value="item.siteNo"
        ></el-option>
      </el-select>
      <!-- <span class="SelectTitle">站点编号:</span>
      <el-input
        v-model="site"
        placeholder="请输入站点编号"
        class="widthinput"
      ></el-input> -->
      <!-- <span class="SelectTitle">时间选择:</span> -->
      <el-date-picker
        class="data"
        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-select v-model="value1" placeholder="请选择因子一" class="widthinput">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="value2" placeholder="请选择因子二" class="widthinput">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="search"
        v-has="'Search'"
        >查询</el-button
      >
    </div>
    <div id="echart">
      <template v-if="noData">
        <div class="noData"></div>
      </template>
      <template v-else>
        <div>
          <div style="width:100%;height:400px" ref="chart"></div>
        </div>
        <div>
          <div style="width:100%;height:400px" ref="chart1"></div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "dataScreening",
  data: function() {
    return {
      flag1: false,
      flag2: false,
      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: "",
      options: [
        {
          value: "TURB",
          label: "SS(mg/L)"
        },
        {
          value: "SBL1",
          label: "流量1(m³/h)"
        },
        {
          value: "SBL2",
          label: "流量2(m³/h)"
        },
        {
          value: "Z",
          label: "水位1(m)"
        },
        {
          value: "ZB",
          label: "水位2(m)"
        },
        {
          value: "PD05",
          label: "降雨量(mm)"
        }
      ],
      value1: "SBL1",
      value2: "Z",
      name1: "",
      name2: "",
      //当前所选项目编码
      curProjectCode: "",
      //当前所选项目下的所有站点
      siteList: [],
      noData: true,
    };
  },
  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 = [];
      }
    },
    getName() {
      let obj1 = {};
      obj1 = this.options.find(item => {
        return item.value === this.value1;
      });
      this.name1 = obj1.label;
      let obj2 = {};
      obj2 = this.options.find(item => {
        return item.value === this.value2;
      });
      this.name2 = obj2.label;
    },
    getData1() {
      var url =
        this.nozzle.statement +
        "?siteNo=" +
        this.site +
        "&startTime=" +
        this.TimeValue[0] +
        "&endTime=" +
        this.TimeValue[1];
      this.$http.get(url).then(res => {
        this.flag1 = true;
        this.closeLoad();
        if(res.data) {
          let data = res.data;
          var timeList = [];
          var waterList = [];
          var totalSS = [];
          for (let i in data) {
            timeList.push(data[i].tt);
            totalSS.push(data[i].totalSS);
            waterList.push(data[i].totalWater);
          }
          this.initCharts1(timeList, totalSS, waterList);
        }
      });
    },
    getData2() {
      var url =
        this.nozzle.service +
        "?siteNo=" +
        this.site +
        "&startTime=" +
        this.TimeValue[0] +
        "&endTime=" +
        this.TimeValue[1] +
        "&property1=" +
        this.value1 +
        "&property2=" +
        this.value2;
      this.getName();
      this.$http.get(url).then(res => {
        this.flag2 = true;
        this.closeLoad();
        var timeList = [];
        var sbl1AvgList = []; //流量
        var zAvgList = []; //水位
        if(res.data) {
          let data = res.data;
          for (let i in data) {
            timeList.push(data[i].tt);
            sbl1AvgList.push(data[i].value1);
            zAvgList.push(data[i].value2);
          }
          this.initCharts(timeList, sbl1AvgList, zAvgList);
        }
      });
    },
    //搜索
    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();
      this.getData2();
    },
    closeLoad() {
      if (this.flag1 && this.flag2) {
        this.loading.close();
        this.noData = false;
      }
    },
    initCharts(...arr) {
      let legendData = [];
      legendData.push(this.name1, this.name2);
      let myChart = this.$echarts.init(this.$refs.chart);
      // 绘制图表
      var colors = ["#5793f3", "#5793f3"];
      var option = {
        title: {
          bottom: 5,
          left: "center"
        },
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#333"
            }
          }
        },
        grid: {},
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          data: [
            {
              name: legendData[0]
              // icon: "image://" + require("./../../static/images/shixian.png")
            },
            {
              name: legendData[1]
              // icon: "image://" + require("./../../static/images/xuxian.png")
            }
          ],
          textStyle: {
            color: "#409EFF" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: arr[0],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: this.name1,
            position: "left",
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            type: "value",
            name: this.name2,
            position: "right",
            axisLine: {
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: this.name1,
            type: "line",

            data: arr[1]
          },
          {
            name: this.name2,
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted"
                }
              }
            },
            data: arr[2]
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts1(...arr) {
      let myChart = this.$echarts.init(this.$refs.chart1);
      // 绘制图表
      var colors = ["#5793f3", "#5793f3", "#675bba"];
      var option = {
        title: {
          bottom: 5,
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#333"
            }
          }
        },
        color: colors,
        grid: {},
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          data: [
            {
              name: "累计排水量"
              // icon: "image://" + require("./../../static/images/shixian.png")
            },
            {
              name: "SS负荷量"
              // icon: "image://" + require("./../../static/images/xuxian.png")
            }
          ],
          textStyle: {
            color: "#409EFF" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: arr[0],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "累计排水量（m³）",
            position: "left",
            axisLabel: {
              formatter: "{value}"
            },
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            },
            textStyle: {
              color: "#999" //这里用参数代替了
            }
          },
          {
            type: "value",
            name: "SS负荷量(g)",
            position: "right",
            axisLabel: {
              formatter: "{value} "
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        series: [
          {
            name: "累计排水量",
            type: "line",
            data: arr[2]
          },
          {
            name: "SS负荷量",
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted"
                }
              }
            },
            data: arr[1]
          }
        ]
      };
      var option1 = {
        title: {
          bottom: 5,
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#333"
            }
          }
        },
        color: colors,
        grid: {},
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          data: [
            {
              name: "累计排水量"
              // icon: "image://" + require("./../../static/images/shixian.png")
            }
          ],
          textStyle: {
            color: "#999" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: arr[0],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "累计排水量（m³）",
            position: "left",
            axisLabel: {
              formatter: "{value}"
            },
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            }
          }
        ],
        series: [
          {
            name: "累计排水量",
            type: "line",
            data: arr[2]
          }
        ]
      };
      myChart.clear();
      if (this.name1 != "SS(mg/L)" && this.name2 != "SS(mg/L)") {
        myChart.setOption(option1);
      } else {
        myChart.setOption(option);
      }
    }
  }
};
</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;
  }
}
.form .el-input {
  width: 200px;
  margin: 0 10px;
}
.SelectTitle {
  display: inline-block;
  margin-left: 5px;
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.data {
  width: 28%;
}
.widthinput {
  width: 15%;
}
#echart {
  height: calc(100% - 55px);
  /* background: rgba(53, 53, 53, 0.5); */
}
#echart > div {
  width: 100%;
}
</style>