<!--
 * @Author: your name
 * @Date: 2021-10-21 17:51:22
 * @LastEditTime: 2021-11-22 10:25:05
 * @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">
          <swiper style="height: 600px;  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>
        </div>
      </div>
      <div class="left-middle">
        <chart-board
          :title=" roomName + '用水量'"
          :ifDate="true"
          @emitDates="getWaterDates">
          <chart-line :data="waterData" :id="1"></chart-line>
        </chart-board>
      </div>
      <div class="left-bottom">
        <chart-board
          :title=" roomName + '整栋用电量'"
          :ifDate="true"
          @emitDates="getElecDates">
          <chart-line-and :data="waterData" :id="2"></chart-line-and>
        </chart-board>
      </div>
    </div>

    <div class="right">
      <div class="right-top">
        <div class="kuang"></div>
      </div>
      <div class="right-bottom">
        <div class="right-bottom-left">
          <chart-board
            :title=" roomName + '温度'"
            @emitDates="getWaterDates">
            <chart-line :data="tempData" :id="4"></chart-line>
          </chart-board>
        </div>
        <div class="right-bottom-right">
          <chart-board
            :title=" roomName +'湿度'"
            @emitDates="getWaterDates">
            <chart-line :data="rhData" :id="5"></chart-line>
          </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} from "@/utils/api";
import { timeDate, Debounce } from "@/utils";

export default {
  name: "Zoology",
  components: {
    SelectBlock,
    SelectColumn,
    swiper,
    swiperSlide,
    SwiperContent,
    ChartBoard,
    ChartLine,
    ChartLineAnd
  },
  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: ['07-01', '07-02', '07-03', '07-04', '07-05'],
        yAxisName: '吨',
        yAxisData: [37.1, 37.4, 36.8, 37.9, 34.2]
      },
      tempData: {
        xAxisName: '',
        xAxisData: [],
        yAxisName: '℃',
        yAxisData: [],
      },
      rhData: {
        xAxisName: '',
        xAxisData: [],
        yAxisName: 'RH',
        yAxisData: [],
      },
      roomName: '',
      elecDates: [] // 用电量时间
    }
  },
  computed: {
    swipers() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    init() {
      getEnv({}).then(res => {
        if(res.code === 10000) {
          this.swiperData = 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) {
          this.setTempAndRh(res.data);
        }
      })
      let params1 = {
        roomId: id,
        endDate: timeDate(new Date().getTime()),
        type: 2
      }
      getListWater(params1).then(res => {
        if(res.code === 10000) {
          this.setWeather(res.data);
        }
      })
    }),

    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(item.value);
      })
      data.humidities.forEach(item => {
        this.rhData.xAxisData.push(item.createTime);
        this.rhData.yAxisData.push(item.value);
      })
    },
    setWeather(data) {
      this.waterData.xAxisData = [];
      this.waterData.yAxisData = [];
      data.data.forEach(item => {
        this.waterData.xAxisData.push(item.createTime);
        this.waterData.yAxisData.push(item.value)
      })
    },
    initData() {
      getByRoom({}).then(res => {
        if(res.code === 10000) {
          this.setTempAndRh(res.data);
        }
      })
      let params1 = {
        endDate: timeDate(new Date().getTime()),
        type: 2
      }
      getListWater(params1).then(res => {
        if(res.code === 10000) {
          this.setWeather(res.data);
        }
      })
    },
    onEnter() {
      this.swipers.autoplay.stop();
    },
    onLeave() {
      this.swipers.autoplay.start();
    },
  },
  mounted() {
    this.init()
    this.initData();
  }
}
</script>

<style scoped>
.zoology {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}

/** 左边 */
.left {
  /* background-color: #fff; */
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/* 左上 */
.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: 30%;
}

/** 右边 */
.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;
}
/* 右下 */
.right-bottom {
  display: flex;
  background: rgb(3,16,50);
}
.right-bottom-left {
  width: 50%;
  border-right: 2px solid #66FFFF;
}
.right-bottom-right {
  margin-left: 10px;
  width: 50%;
}
</style>
