<!--
 * @Author: your name
 * @Date: 2021-10-21 17:51:22
 * @LastEditTime: 2021-12-17 08:48:08
 * @LastEditors: Please set LastEditors
 * @Description: 生态监测页面
 * @FilePath: \hyyfScreen\src\views\Zoology\Zoology.vue
-->
<template>
  <div class="zoology">
    <div class="left">
      <div class="left-top">
        <!-- 左上标题 -->
        <div class="left-top-title">
          <div class="left-top-title-left"></div>
          <div class="left-top-title-center">
            <span>栋舍环境</span>
<!--            <div class="left-top-title-icon" @click="leftTopSelect"></div>-->
            <!-- 可选择的栋 -->
<!--            <div class="left-top-select" v-show="leftTopSelected">-->
<!--              <select-block :title="'一栋'">-->
<!--                <template v-slot:left>-->
<!--                  <select-column :list="simulatedData"></select-column>-->
<!--                </template>-->
<!--                <template v-slot:right>-->
<!--                  <select-column :floor="false" :type="1"></select-column>-->
<!--                </template>-->
<!--              </select-block>-->
<!--            </div>-->
          </div>
          <div class="left-top-title-right"></div>
        </div>
        <!-- 左上循环滑动 -->
        <div
          class="left-top-content"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div class="zooFlex">
            <el-form :inline="true" size="small">
              <el-form-item label="栋舍">
                <el-select v-model="schoolId" style="width: 160px;" @change="handSchool">
                  <el-option v-for="item in schoolList" :key="item.id" :value="item.id" :label="item.floorName"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼层">
                <el-select v-model="floorId" style="width: 160px;" @change="handFloor">
                  <el-option v-for="item in floorList" :key="item.uid" :value="item.uid" :label="item.alias"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单元">
                <el-select v-model="unitId" style="width: 160px;" @change="handUnit">
                  <el-option v-for="item in unitList" :key="item.id" :value="item.id" :label="item.roomName"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <template v-if="swiperData.length > 0">
            <swiper
                style="height: 180px;  margin-top: auto; margin-bottom: auto;"
                ref="mySwiper"
                class="swiper"
                :options="swiperOption"
            >
              <swiper-slide v-for="item in swiperData" :key="item.roomId">
                <swiper-content
                    @getRoomId="getRoomId"
                    :list="item"
                    @onLeave="onLeave"
                    @onEnter="onEnter"
                ></swiper-content>
              </swiper-slide>
            </swiper>
          </template>
          <template>
            <div style="line-height: 200px;font-size: 18px; color: white">暂无数据</div>
          </template>
        </div>
      </div>
      <div
        class="left-middle"
        v-loading="weatherLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <chart-board
          :title="roomName + '用水量'"
          :ifDate="true"
          @emitDates="getWaterDates"
        >
          <chart-line v-if="waterData.yAxisData.length > 0" :data="waterData" :id="1"></chart-line>
          <div v-else style="font-size: 18px; line-height: 200px; color: white">暂无数据</div>
        </chart-board>
      </div>
      <div class="left-bottom">
        <div class="flex-center">
          <chart-board
            :title="'整栋用电量'"
            :ifDate="true"
            @emitDates="getElecDates"
          >
            <template v-if="elecData.yAxisData.length > 0">
              <chart-line-and :data="elecData" :id="2"></chart-line-and>
            </template>
            <template v-else>
              <div style="font-size: 18px; line-height: 150px; color: white">暂无数据</div>
            </template>
          </chart-board>
        </div>
        <div class="flex-center">
          <chart-board
            :title="'整栋本周用料量'"
            :ifDate="true"
            @emitDates="getElecDates"
          >
            <template v-if="fodderData.yAxisData.length > 0">
              <chart-line :data="fodderData" :id="2"></chart-line>
            </template>
            <template v-else>
              <div style="font-size: 18px; line-height: 150px; color: white">暂无数据</div>
            </template>
          </chart-board>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="right-top">
        <div class="kuang">
          <iframe
              v-if="cameraOne !== ''"
            :src="
              'static/jinm/index.html?' +
                '1' +
                ',' +
                cameraOne +
                ',' +
                cameraTwo +
                ',' +
                '100%' +
                ',' +
                '0'
            "
            style="width: 100%; height: 100%;"
            frameborder="0"
            allowfullscreen="true"
          ></iframe>
        </div>
      </div>
      <div class="right-bottom">
        <div
          class="right-bottom-left"
          v-loading="chartLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <chart-board :title="roomName + '温度'" @emitDates="getWaterDates">
            <template v-if="tempData.yAxisData.length > 0">
              <chart-line :data="tempData" :id="4"></chart-line>
            </template>
            <template v-else>
              <div style="font-size: 18px; line-height: 150px; color: white">暂无数据</div>
            </template>
          </chart-board>
        </div>
        <div
          class="right-bottom-right"
          v-loading="chartLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <chart-board :title="roomName + '湿度'" @emitDates="getWaterDates">
            <chart-line v-if="rhData.yAxisData.length > 0" :data="rhData" :id="5"></chart-line>
            <div v-else style="font-size: 18px; line-height: 150px; color: white">暂无数据</div>
          </chart-board>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import SelectBlock from "./leftTop/SelectBlock.vue";
// import SelectColumn from "./leftTop/SelectColumn.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import SwiperContent from "./leftTop/SwiperContent.vue";
import ChartBoard from "./charts/ChartBoard.vue";
import ChartLine from "./charts/ChartLine.vue";
import ChartLineAnd from "./charts/ChartLineAnd.vue";
import {getEnv, getByRoom, getListWater, getRoomVideo, getLastVideo, getSchool, getByFloor, getUid, getFodder} from "@/utils/api";
import { timeDate, Debounce } from "@/utils";
import { Form, FormItem ,Select } from "element-ui";

export default {
  name: "Zoology",
  components: {
    // SelectBlock,
    // SelectColumn,
    swiper,
    swiperSlide,
    SwiperContent,
    ChartBoard,
    ChartLine,
    ChartLineAnd,
    'el-form': Form,
    'el-form-item': FormItem,
    'el-select': Select
  },
  data() {
    return {
      leftTopSelected: false, // 左上是否点击了要选择
      simulatedData: [
        // 左上 —— 模拟的数据
        { id: 1, name: "1" },
        { id: 2, name: "11" },
        { id: 3, name: "111" },
        { id: 4, name: "1111" },
        { id: 5, name: "1111" },
        { id: 6, name: "11111" },
        { id: 7, name: "111111" },
        { id: 8, name: "1111111" },
      ],
      swiperOption: {
        // 左上 —— 循环滑动
        slidesPerView: 4,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: true,
          disableOnInteraction: true,
        },
        loop: true,
      },
      swiperData: [],
      waterDates: [], // 用水量模拟
      waterData: {
        // 左中 —— 模拟数据
        xAxisName: "水量",
        xAxisData: [],
        yAxisName: "吨",
        yAxisData: [],
      },
      tempData: {
        xAxisName: "温度",
        xAxisData: [],
        yAxisName: "℃",
        yAxisData: [],
      },
      rhData: {
        xAxisName: "湿度",
        xAxisData: [],
        yAxisName: "RH",
        yAxisData: [],
      },
      elecData: {
        xAxisName: "电量",
        xAxisData: [],
        yAxisName: "KW/h",
        yAxisData: [],
      },
      fodderData: {
        xAxisName: "饲料",
        xAxisData: [],
        yAxisName: 'Kg',
        yAxisData: [],
      },
      roomName: "",
      elecDates: [], // 用电量时间
      isVideo: false,
      cameraOne: '',
      cameraTwo: '',
      loading: true,
      weatherLoading: true,
      chartLoading: true,
      schoolId:'',
      schoolList: [],
      floorList: [],
      floorId: '',
      unitId: '',
      unitList: [],
    };
  },
  computed: {
    swipers() {
      return this.$refs.mySwiper.swiper;
    },
  },
  methods: {
    init() {
      getEnv({}).then((res) => {
        if (res.code === 10000) {
          if(res.data.length > 0) {
            this.swiperData = res.data;
          }
          this.loading = false;
        }
      });
      getSchool({}).then(res => {
        if(res.code === 10000) {
          this.schoolList = res.data;
        }
      })
    },
    leftTopSelect() {
      // 左上角的选择是否显示
      this.leftTopSelected = !this.leftTopSelected;
    },
    getWaterDates(value) {
      // 左中 获取时间
      this.waterDates = value;
    },
    getElecDates(value) {
      // 左下 获取时间
      this.elecDates = value;
    },
    getRoomId: Debounce(function(id) {
      let params = {
        roomId: id,
        endDate: timeDate(new Date().getTime()),
        type: 1,
      };
      getByRoom(params).then((res) => {
        if (res.code === 10000) {
          if(res.data != null) {
            this.setTempAndRh(res.data);
          }
        }
      });
      let params1 = {
        roomId: id,
        endDate: timeDate(new Date().getTime()),
        type: 2,
      };
      getListWater(params1).then((res) => {
        if (res.code === 10000) {
          this.weatherLoading = false;
          if(res.data != null) {
            this.setWeather(res.data);
          }
        }
      });
      getRoomVideo({ roomId: id }).then((res) => {
        if (res.code === 10000) {
          this.isVideo = true;
          this.cameraOne = res.data.wsUrl;
          this.cameraTwo = res.data.rtspUrl;
        }
      });
    }),

    setTempAndRh(data) {
      this.tempData.xAxisData = [];
      this.tempData.yAxisData = [];
      this.rhData.xAxisData = [];
      this.rhData.yAxisData = [];
      this.roomName = data.roomName;
      data.semperatures.forEach((item) => {
        this.tempData.xAxisData.push(item.createTime);
        this.tempData.yAxisData.push(parseFloat(item.value));
      });
      data.humidities.forEach((item) => {
        this.rhData.xAxisData.push(item.createTime);
        this.rhData.yAxisData.push(item.value);
      });
      this.chartLoading = false;
    },
    setWeather(data) {
      this.waterData.xAxisData = [];
      this.waterData.yAxisData = [];
      data.data.forEach((item) => {
        this.waterData.xAxisData.push(item.createTime);
        this.waterData.yAxisData.push(item.value);
      });
      this.weatherLoading = false;
    },
    initData() {
      getByRoom({}).then((res) => {
        if (res.code === 10000) {
          this.chartLoading = false;
          if(res.data != null) {
            this.setTempAndRh(res.data);
          }
        }
      });
      let params1 = {
        endDate: timeDate(new Date().getTime()),
        type: 2,
      };
      getListWater(params1).then((res) => {
        if (res.code === 10000) {
          this.weatherLoading = false;
          if(res.data != null) {
            this.setWeather(res.data);
          }
        }
      });
      getLastVideo({}).then(res => {
        if(res.code === 10000) {
          if(res.data !== null) {
            this.cameraOne = res.data.wsUrl;
            this.cameraTwo = res.data.rtspUrl;
          }
        }
      })
    },
    onEnter() {
      this.swipers.autoplay.stop();
    },
    onLeave() {
      this.swipers.autoplay.start();
    },
    handSchool(val) {
      this.floorList = [];
      this.floorId = '';
      this.unitList= [];
      this.unitId = '';
      let params = {
        floorId: val,
      };
      getByFloor(params).then((res) => {
        this.floorList = res.data;
      });
    },
    handFloor(val) {
      this.unitList= [];
      this.unitId = '';
      let params = {
        uid: val,
      };
      getUid(params).then((res) => {
        this.unitList = res.data;
      });
    },
    setFodder(data) {
      this.fodderData.xAxisData = [];
      this.fodderData.yAxisData = [];
      data.fodderList.forEach(item => {
        this.fodderData.xAxisData.push(item.createTime);
        this.fodderData.yAxisData.push(item.value);
      })
    },
    handUnit(val) {
      this.getRoomId(val);
      let params1 = {
        endDate: timeDate(new Date().getTime()),
        floorId: this.schoolId,
        type: 1
      }
      getFodder(params1).then(res => {
        if(res.code === 10000) {
          this.setFodder(res.data)
        }
      })
    }
  },
  mounted() {
    this.init();
    this.initData();
  },
};
</script>

<style scoped>
/deep/.el-form-item__label {
  color: #fff;
}
.zoology {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}

/** 左边 */
.left {
  /* background-color: #fff; */
  width: 40%;
  height: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 左上 */
.left-top {
  width: 100%;
  height: 30%;
  background: linear-gradient(
    156deg,
    rgba(15, 21, 43, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
}
/* 左上 - title */
.left-top-title {
  width: 100%;
  height: 26px;
  display: flex;
}
.left-top-title-left {
  width: 325px;
  height: 26px;
  background: url("../../assets/BioSafety/u1717.svg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.left-top-title-left::before {
  content: "";
  height: 85%;
  border: 2px solid #66ffff;
  position: absolute;
  top: 0;
  left: 0;
}
.left-top-title-center {
  padding: 0 15px;
  width: 130px;
  height: 26px;
  background: url("../../assets/BioSafety/u1719.svg") no-repeat;
  background-size: 100% 100%;
  line-height: 26px;
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.left-top-title-icon {
  width: 20px;
  height: 20px;
  background: url("../../assets/Zoology/u5069.svg") no-repeat;
  position: relative;
  top: 5px;
  cursor: pointer;
}
.left-top-title-right {
  width: 325px;
  height: 26px;
  background: url("../../assets/BioSafety/u1718.svg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.left-top-title-right::after {
  content: "";
  height: 85%;
  border: 2px solid #66ffff;
  position: absolute;
  top: 0;
  right: 0;
}
/* 左上 - 点击下拉按钮后的选择框 */
.left-top-select {
  position: absolute;
  top: 35px;
  left: -340px;
  border: 2px solid #66ffff;
  border-radius: 5px;
  padding: 15px 10px;
  display: flex;
  z-index: 100;
  background-color: rgba(15, 21, 43, 0.6);
}
/* 左上 - 滑动 */
.left-top-content {
  /* height: 90%; */
  height: calc(100% - 26px);
  overflow: hidden;
}
/* 左中 */
.left-middle {
  width: 100%;
  height: 30%;
}
/* 左下 */
.left-bottom {
  background-color: rgb(228, 32, 32);
  width: 100%;
  height: 26.3%;
  display: flex;
}

.flex-center {
  width: 50%;
  height: 100%;
}
/** 右边 */
.right {
  width: 55%;
  height: 100%;
}
/* 右上 */
.right-top {
  height: 70%;
  width: 100%;
  /* box-sizing: border-box; */
  /* background-color: red; */
  padding-left: 25px;
}
.kuang {
  width: 100%;
  height: 100%;
  background: url("../../assets/BioSafety/kuang.png") no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding: 30px 30px 45px 30px;
}
/* 右下 */
.right-bottom {
  display: flex;
  background: rgb(3, 16, 50);
  height: 25%;
}
.right-bottom-left {
  width: 50%;
  border-right: 2px solid #66ffff;
}
.right-bottom-right {
  margin-left: 10px;
  width: 50%;
}
.zooFlex {
  height: 40px;
  width: 100%;
}
</style>
