<template>
  <div class="indexwater">
    <div class="stitle">
      <div class="stit">水质监测</div>
      <div class="hjjc-flex">
        <div class="hjjc-single">
          <span class="hjjc-jcName">PH值</span>

          <span class="hjjc-jcValue">{{ hjjcList[0].items["水环境PH"] }}</span>
          <span class="hjjc-jdt"></span>
        </div>
        <div class="hjjc-single">
          <span class="hjjc-jcName">氨氮</span>

          <span class="hjjc-jcValue">{{ hjjcList[0].items["水质氨氮"] }}</span>
          <span class="hjjc-jdt"></span>
        </div>
      </div>
      <div class="hjjc-flex">
        <div class="hjjc-single">
          <span class="hjjc-jcName">浊度</span>

          <span class="hjjc-jcValue">{{ hjjcList[0].items["浊度"] }}</span>
          <span class="hjjc-jdt"></span>
        </div>
        <div class="hjjc-single">
          <span class="hjjc-jcName">铅离子</span>

          <span class="hjjc-jcValue">{{ hjjcList[0].items["铅离子"] }}</span>
          <span class="hjjc-jdt"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { waterNowData, listPoint } from "@/api/bigscreen/index.js";
export default {
  name: "indexwater",
  components: {},
  props: ["air"],
  data() {
    return {
      settime: 60 * 1000 * 30, //定时器时间
      hjjcvalue: "环境监测1", //下拉框
      hjjcPoint: ["环境监测1"],
      carouselnum: 0,
      hjjcList: [
        {
          name: "点位",
          items: { 水环境PH: 1, 水质氨氮: 2, 浊度: 5000, 铅离子: 0 },
        },
      ],
    };
  },
  watch: {
    air(newValue, oldValue) {
      // console.log(newValue);
      if (newValue !== 0) {
        this.destroytime();
      } else {
        this.settime = 60 * 1000 * 30;
        this.envir();
      }
    },
  },
  created() {
    this.$nextTick(function () {});
  },
  mounted() {
    this.$nextTick(function () {
      // console.log(this.air, "air");
      this.envir();
    });
  },
  methods: {
    //水质监测
    envir() {
      let that = this;
      this.hjjcList = [];
      let hjjcdata = [];
      let items = [];
      let tempTimer = this.settime;
      (function reqData() {
        clearTimeout(this.timeoutFalg);
        waterNowData()
          .then((res) => {
            for (let key in res) {
              items.push({ name: key, items: res[key] });
            }

            this.hjjcList = items;
            // console.log(this.hjjcList, "我是水质监测");
          })
          .then(() => {
            this.timeoutFalg = setTimeout(reqData.bind(this), tempTimer);
          });
      }.bind(this)());
    },
    destroytime() {
      clearTimeout(this.timeoutFalg);
      this.settime = null;
    },
  },
  // beforeRouteLeave(to, form, next) {
  //   clearTimeout(this.timeoutFalg);
  //   next();
  // },
  destroyed() {
    clearTimeout(this.timeoutFalg);
  },
};
</script>
<style scoped lang="scss">
.stitle {
  width: 500px;
  height: 23px;
  clear: both;
  margin: 0 auto;

  .stit {
    position: relative;
    font-size: 23px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #00ffff;
    line-height: 23px;
    margin: 8px 0 8px 55px;
    background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .stit::before {
    content: "";
    width: 39px;
    height: 15px;
    position: absolute;
    left: -44px;
    top: 6px;
    background-image: url("~@/assets/images/stitle.png");
  }
  .hjjc-flex {
    display: flex;
    flex-direction: row;
    // width: 500px;
    justify-content: space-between;
    .hjjc-single {
      position: relative;
      width: 230px;
      height: 50px;
      .hjjc-jcName {
        position: absolute;
        top: 2px;
        left: 0;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #bff7ff;
      }
      .hjjc-jcValue {
        position: absolute;
        top: 2px;
        right: 0;
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #03f8fb;
        line-height: 34px;
      }
      .hjjc-jdt {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 8px;
        background: linear-gradient(90deg, #58fdec, #06cdf8);
        border-radius: 4px;
      }
    }
  }
}
</style>