<template>
  <div class="first-hjjc indexenvi">
    <div class="hjjc-select">
      <el-select
        v-model="hjjcvalue"
        placeholder="请选择"
        @change="hjjcselectChange"
      >
        <el-option
          v-for="(item, index) in hjjcPoint"
          :key="index"
          :label="item"
          :value="index"
        >
        </el-option>
      </el-select>
    </div>
    <el-carousel
      width="500px"
      height="70px"
      direction="vertical"
      :autoplay="true"
      :interval="5000"
      indicator-position="none"
      @change="hjjccarousel"
      ref="itemcarousel"
    >
      <el-carousel-item
        class="el-carousel__item1"
        v-for="(item, index) in hjjcList"
        :key="index"
      >
        <div class="hjjc-flex" v-if="hjjcList">
          <div class="hjjc-single">
            <span class="hjjc-jcName">pm2.5</span>
            <span class="hjjc-jcDanwei">μg/m3</span>
            <span class="hjjc-jcValue">{{ item.items["pm2.5"] }}</span>
            <span class="hjjc-jdt"></span>
          </div>
          <div class="hjjc-single">
            <span class="hjjc-jcName">pm10</span>
            <span class="hjjc-jcDanwei">μg/m3</span>
            <span class="hjjc-jcValue">{{ item.items.pm10 }}</span>
            <span class="hjjc-jdt"></span>
          </div>
          <div class="hjjc-single">
            <span class="hjjc-jcName">噪音</span>
            <span class="hjjc-jcDanwei">dBm</span>
            <span class="hjjc-jcValue">{{ item.items["噪声"] }}</span>
            <span class="hjjc-jdt"></span>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import { enviNowData, listPoint } from "@/api/bigscreen/index.js";
export default {
  name: "indexenvi",
  components: {},
  props: ["air"],
  data() {
    return {
      settime: 60 * 1000 * 30, //定时器时间
      hjjcvalue: "环境监测1", //下拉框
      hjjcPoint: ["环境监测1"],
      carouselnum: 0,
      hjjcList: [{ name: "点位", items: { "pm2.5": 1, pm10: 10, 噪声: 1 } }],
    };
  },
  watch: {
    air(newValue, oldValue) {
      // console.log(newValue);
      if (newValue !== 0) {
        this.destroytime();
      } else {
        this.settime = 60 * 1000 * 30;
        this.envir();
      }
    },
  },
  created() {
    this.$nextTick(function () {
      this.list_point();
    });
  },
  mounted() {
    this.$nextTick(function () {
      // console.log(this.air, "air");
    });
  },
  methods: {
    list_point() {
      this.hjjcPoint = [];
      listPoint()
        .then((res) => {
          // console.log(res.rows, "list_point");
          let data = res.rows;
          let newArr = data.filter((item) => item.monitorType === "空气监测");
          for (let i = 0; i < newArr.length; i++) {
            this.hjjcPoint.push(newArr[i].pointName);
          }
          // console.log(this.hjjcPoint, "this.hjjcPoint");
          this.hjjcvalue = this.hjjcPoint[0];
        })
        .then(() => {
          this.envir();
        });
    },
    setActive(num) {
      this.$refs.itemcarousel.setActiveItem(num);
    },
    hjjcselectChange(e) {
      this.setActive(e);
    },
    hjjccarousel(e) {
      //跑马灯滚动时select变化
      for (let i = 0; i < this.hjjcList.length; i++) {
        if (i === e) {
          this.hjjcvalue = this.hjjcList[i].name;
        }
      }
    },
    //环境监测
    envir() {
      let that = this;
      this.hjjcList = [];
      let hjjcdata = [];
      let items = [];
      let tempTimer = this.settime;
      (function reqData() {
        clearTimeout(this.timeoutFalg);
        enviNowData()
          .then((res) => {
            // console.log("我是空气监测");
            for (let key in res) {
              items.push({ name: key, items: res[key] });
            }

            this.hjjcList = items;
          })
          .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">
.envi {
  width: 100%;
  span {
    display: inline-block;
  }
  .key {
    color: #fff;
    float: left;
  }
  .value {
    float: right;
  }
  .color1 {
    color: #f98202;
  }
}
</style>