@import "./commons/index";

$tp-top-height: 56px;
$tp-aside-width: 88px;
$tp-aside-con-width: 360px;
$tp-aside-selected-color: #2560b1;
$tp-attribute-width: 320px;
$tp-attribute-header-height: 40px;

.le-tp-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;

  i[class*=" tp-"], i[class^=tp-], [class*=" le-tp-icon-"], [class^=le-tp-icon-] {
    font-family: "LeTpFont", serif;
  }

  &.le-tp-wrapper-border {
    border: 1px solid rgba(0, 0, 0, 0.12);
  }

  .le-tp-container {
    display: flex;
    height: 100%;
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;

    &.le-flex-column {
      flex-direction: column;
    }
  }

  .le-tp-size {
    width: 100%;
    height: 100%;
    max-height: 100vh;
  }

  .le-tp-header {
    height: $tp-top-height;
    line-height: $tp-top-height;
    background-color: rgba(247, 248, 250, 1);
    box-shadow: inset 0px -1px 0px 0px rgba(222, 222, 222, 1);
  }

  .le-tp-header-con {
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: none;
    padding: 0 20px;
    user-select: none;
    -webkit-user-select: none;
  }

  .le-tp-tool-col {
    display: flex;
    align-items: center;
  }

  .le-tp-btn-item {
    display: flex;
    margin: 0 4px;
    position: relative;
  }

  .le-tp-btn-dropdown {
    height: 32px;
    line-height: 1;
  }

  .le-tp-btn {
    padding: 0 7.5px;
    //width: 32px;
    height: 32px;
    line-height: 1;
    text-align: center;
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #eee;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;

    & + .le-tp-btn {
      margin: 0;
    }

    > i {
      font-size: 18px;
      color: #666;
      line-height: 1;
    }

    &:hover {
      background-color: #f1f1f1;
      border: 1px solid #eee;

      > i {
        color: $tp-aside-selected-color;
        font-weight: bold;
      }
    }

    &:focus {
      background-color: #fff;
      border: 1px solid #eee;

      > {
        color: #666;
      }
    }

    &.is-active {
      color: #409EFF;
      border-color: #c6e2ff;
      background-color: #ecf5ff;

      > i {
        font-weight: bold;
      }
    }
  }

  .le-tp-aside {
    display: block;
    width: $tp-aside-width + $tp-aside-con-width;
    height: 100%;
    //flex: 0 0 $tp-aside-width + $tp-aside-con-width;
    position: relative;
    transition: all .1s;
    user-select: none;
    -webkit-user-select: none;

    &.le-tp-overflow {
      overflow: hidden;
    }
  }

  .le-tp-main {
    display: block;
    flex: 1 1 auto;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-top: 0;
    border-bottom: 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
  }

  .le-tp-attribute {
    display: block;
    width: $tp-attribute-width;
    height: 100%;
    background-color: #fff;
    overflow: auto;

    .le-tp-upload {

      .avatar-uploader-icon {
        height: 118px;
        line-height: 118px;
      }

      .el-upload {
        border-radius: 2px;
      }
    }

    * {
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }
  }

  .le-tp-attribute-card {
    height: inherit;

    .el-tabs__header {
      margin: 0;
      background-color: #f7f8fa;
    }

    .el-tabs__content {
      height: calc(100% - 40px);
      overflow: auto;
    }

    .el-tab-pane {
      height: 100%;
      overflow: auto;
    }

    .el-tabs__nav-wrap {

      &::after {
        height: 1px;
        background-color: rgba(0, 0, 0, 0.12);
      }
    }

    .el-tabs__nav {

      .el-tabs__active-bar {
        display: none !important;
      }

      .el-tabs__item {
        position: relative !important;
        padding: 0 15px !important;

        &.is-active {
          background-color: #fff;
          //color: $tp-aside-selected-color;

          &::after {
            display: block;
            width: 100%;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            //background-color: $tp-aside-selected-color;
            background-color: #409EFF;
            z-index: 1;
            transition: transform .3s cubic-bezier(.645, .045, .355, 1);
            list-style: none;
          }
        }
      }
    }

    .le-tp-attribute-body {
      padding: 15px 10px;

      &:before, &:after {
        content: " "; // 1
        display: table; // 2
      }

      &:after {
        clear: both;
      }
    }
  }

  .le-tp-body {
    //height: calc(100% - #{$tp-top-height});
    position: relative;
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .le-tp-canvas {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);

    .g6-grid-container {
      z-index: 0 !important;
    }

    canvas {
      position: relative;
      z-index: 90;
    }
  }


  .le-tp-tabs-aside {
    width: $tp-aside-width + $tp-aside-con-width + 20px;
    height: inherit;

    .el-tabs__header {
      width: $tp-aside-width;
      height: inherit;
      margin: 0 !important;
      background-color: #fff;

      &.is-right {
        float: left;
      }
    }

    .el-tabs__content {
      width: $tp-aside-con-width + 20;
      height: inherit;
      margin: 0 !important;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-top: 0;
      border-bottom: 0;
      padding: 0 18px 0 0;
      -moz-padding-end: 19px;
      overflow: auto;
    }

    .el-tabs__nav-wrap {

      &::after {
        width: 0 !important;
      }

      &.is-right {
        margin: 0;
      }
    }

    .el-tabs__nav-wrap, .el-tabs__nav, .el-tabs__item {
      width: $tp-aside-width;
    }

    .le-tab-con {
      width: $tp-aside-con-width;
    }

    .el-tabs__nav-scroll {
      width: $tp-aside-width + 20px;
      overflow-y: auto;
    }

    .el-tabs__active-bar {
      background-color: $tp-aside-selected-color;

      &.is-left, &.is-right {
        width: 2px;
      }
    }

    .el-tabs__item {
      display: flex !important;
      align-items: center;
      height: $tp-aside-width;
      line-height: 1;
      padding: 0;

      &:hover {
        background-color: rgba(225, 237, 251, 0.7);
        color: $tp-aside-selected-color;
      }

      &.is-active {
        background-color: #e1edfbff;
        color: $tp-aside-selected-color;
      }

      .le-tab-a {
        text-align: center;
        flex: 1;
      }

      .le-tab-icon {
        display: block;
        font-size: 26px;
        margin-bottom: 10px;
      }

      .le-tab-txt {
        display: block;
        font-size: 14px;
      }
    }
  }


  .le-tp-collapse {
    border-top: 0;
    border-bottom: 0;

    .el-collapse-item__header {
      height: 40px;
      line-height: 40px;
      background-color: #fdfdfd;
      padding-left: 10px;
      font-size: 14px;
      color: #666666;

      &.is-active {
        border-bottom: 1px solid #ebeefd;
      }
    }

    .el-collapse-item__content, .le-tp-draggable-collapse {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .el-collapse-item__content {
      padding: 6px;
      -moz-padding-start: 5px;
      -moz-padding-end: 5px;
    }

    .le-tp-collapse-item {

      &:first-child {

        .el-collapse-item__header {
          border-top: 1px solid #ebeefd;
        }
      }
    }
  }

  .le-tp-ele-group {
    display: flex;
    align-items: center;
    width: 112px;
    height: 112px;
    cursor: pointer;
    border: 1px solid #dedede;
    background-color: #f7f8fa;
    margin: 2px;

    &:hover {
      background-color: rgba(225, 237, 251, 0.7);

      .tp-icon, .tp-ele-txt {
        color: $tp-aside-selected-color;
      }
    }

    .le-tp-ele-con {
      text-align: center;
      flex: 1;
    }

    .tp-icon {
      display: block;
      font-size: 48px;
      color: $tp-aside-selected-color;
      margin-bottom: 2px;
    }

    .tp-ele-txt {
      display: block;
      font-size: 14px;
      color: #666;
    }
  }


  .le-tp-empty {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;

    .le-tp-empty-con, .el-empty {
      flex: 1;
    }
  }


  .le-tp-search-con {
    display: flex;
    flex-direction: row;
    padding: 15px;

    .el-input__inner {
      height: 36px;
      border-radius: 2px;
      border: 1px solid #dedede;
    }

    .le-tp-input-col {
      flex: 1;
    }

    .le-tp-btn-col {
      margin-left: 15px;
    }
  }

  .le-tp-btn-upload {
    width: 36px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    border-radius: 2px;
    background-color: $tp-aside-selected-color;
    text-align: center;

    > .tp-icon {
      color: #fff;
      font-size: 18px;
    }

    &:hover {
      background-color: rgba(37, 96, 177, 0.7);
    }
  }

  .line {
    text-align: center;
    line-height: 28px;
  }

  .le-tp-attr-content {

    .el-collapse-item__content {
      padding: 15px 8px 6px 6px;
    }
  }

  .le-tp-form {

    .el-form-item__label {
      padding: 0 5px;
    }

    .el-input__inner {
      border-radius: 2px;
      padding: 0 5px;
    }


    .el-input-number--mini {
      width: unset;

      .el-input-number__decrease,
      .el-input-number__increase {
        width: 16px;
      }
    }

    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 5px;
      padding-right: 30px;
    }

    .el-form-item--mini .el-form-item__content {
      line-height: 1;
    }

    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 15px;
    }

    .le-tp-select {
      width: 100%;
    }

    .el-radio-button {

      &:first-child .el-radio-button__inner {
        border-radius: 2px 0 0 2px;
      }

      &:last-child .el-radio-button__inner {
        border-radius: 0 2px 2px 0;
      }
    }

    .le-tp-switch-item {

      .el-form-item__content {
        line-height: 26px;
      }
    }

    .le-radio-group-mini {

      .el-radio-button__inner {
        padding: 7px 12px;
      }
    }

    .el-input-group__append, .el-input-group__prepend {
      border-radius: 2px;
    }

    .el-input-group__prepend {
      width: 50px;
    }

    .el-input-group__append {
      padding: 0;
      background-color: #409EFF;
      border-color: #409EFF;
      border-radius: 0 2px 2px 0;

      button.el-button {
        margin: 0;
        color: #fff;
        width: 25px;
        height: 26px;

        > i {
          font-weight: bold;
        }
      }

      .el-button--mini {
        padding: 0;
      }
    }
  }

  .le-layer-tab-con {
    padding: 8px;
  }

  .le-layer-item {
    background-color: #fff;
    border-radius: 2px;
    padding: 5px;
    margin: 0 0 8px 0;
    box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.15);
    transition: transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9), box-shadow 200ms cubic-bezier(0.4, 1, 0.75, 0.9);

    &.is-active {
      background-color: rgba(0, 161, 255, 0.2);
    }

    .le-layer-row {
      display: flex;
      justify-content: space-between;
    }

    .le-layer-tool {
      display: flex;
      line-height: 34px;
    }

    .le-layer-drag-handle {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: move;
      height: 34px;
      line-height: 34px;
    }

    .le-layer-type {
      padding: 0 7px;
      width: 55px;

      .type {
        font-size: 14px;
        color: #1c2127;
        opacity: 0.5;
      }
    }

    .le-layer-name {
      min-width: 142px;
    }

    .le-layer-name-input .el-input__inner {
      height: 34px;
      line-height: 34px;
      border: 0 #dcdcdd;
      border-radius: 2px;
      padding: 0 5px;
      color: #1c2127;

      &:hover, &:focus {
        border: 1px solid #dcdcdd;
      }
    }

    .le-layer-btn {
      width: 34px;
      height: 34px;
      line-height: 34px;
      font-size: 18px;
      font-weight: bold;
      background: none;
      border: 0;
      padding: 0;
      user-select: none;

      &:hover {
        background: rgba(143, 153, 168, 0.15);
        box-shadow: none;
        color: #1c2127;
        text-decoration: none;
      }

      & + .el-button {
        margin-left: 0;
      }
    }
  }

  .le-tp-draggable {
    margin: 0;
  }

}

.le-tp-btn-dropdown-menu {

  &.el-popper[x-placement^=bottom] {
    margin-top: 6px;
  }

  &.el-dropdown-menu {
    padding: 6px 0;
    background-color: #fff;
    border-radius: 2px;
    user-select: none;
    border: 1px solid #ebeef5;
  }

  .le-btn-transparency {
    width: 260px;
    padding: 4px 20px;

    .le-transparency-header {
      text-align: center;
    }

    .title {
      font-size: 14px;
    }

    .el-slider__input {
      width: 60px;

      .el-input__inner {
        border-radius: 2px;
        vertical-align: middle;
        color: #1c2127;
        font-size: 14px;
        font-weight: 400;
      }
    }

    .el-slider__runway {
      margin-right: 80px;
    }
  }
}

.le-select-node-con {

  .le-job-body {
    margin: 10px -20px 0 -20px;
    padding-left: 20px;
    overflow-y: auto;
    overflow-x: hidden;

    &.le-job-height {
      height: 450px;
    }

    .le-job-paging {
      padding: 10px 0 0 0;
    }

    .le-paging {
      padding: 0;
    }
  }

  .le-job-items {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: -5px -5px 0 -5px;
  }

  .le-tp-job-group {
    display: flex;
    align-items: center;
    width: 144px;
    height: 144px;
    cursor: pointer;
    border: 1px solid #dedede;
    background-color: #f7f8fa;
    margin: 5px;

    &:hover {
      background-color: rgba(225, 237, 251, 0.7);

      .tp-icon, .tp-job-txt {
        color: $tp-aside-selected-color;
      }
    }

    .le-job-icon {
      max-height: 50px;
      overflow: hidden;
    }

    .le-tp-job-con {
      text-align: center;
      flex: 1;
      padding: 5px;
    }

    .le-job-icon {
      margin-bottom: 5px;
    }

    .tp-icon {
      display: block;
      font-size: 48px;
      //font-weight: bold;
      color: $tp-aside-selected-color;
    }

    .tp-job-txt {
      font-size: 14px;
      color: #666;
      margin-bottom: 3px;
      // 将对象作为弹性伸缩盒子模型显示。
      display: -webkit-box;
      overflow: hidden;
      // 溢出用省略号显示
      text-overflow: ellipsis;
      // 超出两行隐藏
      line-clamp: 3;
      -webkit-line-clamp: 3;
      // 从上到下垂直排列子元素
      -webkit-box-orient: vertical;
    }
  }


  .el-input__inner {
    height: 36px;
    border-radius: 2px;
    border: 1px solid #dedede;
  }
}

.le-tp-job-wrapper {
  .el-dialog__wrapper {
    position: static !important;
  }

  .le-dialog.le-select-node-dialog {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    box-shadow: 0 0 10px 2px rgba(90, 90, 90, 0.3);

    .el-dialog__header {
      height: 40px;

      .el-dialog__title {
        line-height: 40px;
        font-size: 16px;
        user-select: none;
      }

      .el-dialog__headerbtn {
        top: 12px;
      }
    }
  }
}


.le-tp-line-wrapper {
  position: fixed !important;
  z-index: 2000;

  .le-tp-line-info {
    position: fixed;
    background: #fff;
    min-width: 150px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    z-index: 2000;
    color: #606266;
    line-height: 1.4;
    text-align: justify;
    font-size: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    word-break: break-all;

    .le-tp-line-body {
      position: relative;
      padding: 12px;
    }

    &[data-position-param^=right] {
      margin-left: 12px;

      .le-tp-line-arrow {
        top: 50%;
        left: -8px;
        margin-bottom: 3px;
        border-right-color: #dfdfdf;
        border-left-width: 0;

        &::after {
          bottom: -8px;
          left: 1px;
          border-right-color: #fff;
          border-left-width: 0;
        }
      }

      .le-table {

        .el-table__header-wrapper {

          .el-table__header {

            thead tr th {
              border-top: 0;
              border-left: 0;
            }
          }
        }
      }
    }

    &[data-position-param^=left] {
      margin-right: 12px;

      .le-tp-line-arrow {
        top: 50%;
        right: -8px;
        margin-bottom: 3px;
        border-right-width: 0;
        border-left-color: #dfdfdf;

        &::after {
          right: 1px;
          bottom: -8px;
          margin-left: -8px;
          border-right-width: 0;
          border-left-color: #fff;
        }
      }
    }

    .le-tp-line-arrow {
      position: fixed;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 8px;
      filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));

      &::after {
        content: "";
        border-width: 8px;
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
      }
    }
  }
}


.le-job-line-relation-dialog {
  .el-dialog__header {
    height: 40px;

    .el-dialog__title {
      font-size: 16px;
      color: #333;
      line-height: 40px;
    }

    .el-dialog__headerbtn {
      top: 10px;
    }
  }

  .el-dialog__body {
    padding: 8px;
  }

  .le-job-line-row {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    margin-bottom: 15px;

    &.le-flex-column {
      flex-direction: column;
    }
  }

  .le-job-from, .le-job-to {
    width: 232px;
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    border: 1px solid #eee;

    .job-icon {
      padding: 16px 8px 16px 16px;
    }

    .icon-box {
      width: 64px;
      height: 64px;
      border-radius: 4px;
      background-color: #e1edfb;
      text-align: center;

      > i {
        font-size: 50px;
        color: #5c6bab;
        line-height: 64px;
      }
    }

    .job-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1 1 auto;
      padding: 16px 16px 16px 8px;

      .job-name {
        font-size: 14px;
        color: #333;
      }
    }

    .info-text {
      max-width: 118px;
      font-size: 13px;
      color: #a4a4a4;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
      word-wrap: normal;
    }
  }

  .le-job-line {
    width: 20px;

    .job-line {
      position: relative;

      > i {
        font-size: 60px;
        position: absolute;
        left: -20px;
        top: 20px;
      }
    }
  }

  .group-name {
    display: block;
    font-size: 14px;
    color: #333;
    padding: 0 10px;
  }

  .group-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 auto;
    padding: 5px 0;

    .el-input__inner, .el-textarea__inner {
      border-radius: 2px;
    }

    .le-logic-col {
      width: 100px;
      margin-right: 8px;
    }

    .le-relation-col {
      width: 160px;
    }
  }

  .le-table-col {
    width: 282px;

    & + .le-table-col {
      margin-left: 20px;
    }
  }

  .le-relate-table {

    &.el-table--border {
      border-right: 1px solid #ebeef5;
    }

    th {
      > .cell {
        font-size: 14px;
        font-weight: normal;
      }

      &.is-leaf {
        border-top: 0;
        border-right: 0;
        border-left: 1px solid #ebeef5;

        &:first-child {
          border-left: 0;
        }
      }
    }

    .el-table__empty-text {
      line-height: 1;
    }

    .el-empty {
      padding: 20px 0;
    }

    .el-empty__image {
      width: 60px;
    }

    .el-empty__description {
      margin-top: 8px;
    }
  }

  .le-btn-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin: 0 -8px -8px -8px;
    height: 55px;
    background-color: #f7f8fa;
    padding: 0;

    .le-btn {
      width: 80px;
      height: 32px;
      line-height: 32px;
      padding: 0;
      border-radius: 2px;
      margin-right: 15px;
      font-size: 14px;
      color: #fff;

      & + .le-btn {
        margin-left: 0;
      }
    }

    .le-btn-primary {
      background-color: #2560B1;

      &:hover {
        background-color: #094294;
      }
    }

    .le-btn-default {
      background-color: #fff;
      border: 1px solid #dedede;
      color: #666;

      &:hover {
        background-color: #e8e8e8;
      }
    }
  }

  .le-table .el-table__body tr.current-row > td.el-table__cell {
    background-color: #bedfeb !important;
  }
}


// 处理全局图标样式
i[class*=" tp-icon"], i[class^=tp-icon] {
  font-family: "LeTpFont", serif;
  font-style: normal;
}