<template>
  <div class="monit">
    <div class="monit-left">
      <div class="monit-title" @click="isShow = !isShow">
        <div>
          <span>配怀舍过道东&emsp;</span>
        </div>
        <div>
          <i class="icon"></i>
        </div>
      </div>
      <div v-show="isShow" class="monit-content">
        <div class="content-flex">
          <select-block :title="'一栋'">
            <template v-slot:left>
              <select-column :list="simulatedData"></select-column>
            </template>
            <template v-slot:right>
              <select-column :list="simulatedData" :floor="false" :type="1"></select-column>
            </template>
          </select-block>
        </div>
        <div class="content-flex">
          <select-block :title="'一栋'">
            <template v-slot:left>
              <select-column :list="simulatedData"></select-column>
            </template>
            <template v-slot:right>
              <select-column :list="simulatedData" :type="1"></select-column>
            </template>
          </select-block>
        </div>
        <div class="content-flex">
          <select-block :title="'一栋'">
            <template v-slot:left>
              <select-column :list="simulatedData"></select-column>
            </template>
            <template v-slot:right>
              <select-column :list="simulatedData" :type="1"></select-column>
            </template>
          </select-block>
        </div>
      </div>
    </div>
    <div class="monit-right">
      <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
        <swiper-slide v-for="item in 10" :key="item">
          <div class="case"></div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import SelectBlock from "@/views/Zoology/leftTop/SelectBlock";
import SelectColumn from "@/views/Zoology/leftTop/SelectColumn";
export default {
  name: "Monit",
  components: {
    swiper,
    swiperSlide,
    SelectBlock,
    SelectColumn
  },
  data() {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 3,
        slidesPerColumn: 1,
        slidesPerGroup: 3,
        // spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
      },
      isShow: false,
      simulatedData: [ // 左上 —— 模拟的数据
        { id: 1, name: '1' },
        { id: 2, name: '11' },
        { id: 3, name: '111' },
        { id: 4, name: '1111' },
        { id: 5, name: '11112' },
        { id: 6, name: '11111' },
        { id: 7, name: '111111' },
        { id: 8, name: '1111111' },
        { id: 9, name: '11111112' },
        { id: 10, name: '11111113' },
        { id: 11, name: '11111114' },
        { id: 12, name: '11111115' },
      ],
    }
  }
}
</script>

<style scoped>
  .monit {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
  }
  .monit-left {
    flex: 1;
    height: 100%;
    background: url("../../assets/BioSafety/kuang.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .monit-right {
    width: 450px;
    margin-left: 20px;
  }
  .case {
    width: 100%;
    height: 100%;
    background: url("../../assets/BioSafety/kuang.png") no-repeat;
    background-size: 100% 100%;
  }
  .monit-title {
    width: 300px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 50%;
    line-height: 40px;
    transform: translate(-50% , 0);
    background-color: #031032;
    text-align: center;
    color: white;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url("../../assets/Zoology/u5069.svg") no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .monit-content {
    /*width: 1180px;*/
    /*height: 300px;*/
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translate(-50% , 0);
    border: 5px solid #00FFFF;
    border-radius: 10px;
    background-color: #323232;
    display: flex;
    box-sizing: border-box;
    padding: 60px 20px;
  }
  .content-flex {
    flex: 1;
  }
</style>