@use "../prompt-dialog/prompt-dialog.component.scss";

// 图片容器样式
.image-container {
  width: 100%;
  height: 300px;
  border: 2px dashed #4a4c4f;
  border-radius: 4px;
  background: #3a3c3f;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 100%;
    max-height: 100%;
    display: none; // 默认隐藏，由Cropper接管显示
  }

  // 拖拽悬停状态
  &.drag-over {
    border-color: #66b2ff;
    background: rgba(102, 178, 255, 0.1);
  }
}

// 空状态提示
.empty-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #999;
  pointer-events: none;

  i {
    font-size: 48px;
    color: #66b2ff;
    margin-bottom: 16px;
    display: block;
  }

  p {
    margin: 8px 0;
    font-size: 14px;

    &.sub-text {
      font-size: 12px;
      color: #777;
    }
  }
}

// 操作提示样式
.operation-tips {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 8px;

  .tip-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 12px;
    margin-right: 16px;

    &:last-child {
      margin-right: 0;
    }

    nz-switch {
      margin-left: 4px;
      margin-top: -1px;
    }

    nz-input-number {
      width: 35px;
      height: 20px;
      font-size: 12px;
      margin-left: 3px;
    }
  }
}

// 重写footer样式以适配按钮布局
.footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 20px;

  button {
    margin-left: 0;

    &[nz-button] {
      height: 28px;
      padding: 0 12px;
      font-size: 12px;
      border-radius: 4px;
    }
  }
}

// Cropper.js 样式覆盖 - 增强版本
:host ::ng-deep {
  .cropper-container {
    width: 100% !important;
    height: 100% !important;
    background: #3a3c3f !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .cropper-canvas {
    position: absolute;
  }

  .cropper-crop-box {
    border: 1px solid #66b2ff !important;
    background: transparent !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
  }

  .cropper-view-box {
    outline: 2px solid #66b2ff !important;
    background: rgba(102, 178, 255, 0.1) !important;
  }

  .cropper-face {
    background: rgba(102, 178, 255, 0.1) !important;
    opacity: 0.8 !important;
  }

  .cropper-line {
    background: #66b2ff !important;
    opacity: 1 !important;

    &.line-e,
    &.line-w {
      width: 3px !important;
    }

    &.line-n,
    &.line-s {
      height: 3px !important;
    }
  }

  .cropper-point {
    width: 8px !important;
    height: 8px !important;
    background: #66b2ff !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    opacity: 1 !important;

    // 显示角落的调整点
    &.point-se,
    &.point-ne,
    &.point-nw,
    &.point-sw {
      display: block !important;
    }

    // 隐藏边缘的调整点，只保留角落的
    &.point-n,
    &.point-s,
    &.point-e,
    &.point-w {
      display: none !important;
    }
  }

  .cropper-dashed {
    border-color: rgba(255, 255, 255, 0.5) !important;
    opacity: 0.5 !important;
  }

  // 确保拖拽区域可见
  .cropper-drag-box {
    background: transparent !important;
    opacity: 1 !important;
  }

  // 网格线
  .cropper-dashed.dashed-h {
    border-top: 1px dashed rgba(255, 255, 255, 0.5) !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5) !important;
  }

  .cropper-dashed.dashed-v {
    border-left: 1px dashed rgba(255, 255, 255, 0.5) !important;
    border-right: 1px dashed rgba(255, 255, 255, 0.5) !important;
  }
}

// 拖拽上传样式
.image-container.drag-over {
  border-color: #66b2ff;
  background: rgba(102, 178, 255, 0.1);

  .empty-tip {
    color: #66b2ff;
  }
}

// loading状态
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;

  i {
    font-size: 24px;
    margin-bottom: 8px;
    color: #66b2ff;
    animation: spin 1s linear infinite;
  }

  font-size: 14px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.inner {
  position: relative;
  display: flex;
  gap: 10px;

  .left {
    width: 65%;
  }

  .right {
    width: calc(35% - 10px);
    border: 2px dashed #4a4c4f;
    border-radius: 4px;
    position: relative;

    .right-text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
      padding: 8px;
      font-size: 12px;
      height: 40px;
    }
  }
}