.chartConfig {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;


  .controlRow {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    height: 44px;
    padding: 6px;
    background: #ffffff;

    .leftBtn {
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;

      &:hover {
        color: #1685FF;
        opacity: 0.8;
      }
    }
  }

  .contentWrapper {
    flex: 1;
    width: 100%;
    display: flex;
    column-gap: 8px;
    overflow: hidden;

    :global {
      .@{ant-prefix}-form-item {
        margin-bottom: 8px;
      }

      .@{ant-prefix}-input-number {
        width: 100%;
      }
    }

    .leftLayout {
      flex: 1;
      height: 100%;
      padding: 8px;
      background: #fff;
      overflow: auto;

      .layoutWrapper {
        width: 100%;
        height: 100%;
        display: flex;


        .chartWrapper {
          display: flex;
          column-gap: 8px;
          flex: 1;
          overflow: hidden;

          .chartItem {
            border: 1px dashed #3d3d3d;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            &.activeChart {
              //background: #1685FF;
              border-color: #1685FF;
              color: #fff;
            }
          }
        }

        .tableWrapper {
          border: 1px dashed #3d3d3d;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

        // 上下布局
        &.columnLayout {
          flex-direction: column;
          row-gap: 8px;

          .tableWrapper {
            width: 100%;
            height: 50%;
          }

          .chartWrapper {
            width: 100%;
            flex: 1;
            .chartItem {
              //flex: 1;
              width: 100%;
              border: 1px dashed #333;
              &.activeChart {
                border-color: #1685FF;
                color: #fff;
              }
            }
          }
        }

        // 左右布局
        &.rowLayout {
          column-gap: 8px;

          .chartWrapper {
            display: flex;
            flex-direction: column;
            row-gap: 8px;

            .chartItem {
              //flex: 1;
              width: 100%;
              border: 1px dashed #333;
              &.activeChart {
                border-color: #1685FF;
                color: #fff;
              }
            }
          }
        }
      }


    }

    .rightPanel {
      flex: none;
      width: 500px;
      height: 100%;
      background: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .configForm {
        width: 100%;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .titleWrap {
          display: flex;
          height: 40px;
          flex: none;
          justify-content: center;
          align-items: center;
          background: #1685FF;
          color: #ffffff;
        }

        .tableFormWrap {
          flex: none;
        }

        .commonTitle {
          position: relative;
          padding-left: 20px;

          &::before {
            position: absolute;
            top: 50%;
            left: 8px;
            transform: translateY(-50%);
            content: '';
            width: 3px;
            height: 14px;
            background: #1685FF;
          }
        }

        .saveBtnWrap {
          flex-direction: row-reverse;
          column-gap: 4px;
          padding: 0 12px;
          margin-top: 8px;
          align-items: center;
        }

        .chartFormWrap {
          flex: 1;
          overflow: auto;

          .pointerEvents {
            pointer-events: none;
          }
        }
      }


      .submitWrap {
        width: 100%;
        height: 40px;
        flex: none;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      }

    }
  }
}
