@import '../../style/variables.less';

.pro-upload {
  // display: inline-flex;

  // 拖拽上传
  .pro-upload-dragger {
    .pro-upload-handle-box {
      padding: var(--zaui-space-size-sm, 8px);
      background: #f8f9fa;
      border-radius: var(--zaui-border-radius, 8px);

      .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
        background-color: var(--zaui-base-bg, #fff);
      }

      .drag-upload-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 392px;
        height: 110px;

        .upload-dragger-control {
          background-color: var(--zaui-base-bg, #fff);

          .dragger-txt-line1 {
            display: flex;
            align-items: center;
            line-height: 26px;

            .icon-upload {
              display: inline-block;
              color: #c5c7cd;
              font-size: 30px;
            }

            .dragger-txt {
              margin-left: 9px;

              color: rgba(0, 0, 0, 0.85);
              font-size: var(--zaui-font-size, 14px);
              line-height: 20px;
            }

            .click-txt {
              color: var(--zaui-brand, #006aff);
            }
          }

          .file-ext {
            margin-top: 10px;

            color: #939599;
            font-size: var(--zaui-font-size-sm, 12px);
            line-height: 14px;
            text-align: center;
          }
        }

        // 单个文件展示样式
        .dragger-single-file {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 var(--zaui-space-size-lg, 32px);

          .file-type-icon {
            width: 18px;
            height: 22px;
            margin: 0 auto;
          }

          .file-item-wrapper {
            padding: 0 var(--zaui-space-size-lg, 32px);
          }

          .file-info-box {
            display: flex;
            margin-top: 11px;

            &.file-box-error {
              color: var(--zaui-danger);
            }

            .file-name {
              display: flex;
              overflow: hidden;
              word-break: break-all;
              line-clamp: 1;
              box-orient: vertical;
            }

            .file-ext {
              word-break: keep-all;
            }

            .file-size {
              word-break: keep-all;
            }

            .file-download {
              margin-left: var(--zaui-space-size-sm, 8px);
            }
          }

          .file-action-box {
            display: flex;
            justify-content: center;
            margin-top: 3px;
            color: #1890ff;
            & > div {
              cursor: pointer;
            }
            .file-del {
              margin-left: 30px;
            }
          }
        }
      }
    }
  }

  // 按钮上传
  .pro-upload-button {
    display: flex;

    > span {
      display: block;
      width: 100%;
    }

    .pro-upload-button-inner {
      display: flex;

      .pro-upload-button-inner-right {
        margin-left: 10px;
        line-height: 32px;
      }
    }

    .upload-tip-txt {
      margin-left: 10px;

      color: #939599;
      font-size: var(--zaui-font-size-sm, 12px);
      line-height: 32px;
    }
  }

  // 图片
  .pro-upload-image {
    position: relative;
    display: inline-flex;

    .@{ant-prefix}-upload-list-picture-card {
      .@{ant-prefix}-upload-list-item-container,
      .@{ant-prefix}-upload-select {
        width: 126px !important;
        height: 126px !important;
      }
    }

    .image-example {
      position: absolute;
      top: 0;
      right: -10px;
      width: 88px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      word-break: keep-all;
      background: #ffffff;
      border: 1px solid #dcdcdc;
      border-radius: var(--zaui-border-radius, 8px);
      transform: translate(100%, 0);
    }

    .file-item-image {
      position: relative;
      width: 126px;
      // height       : 100%;
      height: 126px;
      overflow: hidden;
      overflow: hidden;
      border: 1px dashed #d9d9d9;
      border-radius: 8px;

      .file-type-icon-img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        transform: translate(-50%, -50%);
      }

      .image-con {
        display: block;
        width: 100%;
        height: 100%;
      }

      &:hover .actions-wrap {
        display: block;
        background-color: rgba(0, 0, 0, 0.75);
      }

      .actions-wrap {
        position: absolute;
        top: 0;
        bottom: 0;
        display: none;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        transition: all 2s;

        .action-top {
          display: flex;
          flex: 1;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: calc(100% - 36px);
        }

        .action-button {
          height: 36px;
          line-height: 36px;
          text-align: center;
          background: #ffffff;
        }

        .action-item {
          color: #fff;
          font-size: var(--zaui-font-size-sm, 12px);
          opacity: 0.8;
          color: #fff !important;
          align-self: center;
          &:hover {
            color: #fff !important;
          }

          .action-icon {
            margin-right: 4px;
            vertical-align: sub;
          }

          &:hover {
            opacity: 1;
          }
        }

        .action-button {
          .action-item {
            color: var(--zaui-danger, #ff005f) !important;
            &:hover {
              color: var(--zaui-danger, #ff005f) !important;
            }
          }
        }
      }
    }

    .file-item-image.actions-wrap-error {
      border: 1px solid #ff005f;
    }

    .image-uploading {
      display: flex;
      align-items: center;
      height: inherit;
      padding: 20px;
    }
  }

  .pro-upload-image {
    .@{ant-prefix}-space-item {
      display: inline-flex;
    }
  }

  .file-actions {
    .file-action-item {
      padding-top: var(--zaui-space-size-xs, 4px) !important;
    }

    .action-icon {
      display: inline-flex;
      align-items: center;
      color: inherit;
      font-style: normal;
      text-align: center;
      text-transform: none;
      vertical-align: -0.15em;
      text-rendering: optimizelegibility;

      span {
        display: inline-flex;
        align-items: center;
        color: inherit;
        font-style: normal;
        text-align: center;
        text-transform: none;
        vertical-align: -0.15em;
        text-rendering: optimizelegibility;
      }
    }
  }

  .@{ant-prefix}-upload-disabled {
    .file-action-box {
      .file-name,
      .file-del {
        color: #ccc;
        cursor: not-allowed !important;
      }
    }
  }

  .filelist-item-wrapper {
    .file-info-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 30px;
      margin-top: var(--zaui-space-size-sm, 8px);
      color: var(--zaui-text, #343434);
      font-size: var(--zaui-font-size-sm, 12px);
      line-height: 16px;
      &:hover {
        background: #f8f9fa;
        border-radius: var(--zaui-border-radius, 8px);
        color: var(--zaui-brand);
        .file-actions-wrap {
          .file-actions {
            display: flex;
            .file-action-item {
              color: var(--zaui-brand);
            }
          }
        }
      }
      &.file-box-error {
        color: var(--zaui-danger);

        .file-actions-wrap {
          .file-actions {
            display: flex;
            .file-action-item {
              color: var(--zaui-danger);
            }
          }
        }
      }

      .file-type-icon {
        display: block;
        width: 18px;
        height: 23px;
        margin-left: 6px;
        overflow: hidden;
        position: absolute;
      }
      .file-name {
        display: flex;
        padding-left: var(--zaui-space-size-lg, 32px);
        overflow: hidden;
        line-clamp: 1;
        box-orient: vertical;
        word-break: break-all;
      }
      .file-name.file-name-pf0 {
        padding-left: 0;
      }

      .file-actions-wrap {
        width: 100px;
        margin-left: auto;
        .file-actions {
          display: none;
          justify-content: right;

          transition: all 1s;

          .file-action-item {
            margin-left: var(--zaui-space-size-sm, 8px);
            padding: 0;
            cursor: pointer;
            color: var(--zaui-brand);
          }
        }
      }
    }
  }

  // 单个文件拖拽控件
  .drag-Single-item-wrapper {
    .file-info-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 30px;
      margin-top: var(--zaui-space-size-sm, 8px);
      color: var(--zaui-text, #343434);

      font-size: var(--zaui-font-size-sm, 12px);
      line-height: 16px;
      justify-content: center;
      &:hover {
        background: #f8f9fa;
        border-radius: var(--zaui-border-radius, 8px);
      }
      &:hover,
      &.file-box-error {
        .file-actions-wrap {
          .file-actions {
            display: flex;
          }
        }
      }

      .file-type-icon {
        display: block;
        width: 18px;
        height: 23px;
        margin-left: 6px;
        overflow: hidden;
        position: absolute;
      }
      .file-name {
        display: flex;
        padding-left: var(--zaui-space-size-sm, 8px);
        overflow: hidden;
        line-clamp: 1;
        box-orient: vertical;
        word-break: keep-all;
      }
      .file-name.file-name-pf0 {
        padding-left: 0;
      }

      &.file-box-error {
        color: var(--zaui-danger, #ff005f);
      }

      .file-actions-wrap {
        margin-left: 10px;
        .file-actions {
          justify-content: right;
          transition: all 1s;
          display: flex;
          .file-action-item {
            margin-left: var(--zaui-space-size-sm, 8px);
            padding: 0;
            cursor: pointer;
            color: var(--zaui-brand);
          }
        }
      }
    }
  }
}

.pro-upload-example {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}

.proupload-modal-preview {
  .@{ant-prefix}-modal {
    width: 600px;
  }
}