<template>
  <!-- 中控大屏 -->
  <div class="center_control">
    <el-dialog title="提示" :visible.sync="controlVisible" :show-close="false" fullscreen @closed="dialogClose">
      <template slot="title">
        <!--Waves Container-->
        <div class="header">
          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
              <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
            </defs>
            <g class="parallax">
              <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
              <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
              <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
            </g>
          </svg>
          <div class="head_control">
            <div class="fun_btn1">
              <div class="title_head_rol center_in" :class="item.flag ? 'active_bgcolor' : ''"
                v-for="(item,index) in list" :key="index" @click="selectRol(item)">{{item.title}}</div>
            </div>
            <div class="fun_btn">
              <i class="el-icon-full-screen icon_fun" @click="experMode"></i>
              <i class="el-icon-switch-button icon_fun" @click="close"></i>
            </div>
          </div>
        </div>
        <!--Waves end-->
      </template>
      <div class="card_control">
        <div class="map_card" v-loading="mapLoading">
          <div id="container"></div>
        </div>
        <div class="card_bottom_control" :class="logisticsFlag ? 'height_300' : 'height_30'">
          <div style="cursor: pointer;" class="center_in" @click="clickImg">
            <el-image :class="logisticsFlag ? '' : 'overturn'" style="height: 29px;width: 40px;flex: none;"
              :src="require('@/assets/images/unfold.png')"></el-image>
          </div>
          <div style="width: 100%;height: calc(100% - 30px);" v-if="logisticsFlag">
            <div class="card_unpack_control">
              <div style="display: flex;align-items: center;">
                <div style="width: 260px;margin-right: 10px;">
                  <el-input size="small" v-model="incubatorName" placeholder="请输入内容"
                    @input="incubatorSearch"></el-input>
                </div>
                <!-- <el-date-picker size="small" v-model="value1" type="datetimerange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker> -->
              </div>
              <div>
                <el-button type="primary" size="small" @click="examine" v-if="currentId == 1">查看实时数据</el-button>
              </div>
            </div>
            <div class="history_warp" v-loading="tableLoading">
              <el-table ref="multipleTable" :data="tableData" :highlight-current-row="currentId == 2 ? true : false"
                height="calc(100% - 51px)" border style="width: 100%" @selection-change="handleSelectionChange"
                @cell-click="selectIncubator" :key="currentId">
                <el-table-column type="selection" width="55" v-if="currentId == 1"></el-table-column>
                <el-table-column type="index" width="50" v-else></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="sn" label="SN"></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column prop="T_t" label="当前地址"></el-table-column>
                <el-table-column prop="T_t" label="最新温度"></el-table-column>
                <el-table-column prop="T_time" label="最新记录时间"></el-table-column>
              </el-table>
              <div v-if="Total">
                <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
                  @changeCurrent="changeCurrent">
                </pagination>
              </div>
            </div>
          </div>
          <div class="track_visit scale-up-tr" v-if="currentId == 2 && playbackControl">
            <div class="playback">轨迹回放控制</div>
            <div class="card_cartoon">
              <div class="cartoo_title center_in margin_10" @click="startAnimation()">开始动画</div>
              <div class="cartoo_title center_in" @click="pauseAnimation()">暂停动画</div>
              <div class="cartoo_title center_in margin_10" @click="resumeAnimation()">继续动画</div>
              <div class="cartoo_title center_in" @click="stopAnimation()">停止动画</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card_right_information" v-if="currentId == 2" v-loading="timeLoading">
        <div class="hide_information center_in" v-if="!optionFlag && trackCircle" @click="reelect">
          <span class="iconfont icon-guiji"></span>
        </div>
        <div class="information_card scale-up-tr" v-if="optionFlag && timeData.length > 0">
          <div class="card_time_box" v-for="(item,index) in timeData" :key="index" @click="getTrack(item)">
            <div class="sn_card_box">{{item.sn}}</div>
            <div class="box_time">{{item.start_time}}</div>
            <div class="box_time">{{item.end_time}}</div>
          </div>
        </div>
        <div class="information_card" v-else-if="optionFlag && timeData.length == 0">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getCoolerBox,
    getCoolerBoxLocus,
    getHistoryLocus,
    getNewlocus
  } from '@/api/incubator'
  import pagination from '@/components/pagination'
  export default {
    name: 'centerControl',
    props: {
      // 表格label数据
      // tableData: {
      //   type: Array,
      //   default: () => [],
      // },
    },
    components: {
      pagination,
    },
    data() {
      return {
        fullScreen: false,
        input: '',
        value1: '',
        unpackFlag: true,
        logisticsFlag: true,
        list: [{
          id: 1,
          flag: true,
          title: '实时监控',
        }, {
          id: 2,
          flag: false,
          title: '历史轨迹',
        }],
        controlVisible: false,
        map: null,
        currentId: 1,
        incubatorData: [],
        incubatorID: null,
        optionFlag: true,
        timeData: [],
        polyline: null,
        passedPolyline: null,
        marker: null,
        endMarker: null,
        trackList: [],
        trackPlayback: null,
        playbackControl: false,
        trackCircle: false,
        Total: 0,
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },

        eventSource: [],
        incubatorSn: [],
        jointSn: [],
        realTimeTrajectory: [],
        carMarker: [],
        mapLoading: false,
        tableData: [],
        tableLoading: false,
        incubatorName: '',
        timeLoading: false,
      }
    },
    computed: {
      classOption() {
        return {
          limitMoveNum: 10,
          singleHeight: 42,
          waitTime: 2000,
        };
      },
    },
    watch: {
      // tableData: {
      //   handler(newVal) {
      //     let arr = newVal
      //     arr.forEach((item) => {
      //       if (item.id == this.incubatorID) {
      //         item.flag = true
      //       } else {
      //         item.flag = false
      //       }
      //     })
      //     this.incubatorData = arr
      //   },
      //   immediate: true,
      //   deep: true // 开启深度监听
      // },
    },
    mounted() {
      // this.keyUpSearch()
    },
    methods: {
      // 搜索保温箱
      incubatorSearch() {
        this.getList()
      },
      // 获取保温箱列表
      getList() {
        this.tableLoading = true
        var params = {
          page: this.Pagination.PageIndex,
          pageSize: this.Pagination.PageSize,
          showTemp: true,
          name: this.incubatorName,
        }
        getCoolerBox(params).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.Total = res.data.count
          }
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
      selectRol(event) {
        if (this.currentId != event.id) {
          if (event.id == 1) {
            this.playbackControl = false
            this.keyUpSearch()
          } else {
            this.historicalRoute()
          }
        }
        this.list.forEach(item => {
          if (item.id == event.id) {
            this.currentId = event.id
            item.flag = true
            this.Pagination.PageIndex = 1
            this.Pagination.PageSize = 10
            this.getList()
          } else {
            item.flag = false
          }
        })
        this.$forceUpdate
      },
      // 展开收起
      getUnpack() {
        this.unpackFlag = false
      },
      close() {
        this.controlVisible = false
      },
      // 选择
      handleSelectionChange(event) {
        let arr = []
        event.forEach(item => {
          arr.push(item.sn)
        })
        this.incubatorSn = arr
        // console.log(arr, 35)
      },
      // 查看实时数据
      async examine() {
        const that = this
        that.realTimeTrajectory = []

        function difference(arr1, arr2) {
          return arr1.filter(item => !arr2.includes(item));
        }
        const uniqueToFirstArray = difference(that.incubatorSn, that.jointSn);
        const uniqueToFirstArray1 = difference(that.jointSn, that.incubatorSn);
        uniqueToFirstArray1.forEach(ique => {
          that.jointSn = deleteElementById(that.jointSn, ique)

          function deleteElementById(arr, id) {
            return arr.filter((item) => item !== id);
          }
          if (that.carMarker[ique].marker) {
            that.carMarker[ique].marker.setMap(null)
          }
          if (that.carMarker[ique].startMarker) {
            that.carMarker[ique].startMarker.setMap(null)
          }
          if (that.carMarker[ique].polyline) {
            that.carMarker[ique].polyline.setMap(null)
          }
          that.eventSource[ique].close()
          that.carMarker[ique] = null
        })
        that.jointSn = that.incubatorSn
        const userData = localStorage.getItem('userList')
        const deptId = JSON.parse(userData)
        that.map.setFitView(null, false, [150, 60, 100, 60])
        if (that.incubatorSn.length > 0) {
          for (let i = 0; i < uniqueToFirstArray.length; i++) {
            const T_sn = uniqueToFirstArray[i]
            // 处理 SSE 流
            that.mapLoading = true
            that.eventSource[T_sn] = await new EventSource(
              `http://182.43.247.65:6280/api/waybill/newlocus?T_sn=${T_sn}&id=${deptId.dept.id}`);
            that.eventSource[T_sn].onopen = function(e) {
              // console.log('Connection to SSE opened.', e);
            };
            that.eventSource[T_sn].onmessage = function(e) {
              // console.log('Message from SSE stream:', e.data);
              const arr = JSON.parse(e.data)
              if (arr.code == 200) {
                // 判断数组对象中是否存在该对象
                let index = that.realTimeTrajectory.findIndex((item) => item.sn === arr.sn);
                // 如果有就替换，没有就添加
                if (index !== -1) {
                  that.realTimeTrajectory.splice(index, 1, arr);
                } else {
                  that.realTimeTrajectory.push(arr);
                }
                that.realTimeTrajectory.forEach(event => {
                  that.initMarker(event.data[0], event)
                })
              } else {
                that.jointSn = deleteElementById(that.jointSn, T_sn)

                function deleteElementById(arr, id) {
                  return arr.filter((item) => item !== id);
                }
                that.$message.error(arr.msg);
                that.eventSource[T_sn].close()
              }
              that.mapLoading = false
            };
            that.eventSource[T_sn].onerror = function(e) {
              that.mapLoading = false
              console.error('Error from SSE stream:', uniqueToFirstArray[i], e);
            };
          }
        } else {
          that.$message({
            message: '请选择保温箱',
            type: 'warning'
          });
        }
      },
      // 初始化坐标点的icon
      initMarker(location, item) {
        let latitude = location.T_site.split(',')
        let dataList = item.data
        var trackList = []
        var positions = item.data
        if (positions.length > 0) {
          positions.forEach(item => {
            if (item.T_site != '0,0' && item.T_site) {
              const data = item.T_site.split(',')
              let arrTrack = [Number(data[0]), Number(data[1])]
              trackList.push(arrTrack)
            }
          })
        }
        // 生成坐标点icon
        if (this.carMarker[item.sn]) {
          if (this.carMarker[item.sn].marker) {
            this.carMarker[item.sn].marker.setPosition([Number(latitude[0]), Number(latitude[1])])
          }
          if (this.carMarker[item.sn].polyline) {
            this.carMarker[item.sn].polyline.setPath(trackList)
          }
        } else {
          // 创建一个 起点Icon
          var startIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-9, -3)
          });
          let icon = new AMap.Icon({
            size: new AMap.Size(40, 45),
            image: require(`@/assets/images/truck.png`),
            imageSize: new AMap.Size(40, 45),
          });
          this.carMarker[item.sn] = {
            marker: null,
            polyline: null,
            startMarker: null,
          }
          // 坐标点 生成方法
          this.carMarker[item.sn].marker = new AMap.Marker({
            icon: icon, // 坐标点图标
            position: [Number(latitude[0]), Number(latitude[1])], // 左边点的经纬度
            offset: new AMap.Pixel(0, -30) // 坐标点偏移量
          });
          // 起点
          var startArr = positions[positions.length - 1].T_site.split(',')
          this.carMarker[item.sn].startMarker = new AMap.Marker({
            icon: startIcon, // 坐标点图标
            position: [Number(startArr[0]), Number(startArr[1])], // 左边点的经纬度
            offset: new AMap.Pixel(-11, -28) // 坐标点偏移量
          });
          // 点标记显示内容，HTML要素字符串
          var markerContent = '' +
            '<div class="incubator_card_map">' +
            '   <div class="map_title_incu">保温箱1</div>' +
            '   <div class="map_title_incu1">' + item.sn + '</div>' +
            '   <div class="map_title_incu1">最新温度: <span>' + location.T_t + '</span></div>' +
            '   <div class="map_title_incu2">记录时间: ' + location.T_time + '</div>' +
            '   <div class="map_title_incu2">当前地址: ' + location.T_time + '</div>' +
            '   <div class="map_arrows"></div>' +
            '</div>';
          this.carMarker[item.sn].marker.setLabel({
            offset: new AMap.Pixel(-7, -68),
            content: markerContent,
            direction: 'center',
          })
          this.carMarker[item.sn].polyline = new AMap.Polyline({
            map: this.map,
            path: trackList,
            showDir: true,
            strokeColor: "#28F", //线颜色
            strokeWeight: 10, //线宽
            strokeStyle: "solid",
            lineJoin: 'round',
            lineCap: 'round',
          });
          this.carMarker[item.sn].marker.setMap(this.map)
          this.carMarker[item.sn].startMarker.setMap(this.map)
        }
        this.map.setFitView(null, false, [150, 60, 100, 60])
      },
      keyUpSearch() {
        var that = this
        // var positions = this.trackList;
        that.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 2,
        });
        that.map.setFitView()
      },
      // 历史轨迹
      historicalRoute() {
        var that = this
        that.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 2,
        });
        that.map.setFitView()
      },
      // 选择保温箱
      selectIncubator(event) {
        this.$refs.multipleTable.toggleRowSelection(event);
        this.incubatorID = event.id
        if (this.currentId == 2) {
          event.flag = true
          this.optionFlag = true
          this.getBoxLocus(event.id)
        }
      },
      // 重选时间段轨迹
      reelect() {
        this.optionFlag = true
      },
      // 获取保温箱历史时间段
      getBoxLocus(boxID) {
        this.timeLoading = true
        getCoolerBoxLocus({
          id: boxID,
        }).then(res => {
          if (res.code == 200 && res.data.list != null) {
            this.timeData = res.data.list
          } else {
            this.timeData = []
          }
          this.timeLoading = false
        }).catch(() => {
          this.timeLoading = false
        })
      },
      // 获取保温箱历史轨迹
      getTrack(event) {
        if (this.marker) {
          this.marker.stopMove();
        }
        getHistoryLocus({
          sn: event.sn,
          start_time: event.start_time,
          end_time: event.end_time,
          t_id: event.t_id,
          page: 1,
          page_z: 999,
        }).then(res => {
          if (res.code == 200) {
            var trackList = []
            var positions = res.data
            if (positions.length > 0) {
              positions.forEach(item => {
                if (item.T_site != '0,0' && item.T_site) {
                  const data = item.T_site.split(',')
                  trackList.push(data)
                }
              })
            }
            if (this.polyline) {
              this.polyline.setMap(null); // 移除轨迹
            }
            this.polyline = null
            if (this.passedPolyline) {
              this.passedPolyline.setMap(null)
            }
            this.passedPolyline = null
            if (this.marker) {
              this.marker.setMap(null)
            }
            this.marker = null
            if (this.endMarker) {
              this.endMarker.setMap(null)
            }
            this.endMarker = null
            this.trackList = trackList
            this.optionFlag = false
            this.trackCircle = true
            this.initMap(trackList)
          }
        })
      },
      // 历史轨迹
      initMap(arr) {
        // 聚焦到标记点位置的方法
        // this.map.setZoomAndCenter(10, arr[0].split(','))
        var marker, positions = arr
        const that = this
        setTimeout(() => {
          // 地图渲染完成后修改zoom
          that.map.setZoom(14);
          const num = positions.length
          // 创建一个 终点icon
          var endIcon = new AMap.Icon({
            size: new AMap.Size(25, 34),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-95, -3)
          });
          if (positions.length > 0) {
            // 终点
            that.endMarker = new AMap.Marker({
              position: positions[num - 1],
              icon: endIcon,
              offset: new AMap.Pixel(-13, -30),
            });
            that.map.add(that.endMarker);
          }
          var truckIcon = new AMap.Icon({
            size: new AMap.Size(40, 45),
            image: require(`@/assets/images/truck.png`),
            imageSize: new AMap.Size(40, 45),
          });
          that.marker = new AMap.Marker({
            map: that.map,
            position: positions[0],
            icon: truckIcon,
            offset: new AMap.Pixel(-13, -23),
            autoRotation: true,
          });
          // 绘制轨迹
          that.polyline = new AMap.Polyline({
            map: that.map,
            path: positions,
            showDir: true,
            strokeColor: "#28F", //线颜色
            strokeWeight: 10, //线宽
            strokeStyle: "solid",
            lineJoin: 'round',
            lineCap: 'round',
          });
          that.passedPolyline = new AMap.Polyline({
            map: that.map,
            strokeColor: "#AF5", //线颜色
            strokeWeight: 10, //线宽
            strokeOpacity: .7,
            strokeStyle: "solid",
            lineJoin: 'round',
            lineCap: 'round',
          });
          that.map.add(that.polyline);
          that.map.setFitView(null, false, [150, 60, 100, 60]);
          that.marker.on("moving", function(e) {
            that.passedPolyline.setPath(e.passedPath);
          });
          that.playbackControl = true
        }, 500)
      },
      // 开始动画
      startAnimation() {
        var num = this.trackList.length * 3
        this.optionFlag = false
        this.marker.moveAlong(this.trackList, num);
      },
      // 暂停动画
      pauseAnimation() {
        this.marker.pauseMove();
      },
      // 继续动画
      resumeAnimation() {
        this.marker.resumeMove();
      },
      // 停止动画
      stopAnimation() {
        this.marker.stopMove();
      },
      destroyMap() {
        this.map && this.map.destroy();
      },
      clickImg() {
        if (this.logisticsFlag) {
          this.logisticsFlag = false
        } else {
          this.logisticsFlag = true
        }
      },
      // 全屏
      experMode() {
        const full = localStorage.getItem('fullScreen')
        if (full == 'true' || full == true) {
          this.fullScreen = false
          localStorage.setItem("fullScreen", this.fullScreen);
          this.exitFullscreen()
        } else {
          this.fullScreen = true
          localStorage.setItem("fullScreen", this.fullScreen);
          let element = document.documentElement;
          this.launchFullscreen(element);
        }
      },
      // 全屏
      launchFullscreen(element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.mozRequestFullscreen) {
          element.mozRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      },
      // 推出全屏
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      },
      // 弹窗关闭
      dialogClose() {
        if (this.incubatorSn.length > 0) {
          this.incubatorSn.forEach(item => {
            if(this.eventSource[item]){
              this.eventSource[item].close()
            }
          })
        }
        this.map = null
        this.currentId = 1
        this.list.forEach((item) => {
          if (item.id == 1) {
            item.flag = true
          } else {
            item.flag = false
          }
        })
        this.logisticsFlag = true
      },
      changeSize(val) {
        this.Pagination.PageSize = val
        this.getList()
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        this.getList()
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .amap-marker-label {
    border: unset !important;
    padding: 0px !important;
    background-color: unset !important;
  }

  .center_control ::v-deep .el-dialog__header {
    padding: 0px !important;
  }

  .center_control ::v-deep .el-dialog__body {
    padding: 0px !important;
  }

  #container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .head_control {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 50px;
    padding: 0px 20px 0px 20px;
    z-index: 2025;
    border-bottom: 1px solid #ffffff;
    // background-image: linear-gradient(to top, #209cff 0%, #68e0cf 100%);
    background: linear-gradient(60deg, rgba(32, 156, 255, .5) 0%, rgba(0, 172, 193, .5) 100%);
  }

  .fun_btn1 {
    display: flex;
    align-items: flex-end;
  }

  .fun_btn {
    height: 50px;
    display: flex;
    align-items: center;
  }

  .title_head_rol {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    height: 40px;
    padding: 0px 15px;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* 标准语法 */
  }

  .active_bgcolor {
    // background-color: #18a966;
    // background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
    background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  }

  .icon_fun {
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    margin-left: 10px;
  }

  .card_control {
    position: absolute;
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
  }



  .map_card {
    width: 100%;
    // height: 100%;
    flex: 1;
  }

  .card_bottom_control {
    position: relative;
    border-top: 1px solid #DCDFE6;
    background-color: #ffffff;
  }

  .height_300 {
    height: 300px;
  }

  .height_30 {
    height: 30px;
  }

  .card_unpack_control {
    padding: 0px 10px 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .history_warp {
    height: calc(100% - 35px);
    width: 100%;
    overflow: hidden;
  }

  .overturn {
    transform: rotate(180deg);
  }

  .header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(0, 172, 193, 1) 0%, rgba(84, 58, 183, 1) 100%);
    color: white;
  }

  .waves {
    position: relative;
    width: 100%;
    height: 50px;
    margin-bottom: -7px;
  }

  .parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
  }

  .parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }

  .parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }

  .parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }

  .parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }

  @keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }

    100% {
      transform: translate3d(85px, 0, 0);
    }
  }

  /*Shrinking for mobile*/
  @media (max-width: 768px) {
    .waves {
      height: 40px;
      min-height: 40px;
    }

    .content {
      height: 30vh;
    }

    h1 {
      font-size: 24px;
    }
  }

  ::v-deep .incubator_card_map {
    position: relative;
    width: 180px;
    background-color: #fff;
    border: 1px solid #DCDFE6;
    padding: 5px;
    border-radius: 8px;
  }

  ::v-deep .map_title_incu {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
  }

  ::v-deep .map_title_incu1 {
    font-size: 14px;

    span {
      font-weight: bold;
      color: #67C23A;
    }
  }

  ::v-deep .map_title_incu2 {
    font-size: 12px;
    margin: 2px 0px;
  }

  ::v-deep .map_arrows {
    position: absolute;
    bottom: 0px;
    left: 90px;
  }

  ::v-deep .map_arrows::before {
    position: absolute;
    content: '';
    border-top: 11px #DCDFE6 solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
    border-bottom: 10px transparent solid;
  }

  ::v-deep .map_arrows::after {
    position: absolute;
    content: '';
    border-top: 10px #fff solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
    border-bottom: 10px transparent solid;
  }

  .card_right_information {
    position: absolute;
    top: 60px;
    right: 10px;
  }

  .information_card {
    width: 260px;
    max-height: 400px;
    overflow: hidden auto;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .hide_information {
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    span {
      color: #009efd;
      font-size: 30px;
    }
  }

  .track_visit {
    position: absolute;
    right: 10px;
    top: -130px;
    width: 240px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;

    .playback {
      font-size: 15px;
      padding-bottom: 10px;
    }
  }

  .card_cartoon {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cartoo_title {
    cursor: pointer;
    margin-bottom: 8px;
    width: 7rem;
    color: #25A5F7;
    border: 1px solid #25A5F7;
    border-radius: 30px;
    padding: 2px 0px;
  }

  .margin_10 {
    margin-right: 10px;
  }

  .card_time_box {
    cursor: pointer;
    padding: 6px 10px;
    border-bottom: 1px solid #E4E7ED;
  }

  .sn_card_box {
    font-size: 16px;
    font-weight: bold;
  }

  .box_time {
    font-size: 14px;
  }

  .scale-up-tr {
    -webkit-animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }

  @-webkit-keyframes scale-up-tr {
    0% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: 100% 0%;
      transform-origin: 100% 0%;
    }

    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: 100% 0%;
      transform-origin: 100% 0%;
    }
  }

  @keyframes scale-up-tr {
    0% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: 100% 0%;
      transform-origin: 100% 0%;
    }

    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: 100% 0%;
      transform-origin: 100% 0%;
    }
  }
</style>
