@import "~@/mixins.less";

.subForm {
  margin-bottom: 10px;
  position: relative;

  :global {
    .ant-form-item-row:first-child {
      height: 100%;

      >.ant-form-item-control {
        height: 100%;

        >.ant-form-item-control-input {
          height: 100%;

          >.ant-form-item-control-input-content {
            height: 100%;

            >.xlyCommonTable {
              height: 100%;

              .ant-table-wrapper:first-child {
                height: 100%;

                >.ant-spin-nested-loading {
                  height: 100%;

                  >.ant-spin-container {
                    height: 100%;

                    >.ant-table {
                      height: 100%;

                      >.ant-table-container {
                        height: 100%;
                        border-bottom: 1px solid #AAA;

                        >.ant-table-body {
                          height: calc(100% - 40px);
                        }
                      }
                    }
                  }
                }
              }
            }

            .xlyCommonTableHeight_40 {
              .ant-table-wrapper:first-child {
                >.ant-spin-nested-loading {
                  >.ant-spin-container {
                    >.ant-table {
                      >.ant-table-container {
                        >.ant-table-body {
                          height: calc(100% - 80px);
                        }
                      }
                    }
                  }
                }
              }
            }

            .xlyCommonTableHeight_80 {
              .ant-table-wrapper:first-child {
                >.ant-spin-nested-loading {
                  >.ant-spin-container {
                    >.ant-table {
                      >.ant-table-container {
                        >.ant-table-body {
                          height: calc(100% - 120px);
                        }
                      }
                    }
                  }
                }
              }
            }

            .xlyCommonTableHeight_200 {
              .ant-table-wrapper:first-child {
                >.ant-spin-nested-loading {
                  >.ant-spin-container {
                    >.ant-table {
                      >.ant-table-container {
                        >.ant-table-body {
                          height: calc(100% - 240px);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .extraAction {
    position: absolute;
    top: -30px;
    right: 0;

    .del {
      background: #fd674a;
      border: 1px solid #fd674a;

      &:hover {
        color: #fff;
        border: 1px solid #fb795f !important;
        background: #fb795f !important;
      }
    }
  }

  :global {
    .ant-table-summary {
      height: 41px;
    }
  }

  .summaryCell {
    color: red;
    font-weight: bold;
    white-space: nowrap;
    /* 合计不换行 */
    overflow: hidden;
    /*超出部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分文字以...显示*/
    display: block;
  }

  .summaryCellTotal {
    height: 40px;
    color: black;
    font-weight: bold;
    font-size: 14px;
  }
}

.disabledProup {
  .iconAdd i:hover:before {
    color: rgba(0, 0, 0, 0.43);
  }

  .editSelect>div:hover {
    border-color: transparent !important;
    background: transparent !important;
  }

  .editSelect>div:hover span {
    color: rgba(0, 0, 0, 0.25);
  }

  .editSelect>div>div>div {
    color: #000 !important;
  }

  .inputNum input:hover {
    border: 2px solid transparent !important;
    background: transparent !important;
  }

  input[disabled]:hover {
    background: none !important;
  }

  .tableDataPicker input:hover {
    border: 1px solid #e6d8d8 !important;
  }
}

.disabledProup,
.proup {
  :global {
    .ant-table-scroll>div:last-child {
      position: relative;
    }

  }
}

:global {
  .react-resizable {
    position: relative;
    background-clip: padding-box;
  }

  .react-resizable-handle {
    position: absolute;
    width: 10px;
    height: 100%;
    bottom: 0;
    right: -5px;
    cursor: col-resize;
    z-index: 1;
  }

  th[bnotresize] .react-resizable-handle {
    cursor: default;
  }

  .tableNoPadding {
    .ant-table-row {
      td {
        padding: 0 !important;
      }
    }
  }

  .vlist-td-display {
    display: none;
  }

  .virtuallist>table>tbody>tr:nth-of-type(2) {
    .vlist-td-display {
      display: table-cell;
    }
  }
}

.mesOpr {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding-right: 5px;
}

button.mesAdd {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 0;
  background-color: #52C41A;
  color: #FFF;

  &:hover,
  &:active,
  &:focus {
    background-color: #52C41A;
    color: #FFF;
  }

  &:hover {
    scale: 1.1;
  }

  &:active {
    background-color: #2f720e;
  }
}

button.mesDel {
  margin-left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 0;
  background-color: #FF4D4F;
  color: #FFF;

  &:hover,
  &:active,
  &:focus {
    background-color: #FF4D4F;
    color: #FFF;
  }

  &:hover {
    scale: 1.1;
  }

  &:active {
    background-color: #b6383a;
  }
}

button.mesDel[disabled] {
  background-color: #AAA;
  color: #FFF;

  &:hover,
  &:active,
  &:focus {
    background-color: #AAA;
    color: #FFF;
  }
}

button.mesCopy {
  margin-left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 0;
  background-color: #FAAD14;
  color: #FFF;

  &:hover,
  &:active,
  &:focus {
    background-color: #FAAD14;
    color: #FFF;
  }

  &:hover {
    scale: 1.1;
  }

  &:active {
    background-color: #7f580b;
  }
}

button.mesSave {
  margin-left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 0;
  background-color: #52C41A;
  color: #FFF;

  &:hover,
  &:active,
  &:focus {
    background-color: #52C41A;
    color: #FFF;
  }

  &:hover {
    scale: 1.1;
  }

  &:active {
    background-color: #2f720e;
  }
}

.indexNo {
  display: flex;
  align-items: center;
  justify-content: space-around;

  >div {
    display: flex;
    align-items: center;

    >div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      margin-left: 3px;
      border: 1px solid #AAA;
      color: #AAA;
      border-radius: 50%;
      cursor: default;

      &:hover {
        zoom: 1.1;
      }
    }

    .indexNoLight {
      border: 1px solid #52C41A;
      background-color: #52C41A;
      color: #FFF;
    }

    .indexNoLight1 {
      border: 1px solid #FF0000;
      background-color: #FF0000;
      color: #FFF;
    }
  }

}

.showTypePlusBtn {
  display: flex;
  gap: 2px;
  align-items: center;

  :global {
    .ant-btn {
      border-radius: 5px !important;
    }
  }
}

// 作业状态
.mesWorking {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mesTagCommon0 {
  border-radius: 5px;
  margin: 3px;
  height: 34px !important;
  min-height: 34px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.mesTagCommon {
  &:extend(.mesTagCommon0);
  border: 0 !important;
  background-color: transparent !important;
}

.mesWait {
  &:extend(.mesTagCommon);
  border: 1px solid #FF7E37;
  background-color: #FFEFE3;
  color: #FF7E37;
}

.mesPause {
  &:extend(.mesTagCommon);
  border: 1px solid #FAAD14;
  background-color: #FFFEF8;
  color: #FAAD14;
}

.mesFinish {
  &:extend(.mesTagCommon);
  border: 1px solid #52C41A;
  background-color: #F6FFED;
  color: #52C41A;
}

.mesStop {
  &:extend(.mesTagCommon);
  border: 1px solid #FFA39E;
  background-color: #FFF1F0;
  color: #F5222D;
}

.mesBlue {
  &:extend(.mesTagCommon);
  border: 1px solid #1890FF;
  background-color: #eaf4fe;
  color: #1890FF;
}

.mesGreenDark {
  &:extend(.mesTagCommon);
  border: 1px solid #00AEAE;
  background-color: #e9f6f7;
  color: #00AEAE;
}

// 标牌颜色
// 白
.mesColor0 {
  &:extend(.mesTagCommon0);
  border: 1px solid #CCC;
  background-color: #FFF;
  color: #000;
}

// 粉
.mesColor1 {
  &:extend(.mesTagCommon0);
  border: 1px solid #FFC0CB;
  background-color: #FFC0CB;
  color: #000;
}

// 青
.mesColor2 {
  &:extend(.mesTagCommon0);
  border: 1px solid #008080;
  background-color: #008080;
  color: #FFF;
}

// 蓝
.mesColor3 {
  &:extend(.mesTagCommon0);
  border: 1px solid #0000FF;
  background-color: #0000FF;
  color: #FFF;
}

// 橙
.mesColor4 {
  &:extend(.mesTagCommon0);
  border: 1px solid #FF8000;
  background-color: #FF8000;
  color: #FFF;
}

// 绿
.mesColor5 {
  &:extend(.mesTagCommon0);
  border: 1px solid #00DD00;
  background-color: #00DD00;
  color: #fff;
}

// 黄
.mesColor6 {
  &:extend(.mesTagCommon0);
  border: 1px solid #FFFF00;
  background-color: #FFFF00;
  color: #000;
}

// 红
.mesColor7 {
  &:extend(.mesTagCommon0);
  border: 1px solid #FF0000;
  background-color: #FF0000;
  color: #FFF;
}

// 标牌颜色弹窗
.labelColorModal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4列，每列等宽 */
  grid-template-rows: repeat(2, 1fr);
  /* 2行，每行等高 */
  gap: 10px;
  /* 单元格之间的间隔 */
  padding: 10px;
  /* 容器的内边距 */
  height: 100%;

  >div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    >div {
      width: 100px !important;
      height: 42px !important;
      font-size: 18px;
    }

    // 白
    .mesColor0 {
      &:hover {
        box-shadow: 0 0 5px 5px #CCC;
      }
    }

    // 粉
    .mesColor1 {
      &:hover {
        box-shadow: 0 0 5px 5px rgba(255, 192, 203, 0.5);
      }
    }

    // 青
    .mesColor2 {
      &:hover {
        box-shadow: 0 0 5px 5px rgba(0, 128, 128, 0.5);
      }
    }

    // 蓝
    .mesColor3 {
      &:hover {
        box-shadow: 0 0 5px 5px rgba(0, 0, 255, 0.5);
      }
    }

    // 橙
    .mesColor4 {
      &:hover {
        box-shadow: 0 0 5px 5px rgba(255, 128, 0, 0.5);
      }
    }

    // 绿
    .mesColor5 {
      &:hover {
        box-shadow: 0 0 5px 5px rgba(0, 221, 0, 0.5);
      }
    }

    // 黄
    .mesColor6 {
      &:hover {
        box-shadow: 0 0 5px 5px rgba(255, 255, 0, 0.5);
      }
    }

    // 红
    .mesColor7 {
      &:hover {
        box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.5);
      }
    }
  }
}

.mesBtnGreen {
  background: #52C41A;
  border-color: #52C41A;
  min-width: 60px !important;

  &:hover,
  &:active,
  &:focus {
    background: #52C41A;
    border-color: #52C41A;
  }
}

.thXunjian {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  white-space: pre-line;
  white-space: wrap;
  overflow: hidden;
  text-overflow: none;
  height: 200px;
  line-height: 20px;
  margin-left: 6px;
}

.xunjianTable {
  :global {
    .dark-record-row td {
      background-color: transparent !important;

      .ant-table-selection-column {
        background-color: transparent !important;
      }
    }

    tr.ant-table-row:hover td {
      background: transparent !important;
    }
  }
}

.xunjianCheck {
  .flex(center, center);
  .size();
  color: #52C41A;
  font-size: 24px;
  cursor: default;
  user-select: none
}

.xunjianUnCheck {
  .flex(center, center);
  .size();
  color: #FF4D4F;
  font-size: 24px;
  cursor: default;
  user-select: none
}

.xunjianEnabled {
  text-decoration: underline;
}

.circle {
  position: relative;
  top: -3px;
  border-radius: 50%;
  display: inline-block;
  font-size: 12px !important;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;

  &::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 1px solid #000;
  }
}

.specialMemo {
  color: #FF0000;
}

.lightHighRecordRow {
  :global {
    td {
      background: #ffcc4e !important;
    }
  }
}

.hideArrow {
  :global {
    .ant-select-arrow {
      display: none;
    }
  }
}

.totalDiv {
  .flex();
  font-size: 18px;
  border: 1px solid #AAA;
  border-top: none;
  padding-left: 10px;
  cursor: default;

  :global {

    .total,
    .totalName,
    .totalValue {
      margin-right: 10px;
    }

    .total {
      color: #1890ff;
      font-weight: bold;
      font-size: 20px;
    }

    .totalName {
      font-weight: bold;
      position: relative;
      padding-left: 10px;

      &:before {
        content: "";
        display: inline-block;
        border: 1px solid #52C41A;
        background-color: #52C41A;
        width: 6px;
        height: 6px;
        position: absolute;
        top: 17px;
        left: 0;
        border-radius: 50%;
      }
    }
  }
}