@mixin create-point-status($level, $color) {
  width: 21px;
  height: 22px;

  &.point-#{$level} {
    background: $color;
  }
}

@mixin create-check-status($level, $color) {
  &.point-#{$level} {
    color: $color;
  }
}

@mixin create-popover-status($level, $color) {
  &.point-#{$level} {
    .amos-popover-content {
      background: $color;
    }
  }

  &.point-#{$level}::after {
    border-top-color: $color;
    content: '';
  }
}

.pre-control-situation {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 1920px;
  min-height: 895px;
  padding: 10px;
  // overflow: auto;

  .left-child {
    display: flex;
    flex: 1 1 75%;
    flex-direction: column;

    .top-child {
      display: flex;
      flex: 1 1 65%;

      .check-execute-header-icon {
        padding-right: 5px;
        padding-left: 10px;
      }

      .index-trend-map {
        flex: 1 1 70%;
        margin: 0 5px 10px 0;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.0980392156862745);

        .index-trend-body {
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
          }
        }

        .title {
          height: 40px;
          font-family: '微软雅黑';
          font-size: 15px;
          font-style: normal;
          font-weight: 400;
          line-height: 40px;
          text-align: left;
          background: rgba(244, 244, 244, 1);

          span {
            font-size: 15px !important;
          }
        }
      }

      .risk-statistics {
        display: flex;
        // width: 100%;
        // max-width: 387px;
        margin: 0 5px 5px;
        flex-direction: column;
        flex: 1 1 30%;

        .risk {
          flex: 1;
          min-height: 300px;
          margin-bottom: 10px;
          border-radius: 0 0 6px 6px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.0980392156862745);

          .risk-statistics-histogram {
            height: 255px;

            .title {
              height: 40px;
              font-family: '微软雅黑';
              font-size: 15px;
              font-style: normal;
              font-weight: 400;
              line-height: 40px;
              text-align: left;
              background: rgba(244, 244, 244, 1);
            }
          }
        }

        .danger {
          flex: 1;
          min-height: 300px;
          margin-bottom: 5px;
          border-radius: 0 0 6px 6px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.0980392156862745);

          .danger-statistics-histogram {
            height: 255px;

            .title {
              height: 40px;
              font-family: '微软雅黑';
              font-size: 15px;
              font-style: normal;
              font-weight: 400;
              line-height: 40px;
              text-align: left;
              background: rgba(244, 244, 244, 1);
            }
          }
        }
      }
    }

    .bottom-child {
      display: flex;
      flex: 1 1 35%;
      height: 100%;
      min-height: 255px;

      .check-execute-header-icon {
        padding-right: 5px;
        padding-left: 10px;
      }

      .risk-index-dashboard {
        display: flex;
        flex: 1 1 70%;

        .inherent-view {
          flex: 3;
          margin: 0 5px;
          margin-left: 0;
          border-radius: 0 0 6px 6px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.0980392156862745);

          .risk-degree-pie {
            display: inline-block;
            width: 100%;
            height: 240px;
            padding-bottom: 5px;

            span {
              font-family: '微软雅黑';
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              text-align: center;
            }

            .title {
              height: 40px;
              font-family: '微软雅黑';
              font-size: 15px;
              font-style: normal;
              font-weight: 400;
              line-height: 40px;
              text-align: left;
              background: rgba(244, 244, 244, 1);

              span {
                font-size: 15px !important;
              }
            }

            .risk-degree-pie1 {
              display: inline-block;
              width: 33%;
              height: calc(100% - 40px);
              text-align: center;

              .amos-echarts-container {
                height: calc(100% - 10px) !important;
              }
            }

            .risk-degree-pie2 {
              display: inline-block;
              width: 33%;
              height: calc(100% - 40px);
              text-align: center;

              .amos-echarts-container {
                height: calc(100% - 10px) !important;
              }
            }

            .risk-degree-pie3 {
              display: inline-block;
              width: 33%;
              height: calc(100% - 40px);
              text-align: center;

              .amos-echarts-container {
                height: calc(100% - 10px) !important;
              }
            }
          }
        }

        .dynamic-view {
          flex: 1;
          margin: 0 5px;
          border-radius: 0 0 6px 6px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.0980392156862745);

          .dynamic-dashboard {
            .title {
              height: 40px;
              font-family: '微软雅黑';
              font-size: 15px;
              font-style: normal;
              font-weight: 400;
              line-height: 40px;
              text-align: left;
              background: rgba(244, 244, 244, 1);
            }
          }
        }
      }

      .overdue-statistics {
        height: 100%;
        margin: 0 5px;
        flex: 1 1 30%;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.0980392156862745);

        .overdue-statistics-pie {
          height: 100%;

          .title {
            height: 40px;
            font-family: '微软雅黑';
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 40px;
            text-align: left;
            background: rgba(244, 244, 244, 1);
          }

          .content {
            display: inline-block;
            width: 100%;
            // height: 185px;
            height: calc(100% - 77.5px);
            text-align: center;

            .amos-echarts-container {
              // height: 185px !important;
            }

            span {
              font-family: '微软雅黑';
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .right-child {
    flex: 1 1 25%;

    .check-execute-root {
      height: 100%;
      margin: 0 5px;
      border-radius: 0 0 6px 6px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.0980392156862745);

      .check-execute-header {
        height: 41px;
        font-size: 15px;
        line-height: 41px;
        background-color: rgba(244, 244, 244, 1);

        .check-execute-header-icon {
          margin-right: 5px;
          margin-left: 10px;
        }

        .check-execute-header-select {
          float: right;
          width: 110px;
          margin-top: 5.5px;
        }
      }

      .check-execute-body {
        height: calc(100% - 41px);
        padding: 20px;
        overflow-y: auto;

        .execute-line-item {
          border-color: rgba(230, 230, 230, 1);
          border-style: solid;
          border-width: 1px;

          .execute-line-item-row {
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid rgba(230, 230, 230, 1);

            .execute-line-item-col {
              height: 100%;
              padding-left: 5px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              border-right: 1px solid rgba(230, 230, 230, 1);
            }

            .execute-line-item-col-2 {
              padding-left: 5px;
            }
          }

          .row-1 {
            margin-bottom: -1px;
          }

          .status-item {
            @include create-check-status('status_0', $check-color-level-0);
            @include create-check-status('status_1', $check-color-level-1);
            @include create-check-status('status_2', $check-color-level-2);
            @include create-check-status('status_3', $check-color-level-3);
          }

          .execute-line-item-row-3 {
            background-color: rgba(242, 242, 242, 1);
          }
        }

        .execute-line-item + .execute-line-item {
          margin-top: 25px;
        }

        .check-execute-pagination {
          margin-top: 30px;
          text-align: center;

          .amos-pagination-layout-right {
            .amos-pagination-paging {
              li {
                a {
                  width: 32px;
                  height: 32px;
                  margin-left: 7px;
                  font-size: 14px;
                  line-height: 32px;
                  color: #333;
                  border-color: rgba(222, 221, 222, 1);
                  border-style: solid;
                  border-width: 1px;
                  border-radius: 6px;
                }
              }

              .amos-pagination-paging-li-active a {
                color: #333;
                background-color: rgba(230, 247, 255, 1);
                border-color: rgba(28, 154, 210, 1);
                border-style: solid;
                border-width: 1px;
                box-sizing: border-box;
              }
            }
          }
        }

        .diamond-item {
          @include create-point-status('status_0', $check-color-level-0);
          @include create-point-status('status_1', $check-color-level-1);
          @include create-point-status('status_2', $check-color-level-2);
          @include create-point-status('status_3', $check-color-level-3);

          display: inline-block;
          margin-top: 5px;
          margin-left: 5px;
        }

        .diamond-item + .diamond-item {
          margin-left: 5px;
        }
      }
    }
  }
}

.diamond-popover {
  @include create-popover-status('status_0', $check-color-level-0);
  @include create-popover-status('status_1', $check-color-level-1);
  @include create-popover-status('status_2', $check-color-level-2);
  @include create-popover-status('status_3', $check-color-level-3);
}
