@import '~amos-framework/lib/styles/mixins/scrollbar.scss';

$item-initial: #15653d; // 初始
$item-fourfive: #0078ef; // 4/5 级
$item-fourfive-tint: #0063c6; // 4/5 级 弱色 （边框、线条、圆点）
$item-three: #ffcc2a; // 3级
$item-three-tint: #fd9a2d; // 3级 弱色 （边框、线条、圆点）
$item-two: #ff5a20; // 2级
$item-two-tint: #f03d00; // 2级 （边框、线条、圆点）
$item-one: #f42828; // 1级
$item-one-tint: #d90b0b; // 1级 （边框、线条、圆点）

@mixin create-mapitem($level, $color, $tintColor) {
  .face-#{$level} {
    fill: $color;
    stroke: none;
  }

  .line-#{$level} {
    stroke: $tintColor;
    stroke-dasharray: 5, 5;
    fill: none;
    stroke-miterlimit: 10;
  }

  .dot-#{$level} {
    fill: $tintColor;
    stroke: $tintColor;
  }

  .edge-#{$level} {
    fill: $tintColor;
    stroke: none;
  }
}

%scrollbar {
  @include pretty-scrollbar(
    4px,
    4px,
    #2e7ab9,
    #0febff,
    2px
  );
}

.ccs-risk-situation,
.ccs-on-risk-situation {
  width: 100%;
  height: 100%;

  &-side {
    display: inline-block;
    width: 20%;
    height: 99%;
    vertical-align: top;
  }

  &-content {
    display: inline-block;
    width: 60%;
    height: 100%;
    padding-bottom: 10px;

    .ccs-com-screencard {
      height: calc(65% - 10px);
      margin-bottom: 10px;
    }

    &-bottom {
      display: flex;
      height: calc(35% - 10px);
      margin-bottom: 10px;

      .ccs-com-screencard {
        width: 50%;
        height: 100%;
        margin-bottom: 10px;
      }
    }
  }

  &-table {
    color: white;
    background: linear-gradient(180deg, rgba(154, 203, 251, 0.24) 0%, rgba(225, 238, 255, 0.36) 54%, rgba(157, 183, 223, 0.1) 54%, rgba(63, 117, 209, 0) 100%);
    border: 1px solid #6fc2e2;

    &-title {
      margin-bottom: 4px;
      margin-left: 8px;
      font-family: 'SourceHanSansCN-Medium';
      font-size: 18px;
      font-weight: 500;
      line-height: 27px;
      color: blue;
      text-align: left;
      text-overflow: ellipsis;
    }
  }

  &-left {
    width: 100%;
    height: 100%;
    padding-left: 8px;

    .ccs-com-screencard {
      height: calc(65% - 10px);
      margin-bottom: 10px;

      &:last-child {
        height: calc(35% - 10px);
      }
    }

    &-sitmap {
      position: relative;
      width: 100%;
      height: 100%;

      .situation-map {
        @include create-mapitem('initial', $item-initial, $item-initial);
        @include create-mapitem('fourfive', $item-fourfive, $item-fourfive-tint);
        @include create-mapitem('three', $item-three, $item-three-tint);
        @include create-mapitem('two', $item-two, $item-two-tint);
        @include create-mapitem('one', $item-one, $item-one-tint);

        .info-name {
          fill: white;
          font-size: 12px;
          stroke: none;
        }

        .info-value {
          fill: white;
          font-size: 12px;
          font-weight: bold;
          stroke: none;
        }
      }

      .situation-map-legend {
        position: absolute;
        right: 10px;
        bottom: 20px;
        width: 100px;
        height: 150px;

        .situation-map-legend-item {
          height: 30px;
          line-height: 10px;
          color: white;
          text-align: left;

          .situation-map-legend-block {
            float: left;
            width: 15px;
            height: 10px;
            margin-right: 20px;
          }
        }
      }

      .situation-item {
        fill: #03a9f4;
        cursor: pointer;

        &:focus,
        &:hover {
          fill: #2c95c5;
          outline: 0;
        }

        &[aria-checked='true'] {
          fill: #203957;
        }
      }

      .svg-tooltip-content {
        position: absolute;
        width: auto;
        padding: 0 10px;
        margin-top: -8%;
        margin-left: -25%;
        border-radius: 10px;
      }

      .svg-toolkit {
        height: 100%;
        padding-left: 20px;
      }
    }

    &-chart {
      display: flex;
      width: 99%;
      height: 99%;

      &-pie {
        width: 33.33%;
        height: 80%;
        padding-right: 10px;
        text-align: center;

        &-value {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          &-right {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            flex-direction: initial;
            margin-top: -25px;

            &-p1 {
              font-size: 32px;
              font-weight: 600;
              line-height: 32px;
              color: #54dbff;
            }

            &-p2 {
              padding-top: 10px;
              padding-left: 10px;
              font-size: 18px;
              font-weight: 600;
              line-height: 18px;
              color: #d32029;
            }

            &-p3 {
              padding-top: 5px;
              font-size: 18px;
              line-height: 18px;
              color: #e7d025;
            }
          }
        }
      }
    }
  }

  &-right {
    width: 100%;
    height: 100%;
    padding-right: 8px;

    .ccs-com-screencard {
      height: calc(100% - 10px);
      margin-bottom: 10px;
    }

    &-chart {
      width: 99%;
      height: 99%;
    }
  }

  &-video-detail {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-gap: 2vh;
    width: 100%;
    height: 85%;
    padding: 20px;
  }
}

// 一行展示溢出...
.ccs-comtablelist .amos-table-pro tr.amos-table-row td {
  height: 2.1vw;
  padding: 0;
  font-size: 0.9vw;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border-right: 1px solid rgba(41, 152, 225, 0.2);
}

.ccs-comtablelist-longtext {
  display: inline-block;
  width: 195px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccs-com-screencard-header {
  display: flex;
  align-items: center;
  // width: 60%;
  height: 60px;
  padding-left: 0.6vw;
  overflow: hidden;
  font-size: 1.02vw;
  font-weight: bold;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;

  > span {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .amos-search {
    flex: 1;
    position: relative;
    top: -8px;
    height: 20px;
    min-width: 0;
    margin-right: 3px;
    margin-left: 60px;

    input {
      width: 100%;
      height: 100%;
      color: white;
      background: rgba(15, 235, 255, 0.2);
      border-radius: 10px;
    }

    i {
      display: inline-block;
      align-items: center;
      height: 100%;
      font-size: 12px;
    }
  }
}

.ccs-disaster-dynamicinfo-details {
  padding: 10px 20px 10px 10px;
}

.ccs-long-header {
  .ccs-com-screencard-header {
    span {
      max-width: 260px;
    }
  }
}
