@import "~@/assets/style/global.less";

// ------- 全屏状态的header ------- //
.header {
  position  : absolute;
  left      : 0;
  top       : 0;
  width     : 100%;
  background: #000;
  z-index   : 1;
  opacity   : 0.9;

  .logoContainer {
    display : inline-block;
    width   : 400px;
    height  : 48px;
    position: relative;

    &::before {
      content      : '';
      position     : absolute;
      top          : 0;
      left         : 0;
      width        : 100%;
      height       : 100%;
      background   : #000;
      border-radius: 0 0 10px 10px;
      transform    : perspective(15px) rotateX(-3deg);
      z-index      : -1;
    }

    .imgContainer {
      position       : absolute;
      left           : 0;
      top            : 0;
      width          : 100%;
      height         : 100%;
      display        : flex;
      align-items    : center;
      justify-content: center;
      padding        : 12px 50px;
      transform      : translateZ(100px);

      img {
        max-width : 100%;
        max-height: 100%;
      }
    }
  }
}

// ------- 地图容器 ------- //


// ------- 地图 ------- //
// 正常地图
.map {
  width     : 100%;
  height    : 100%;
  background: #0D1F37;
  position  : relative;
  z-index   : 0;

  // 设备
  .markerContainer {
    position: relative;
    width   : 0;
    height  : 0;

    &:hover {
      .deviceName {
        display: inline-block;
      }
    }

    .deviceIcon {
      width   : 0.14rem;
      height  : 0.16rem;
      position: absolute;
      left    : -0.07rem;
      bottom  : 0;
      z-index : 1;
    }

    .deviceName {
      height       : 0.22rem;
      position     : absolute;
      left         : 0.13rem;
      top          : 50%;
      transform    : translate(0, calc(-50% - 0.09rem));
      background   : #fff;
      padding      : 0 0.10rem;
      border-radius: 0.28rem;
      display      : none;
      line-height  : 0.22rem;
      font-size    : 0.12rem;
      white-space  : nowrap;
      z-index      : 1;
    }
  }

  .homeDeviceMarker {
    z-index: 7;

    &.checked {
      z-index: 8;
    }

    &.event {
      z-index: 9;
    }

    .commonContainer {
      .markerContainer()
    }

    .checkedContainer {
      .markerContainer();

      // 箭头
      .arrow {
        width        : 0.12rem;
        height       : 0.13rem;
        box-sizing   : border-box;
        border-top   : 0.13rem solid #5181FF;
        border-bottom: none;
        border-left  : 0.06rem solid transparent;
        border-right : 0.06rem solid transparent;
        position     : absolute;
        left         : -0.06rem;
        bottom       : 0.19rem;
      }

      // 选中状态圆环
      .baseCircle {
        width        : 0.24rem;
        height       : 0.18rem;
        position     : absolute;
        left         : -0.12rem;
        top          : -0.09rem;
        box-sizing   : border-box;
        border       : 0.02rem solid #5181ff;
        border-radius: 50%;

        &::before {
          content      : '';
          width        : 0.52rem;
          height       : 0.42rem;
          position     : absolute;
          left         : 50%;
          top          : 50%;
          transform    : translate(-50%, -50%);
          display      : inline-block;
          background   : rgba(81, 129, 255, 0.2);
          border-radius: 50%;
        }
      }
    }

    .eventContainer {
      .markerContainer();

      // 箭头
      .arrow {
        width          : 0.42rem;
        height         : 0.47rem;
        box-sizing     : border-box;
        background     : url("../../img/home/arrow-event.gif");
        background-size: 100% 100%;
        position       : absolute;
        left           : -0.21rem;
        bottom         : 0.19rem;
      }

      // 事件状态圆环
      .baseCircle {
        width          : 0.52rem;
        height         : 0.42rem;
        position       : absolute;
        left           : -0.26rem;
        top            : -0.21rem;
        background     : url("../../img/home/map_gif.gif");
        background-size: 100% 100%;
      }
    }
  }

  // 视频
  .videoContainer {
    position       : absolute;
    left           : 50%;
    transform      : translate(-50%);
    bottom         : 0.40rem;
    width          : 3.46rem;
    height         : 1.96rem;
    overflow       : hidden;
    box-sizing     : border-box;
    border         : 0.02rem solid rgba(81, 129, 255, 0.64);
    background     : rgba(81, 129, 255, 0.64);
    border-radius  : 0.04rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    z-index        : 1;
    animation      : show 0.5s linear;
    transition     : width 0.5s, height 0.5s, bottom 0.5s, border 0.5s, background 0.5s;

    @keyframes show {
      0% {
        width : 0;
        height: 0;
      }

      50% {
        width : 0;
        height: 1.96rem;
      }

      100% {
        width : 3.46rem;
        height: 1.96rem;
      }
    }

    .videoContent {
      position       : relative;
      width          : 100%;
      height         : 100%;
      overflow       : hidden;
      display        : flex;
      align-items    : center;
      justify-content: center;
      z-index        : 1;

      video {
        flex         : none;
        width        : 3.40rem;
        height       : 1.92rem;
        border-radius: 0.04rem;
      }
    }

    .loading {
      position       : absolute;
      left           : 0;
      top            : 0;
      width          : 100%;
      height         : 100%;
      z-index        : 0;
      display        : flex;
      align-items    : center;
      justify-content: center;

      &::before {
        position     : relative;
        content      : '';
        display      : inline-block;
        width        : 0.15rem;
        height       : 0.15rem;
        border-radius: 50%;
        background   : #2ad296;
        z-index      : 1;
        margin-right : 0.25rem;
        animation    : loading 1s infinite ease-in-out alternate-reverse;
      }

      &::after {
        position     : relative;
        content      : '';
        display      : inline-block;
        width        : 0.15rem;
        height       : 0.15rem;
        border-radius: 50%;
        background   : #2460df;
        z-index      : 2;
        animation    : loading-reverse 2s infinite ease-in-out;
      }

      @keyframes loading {
        from {
          left: 0;
        }

        to {
          left: 0.4rem;
        }
      }

      @keyframes loading-reverse {
        0% {
          left   : -0.4rem;
          z-index: 2;
        }

        49% {
          z-index: 2;
        }

        50% {
          left   : 0;
          z-index: 0;
        }

        51% {
          z-index: 0
        }

        100% {
          left   : -0.4rem;
          z-index: 0;
        }

      }
    }

    .videoClose {
      position       : absolute;
      right          : 0.10rem;
      top            : 0.10rem;
      width          : 0.22rem;
      height         : 0.22rem;
      z-index        : 10;
      border-radius  : 50%;
      background     : rgba(0, 0, 0, 0.75);
      display        : flex;
      align-items    : center;
      justify-content: center;
      opacity        : 0.8;
      z-index        : 1;

      &:hover {
        opacity: 1;
      }

      .videoButton {
        width : 0.10rem;
        height: 0.10rem;
      }
    }
  }

  .homeDeviceVideo {
    z-index: 10;

    .checkedContainer {
      .videoContainer();

      .eventType {
        display: none;
      }
    }

    .eventContainer {
      .videoContainer();

      bottom    : 0.70rem;
      border    : 0.02rem solid rgba(49, 26, 26, 0.8);
      background: rgba(252, 57, 57, 0.8);

      .eventType {
        position     : absolute;
        left         : 0.1rem;
        top          : 0.1rem;
        display      : inline-block;
        color        : #fff;
        background   : rgba(252, 57, 57, 0.8);
        padding      : 0.01rem 0.10rem;
        font-size    : 0.12rem;
        border-radius: 0.6rem;
      }
    }
  }
}

.deviceNoticeMap {
  position: absolute;
  left    : 0;
  top     : 0;
  width   : 100%;
  height  : 100%;
  color   : #fff;
  z-index : 1;
}

// 没有绑定区域的地图
.noticeMap {
  position       : relative;
  width          : 100%;
  height         : 100%;
  background     : url("../../img/home/screen-bg.png");
  background-size: 100% 100%;
  color          : #fff;
  z-index        : 0;
}

.noticeContainer {
  width          : 6.30rem;
  height         : 6.46rem;
  position       : absolute;
  left           : 50%;
  top            : 50%;
  transform      : translate(-50%, -50%);
  background     : rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.22rem);
  padding        : 0.69rem 0.38rem;

  .noticeTitle {
    &>div {
      text-align: center;

      &:first-child {
        font-weight: 600;
        font-size  : 0.32rem;
      }

      &:last-child {
        font-size: 0.18rem;
        opacity  : 0.6;
      }
    }
  }

  .noticeContent {
    margin-top: 0.76rem;

    ul li {
      &.noticeContentItem {
        display        : flex;
        align-items    : center;
        justify-content: flex-start;
        padding        : 0 0.52rem 0.22rem;
        margin-bottom  : 0.30rem;
        border-bottom  : 0.01rem solid rgba(196, 196, 196, 0.1);

        &:last-child {
          border-bottom: none;
        }

        .imgContainer {
          width          : 0.66rem;
          height         : 0.66rem;
          display        : flex;
          align-items    : center;
          justify-content: center;
          margin-right   : 0.40rem;

          & img {
            width : 100%;
            height: 100%;
          }
        }

        .message {
          div {
            text-align: left;

            &:first-child {
              font-weight: 600;
              font-size  : 0.24rem;
              opacity    : 0.7;
            }

            &:last-child {
              font-size: 0.18rem;
              opacity  : 0.6;
            }
          }
        }
      }
    }
  }
}

// ------- 左侧图表信息栏 ------- //
.leftDashboard {
  font-family: DIN-Medium, "PingFang SC", Arial, "Microsoft YaHei", sans-serif;
  position   : absolute;
  left       : 0;
  top        : 0;
  width      : 3.55rem;
  min-width  : 270px;
  height     : 100%;
  box-sizing : border-box;
  padding    : 0.12rem 0.32rem 0.36rem;
  background : linear-gradient(90.2deg, #0D1728 4.78%, rgba(13, 23, 40, 0.9) 75.87%, rgba(13, 23, 40, 0) 101.98%);
  color      : #fff;
  z-index    : 1;
  animation  : dashboardShow 0.5s linear;

  @keyframes dashboardShow {
    from {
      left: -3.56rem;
    }

    to {
      left: 0;
    }
  }

  .dashboardContent {
    width          : 100%;
    height         : 100%;
    overflow       : hidden;
    display        : flex;
    justify-content: space-between;
    flex-direction : column;

    &>div {
      flex: none;
    }


    // 时间
    .timeFormat {
      display        : flex;
      align-items    : center;
      justify-content: space-between;

      .timeFormatMax {
        font-size: 0.16rem;
      }

      .timeFormatMin {
        font-size: 0.24rem;
      }
    }


    // 设备统计
    .deviceInfoList {
      display        : flex;
      align-items    : center;
      justify-content: space-between;
      margin         : 0;

      .deviceItem {
        display        : flex;
        flex-direction : column;
        align-items    : flex-start;
        justify-content: flex-start;
      }
    }

    // 今日事件统计和环比
    .total {
      height            : 0.82rem;
      // padding        : 0.10rem 0.10rem 0;
      display           : flex;
      flex-direction    : row;
      align-items       : center;
      justify-content   : space-between;
      font-size         : 0.14rem;
      font-weight       : 500;
      color             : rgba(255, 255, 255, 0.6);
      margin-top        : 0.12rem;

      .totalIconContainer {
        width          : 0.72rem;
        height         : 0.72rem;
        display        : flex;
        align-items    : center;
        justify-content: center;

        img {
          width : 100%;
          height: 100%;
        }
      }

      .totalCount {
        height         : 100%;
        display        : flex;
        flex-direction : column;
        align-items    : flex-start;
        justify-content: flex-end;
        padding-bottom : 0.09rem;

        &>span {
          &.countTitle {
            font-size: 0.14rem;
          }

          &:last-child {
            margin-top : 0.04rem;
            font-size  : 0.42rem;
            line-height: 0.38rem;
            color      : #fff;
          }
        }
      }

      .percent {
        height         : 100%;
        display        : flex;
        flex-direction : column;
        align-items    : flex-start;
        justify-content: flex-end;
        padding-bottom : 0.04rem;

        .percentTitle {
          font-size: 0.12rem;
        }

        .span {
          &:last-child {
            font-size: 0.14rem;
            color    : #fff;
          }
        }

        .arrow {
          content      : '';
          display      : inline-block;
          width        : 0.10rem;
          height       : 0.08rem;
          box-sizing   : border-box;
          border-top   : 0.08rem solid #2BEC99;
          border-left  : 0.05rem solid transparent;
          border-right : 0.05rem solid transparent;
          border-bottom: 0 solid #2BEC99;
          margin-right : 0.05rem;
        }

        .less {
          color: #2BEC99;

          &::before {
            .arrow();
          }
        }

        .larger {
          color: #FC3939;

          &::before {
            .arrow();
            border-top   : 0 solid #FC3939;
            border-bottom: 0.08rem solid #FC3939;
          }
        }

      }
    }

    // 今日事件分布
    .statisticsContainer {
      height        : 100%;
      display       : flex;
      flex-direction: column;

      .statisticsListContainer {
        width          : 100%;
        flex-direction : column;
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        margin-bottom  : 0;

        .statisticsItem {
          width          : 100%;
          display        : flex;
          align-items    : center;
          justify-content: space-between;
          margin-bottom  : 0.05rem;
          flex           : none;

          .index {
            width       : 0.10rem;
            min-width   : 10px;
            margin-right: 0.10rem;
            font-size   : 0.16rem;
            flex        : none;
          }

          .name {
            width       : 0.60rem;
            min-width   : 60px;
            text-align  : left;
            font-size   : 0.14rem;
            margin-right: 0.10rem;
            flex        : none;
            color       : rgba(255, 255, 255, 0.8);
          }
        }
      }


    }


    // 近一周事件趋势
    .tendencyChartContainer {
      height: 1.32rem;

      :global {
        .tendency-chart-tooltip {
          border     : none !important;
          box-shadow : 0 0.01rem 0.10rem rgba(26, 224, 160, 0.2) !important;
          font-size  : 0.12rem !important;
          padding    : 0 !important;
          font-weight: bold !important;

          .tendency-chart-tooltip-value {
            background   : #16FFB5;
            padding      : 0.05rem;
            border-radius: 0.29rem;
            min-width    : 0.38rem;
            font-family  : DIN-Medium;
          }
        }
      }
    }

    .xAxis {
      font-size      : 0.10rem;
      display        : flex;
      justify-content: space-between;
      color          : rgba(255, 255, 255, 0.6);

      &>span {
        display       : flex;
        flex-direction: column;
        align-items   : center;

        &:first-child {
          align-items: flex-start;
        }

        &:last-child {
          align-items: flex-end;
        }
      }
    }

    // 近一周多发点位排行
    .carouselContainer {
      height  : 100%;
      position: relative;
      left    : 0;

      .nearlyEventList {
        height         : 100%;
        margin         : 0;
        display        : flex;
        align-items    : center;
        flex-direction : column;
        justify-content: flex-start;
        overflow       : hidden;


        li {
          width          : 100%;
          height         : 0.32rem;
          display        : flex;
          align-items    : center;
          justify-content: space-between;

          .eventName {
            display        : flex;
            align-items    : center;
            justify-content: flex-start;
            flex           : none;
            max-width      : 2.20rem;

            .seriesNumber {
              display      : inline-block;
              width        : 0.24rem;
              height       : 0.24rem;
              font-size    : 0.16rem;
              line-height  : 0.24rem;
              box-sizing   : border-box;
              background   : #6E7389;
              border-radius: 0.08rem;
              margin-right : 0.15rem;
              flex         : none;
              text-align   : center;

              &.top3 {
                background: #FC3939;
              }
            }

            .deviceName {
              font-size    : 0.14rem;
              color        : rgba(255, 255, 255, 0.8);
              white-space  : nowrap;
              text-overflow: ellipsis;
              overflow     : hidden;
              text-align   : left;
            }
          }

          .eventCount {
            width      : 0.60rem;
            text-align : right;
            font-size  : 0.18rem;
            font-weight: bold;
            color      : #fff;
            flex       : none;
          }
        }
      }
    }

  }
}

// ------- 右侧监控状态 ------- //
.monitorComponent {
  position       : absolute;
  right          : 0;
  top            : 0.50rem;
  width          : 2.16rem;
  height         : 0.74rem;
  padding        : 0 0.11rem;
  border-radius  : 0.37rem 0 0 0.37rem;
  box-sizing     : border-box;
  color          : #fff;
  background     : linear-gradient(90.58deg, rgba(81, 129, 255, 0.62) 13.01%, rgba(81, 129, 255, 0) 112.93%);
  backdrop-filter: blur(0.04rem);
  z-index        : 1;
  display        : flex;
  align-items    : center;
  justify-content: flex-start;
  animation      : monitorShow 0.5s linear;

  @keyframes monitorShow {
    from {
      right: -2.17rem;
    }

    to {
      right: 0;
    }
  }

  &.monitorComponentEvent {
    background: linear-gradient(90.1deg, rgba(252, 58, 57, 0.8) 9.35%, rgba(252, 58, 57, 0.288) 99.94%);
  }

  // 三圈环
  .animation {
    position    : relative;
    width       : 0.54rem;
    height      : 0.54rem;
    display     : inline-block;
    margin-right: 0.10rem;
    background  : #1A1A25;

    // 外圈
    border       : 0.01rem solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;


    &.event {
      box-shadow: inset 0 0 0.1rem 0.01rem rgba(252, 57, 57, 0.5);
      border    : 0.01rem solid #FC3939;
      animation : flicker 0.5s linear infinite alternate;

      @keyframes flicker {
        from {
          box-shadow: inset 0 0 0.10rem 0.01rem rgba(252, 57, 57, 0.9);
        }

        to {
          box-shadow: inset 0 0 0.10rem 0.01rem rgba(252, 57, 57, 0.2);
        }
      }
    }

    // 中圈
    &::before {
      left  : calc(50% - 0.19rem);
      top   : calc(50% - 0.19rem);
      width : 0.38rem;
      height: 0.38rem;
      .circle();
    }

    // 内圈
    &::after {
      left  : calc(50% - 0.10rem);
      top   : calc(50% - 0.10rem);
      width : 0.20rem;
      height: 0.20rem;
      .circle();
    }



    .circle {
      position     : absolute;
      content      : '';
      display      : inline-block;
      background   : transparent;
      box-sizing   : border-box;
      border       : 0.01rem solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      z-index      : 2;
    }



    .animationContainer {
      display      : inline-block;
      background   : transparent;
      position     : absolute;
      left         : calc(50% - 0.19rem);
      top          : calc(50% - 0.19rem);
      width        : 0.38rem;
      height       : 0.38rem;
      border-radius: 50%;
      animation    : rotateAnimate 2s linear infinite;

      &.eventContainer {
        background: conic-gradient(rgba(252, 57, 57, 0), rgba(252, 57, 57, 0), rgba(252, 57, 57, 0.1), rgba(252, 57, 57, 0.3), #FC3939);
      }

      &.eventContainer::after {
        background: #FC3939;
      }

      &.monitoringContainer {
        background: conic-gradient(rgba(252, 57, 57, 0), rgba(252, 57, 57, 0), rgba(252, 57, 57, 0), rgba(252, 57, 57, 0), #5181FF, #00FFBF; );
      }

      &.monitoringContainer::after {
        background: #00FFBF;
      }

      &:after {
        content      : '';
        display      : inline-block;
        width        : 0.06rem;
        height       : 0.06rem;
        border-radius: 50%;
        position     : absolute;
        left         : calc(50% - 0.03rem);
        top          : calc(50% - 0.03rem);
      }
    }

    @keyframes rotateAnimate {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }
  }

  .message {
    font-weight: bold;
    font-size  : 0.14rem;
    color      : #fff;
  }
}


// ------- 地图控件按钮 ------- //
.mapControlTools {
  width          : 0.36rem;
  position       : absolute;
  right          : 0.27rem;
  bottom         : 0.44rem;
  z-index        : 1;
  color          : rgba(255, 255, 255, 0.8);
  display        : flex;
  align-items    : center;
  flex-direction : column;
  justify-content: space-between;

  &>div {
    width        : 0.36rem;
    border-radius: 0.08rem;
    background   : rgba(255, 255, 255, 0.3);
    box-sizing   : border-box;
  }

  .bearing {
    width          : 0.48rem;
    height         : 0.48rem;
    margin-bottom  : 0.10rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : transparent;
    cursor         : pointer;

    img {
      width : 100%;
      height: 100%;
    }
  }

  .switchDimension {
    height    : 0.66rem;
    padding   : 0.03rem 0.03rem;
    box-sizing: border-box;

    &>span {
      display    : inline-block;
      width      : 0.30rem;
      height     : 0.30rem;
      font-weight: bold;
    }

    :global {
      .buttons {
        .button {
          &:first-child {
            .hover-title();

            &::before {
              content: '平面地图';
              right  : 0.27rem;
            }
          }

          &:last-child {
            .hover-title();

            &::before {
              content: '3D地图';
              right  : 0.27rem;
            }
          }
        }
      }
    }
  }

  .zoomControl {
    height         : 0.72rem;
    padding        : 0.05rem 0;
    margin-top     : 0.08rem;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    align-items    : center;

    span {
      width        : 0.24rem;
      height       : 0.24rem;
      display      : inline-block;
      line-height  : 0.22rem;
      font-size    : 0.20rem;
      cursor       : pointer;
      opacity      : 0.7;
      border-radius: 0.08rem;

      img {
        width : 100%;
        height: 100%;
      }

      &:hover {
        opacity: 1;
      }

      &.separate {
        opacity   : 1;
        height    : 0.01rem;
        background: rgba(255, 255, 255, 0.21);
      }

      &:first-child {
        .hover-title();

        &::before {
          content: '放大';
          right  : 0.24rem;
        }
      }

      &:last-child {
        .hover-title();

        &::before {
          content: '缩小';
          right  : 0.24rem;
        }
      }
    }
  }

  .focus {
    height         : 0.36rem;
    border-radius  : 0.08rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-top     : 0.08rem;
    cursor         : pointer;

    img {
      width  : 0.23rem;
      height : 0.23rem;
      opacity: 0.7;
    }

    &:hover {
      img {
        opacity: 1;
      }
    }

    .hover-title();

    &::before {
      content: '回到初始位置';
    }
  }

  .fullScreen {
    height         : 0.36rem;
    border-radius  : 0.08rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-top     : 0.08rem;
    cursor         : pointer;

    img {
      width  : 0.18rem;
      height : 0.18rem;
      opacity: 0.7;
    }

    &:hover {
      img {
        opacity: 1;
      }
    }

    .hover-title();

    &::before {
      content: '全屏';
    }
  }

  .exitFullScreen {
    .fullScreen();

    &::before {
      content: '退出全屏';
    }
  }
}

// hover显示信息
.hover-title {
  position: relative;

  &::before {
    position     : absolute;
    top          : 50%;
    transform    : translate(0, -50%);
    right        : 0.30rem;
    padding      : 0 0.05rem;
    background   : rgba(0, 0, 0, 0.75);
    border-radius: 0.35rem;
    white-space  : nowrap;
    display      : none;
    font-size    : 0.12rem;
  }

  &:hover {
    &::before {
      display: inline-block;
    }
  }
}