yss-project/src/app/shared/components/complaint-card/complaint-card.scss

@use '../../styles/_ios-theme.scss' as *;
@import '../../../../styles/variables';

:host { display: block; height: 100%; }

.complaint-card {
  padding: $ios-spacing-md;
  background: $ios-background;
  border-radius: 12px;
  border: 1px solid $ios-border;

  // 统计数据概览
  .stats-overview {
    margin-bottom: $ios-spacing-lg;
    
    h4 {
      margin: 0 0 $ios-spacing-md 0;
      font-size: $ios-font-size-lg;
      font-weight: $ios-font-weight-semibold;
      color: $ios-text-primary;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: $ios-spacing-md;

      .stat-item {
        text-align: center;
        padding: $ios-spacing-md;
        background: $ios-background-secondary;
        border-radius: $ios-border-radius-md;
        border: 1px solid $ios-border;

        .stat-value {
          font-size: $ios-font-size-xl;
          font-weight: $ios-font-weight-bold;
          color: $ios-text-primary;
          margin-bottom: $ios-spacing-xs;

          .time-suffix {
            font-size: $ios-font-size-sm;
            color: $ios-text-secondary;
          }
        }

        .stat-label {
          font-size: $ios-font-size-xs;
          color: $ios-text-secondary;
        }

        &.total .stat-value { color: $ios-primary; }
        &.pending .stat-value { color: $ios-warning; }
        &.processing .stat-value { color: #1890ff; }
        &.resolved .stat-value { color: $ios-success; }
        &.high-priority .stat-value { color: $ios-danger; }
        &.resolution-time .stat-value { color: #722ed1; }
      }
    }
  }

  // 优先级统计
  .priority-stats {
    margin-bottom: $ios-spacing-lg;
    padding: $ios-spacing-md;
    background: $ios-background-secondary;
    border-radius: $ios-border-radius-md;
    border: 1px solid $ios-border;

    h5 {
      margin: 0 0 $ios-spacing-md 0;
      font-size: $ios-font-size-md;
      font-weight: $ios-font-weight-semibold;
      color: $ios-text-primary;
    }

    .priority-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: $ios-spacing-sm;

      .priority-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $ios-spacing-sm;
        background: $ios-background;
        border-radius: $ios-border-radius-sm;
        border: 1px solid $ios-border;
        border-left-width: 4px;

        .priority-label {
          font-size: $ios-font-size-sm;
          color: $ios-text-secondary;
        }

        .priority-count {
          font-size: $ios-font-size-md;
          font-weight: $ios-font-weight-semibold;
          color: $ios-text-primary;
        }
      }
    }
  }

  // 类型统计
  .type-stats {
    margin-bottom: $ios-spacing-lg;
    padding: $ios-spacing-md;
    background: $ios-background-secondary;
    border-radius: $ios-border-radius-md;
    border: 1px solid $ios-border;

    h5 {
      margin: 0 0 $ios-spacing-md 0;
      font-size: $ios-font-size-md;
      font-weight: $ios-font-weight-semibold;
      color: $ios-text-primary;
    }

    .type-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: $ios-spacing-sm;

      .type-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $ios-spacing-sm;
        background: $ios-background;
        border-radius: $ios-border-radius-sm;
        border: 1px solid $ios-border;

        .type-label {
          font-size: $ios-font-size-xs;
          color: $ios-text-secondary;
        }

        .type-count {
          font-size: $ios-font-size-sm;
          font-weight: $ios-font-weight-semibold;
          color: $ios-primary;
        }
      }
    }
  }

  // 筛选区域
  .filter-section {
    margin-bottom: $ios-spacing-lg;
    padding: $ios-spacing-md;
    background: $ios-background-secondary;
    border-radius: $ios-border-radius-md;
    border: 1px solid $ios-border;

    .search-row {
      margin-bottom: $ios-spacing-md;

      .search-group {
        display: flex;
        align-items: center;
        gap: $ios-spacing-sm;

        label {
          font-size: $ios-font-size-sm;
          color: $ios-text-secondary;
          white-space: nowrap;
        }

        .search-input {
          flex: 1;
          padding: $ios-spacing-sm;
          border: 1px solid $ios-border;
          border-radius: $ios-border-radius-sm;
          background: $ios-background;
          color: $ios-text-primary;
          font-size: $ios-font-size-sm;

          &:focus {
            outline: none;
            border-color: $ios-primary;
          }

          &::placeholder {
            color: $ios-text-secondary;
          }
        }
      }
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: $ios-spacing-md;
      margin-bottom: $ios-spacing-md;

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

      .filter-group {
        display: flex;
        align-items: center;
        gap: $ios-spacing-sm;

        label {
          font-size: $ios-font-size-sm;
          color: $ios-text-secondary;
          white-space: nowrap;
        }

        .filter-buttons {
          display: flex;
          gap: $ios-spacing-xs;

          .filter-btn {
            padding: $ios-spacing-xs $ios-spacing-sm;
            border: 1px solid $ios-border;
            background: $ios-background;
            color: $ios-text-secondary;
            border-radius: $ios-border-radius-sm;
            font-size: $ios-font-size-xs;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              background: $ios-background-secondary;
            }

            &.active {
              background: $ios-primary;
              color: white;
              border-color: $ios-primary;
            }

            &.pending.active {
              background: $ios-warning;
              border-color: $ios-warning;
            }

            &.processing.active {
              background: #1890ff;
              border-color: #1890ff;
            }

            &.resolved.active {
              background: $ios-success;
              border-color: $ios-success;
            }
          }
        }

        .filter-select {
          padding: $ios-spacing-xs $ios-spacing-sm;
          border: 1px solid $ios-border;
          border-radius: $ios-border-radius-sm;
          background: $ios-background;
          color: $ios-text-primary;
          font-size: $ios-font-size-xs;
          min-width: 120px;

          &:focus {
            outline: none;
            border-color: $ios-primary;
          }
        }
      }
    }
  }

  // 投诉列表
  .complaints-list {
    .list-body {
      .complaint-item {
        padding: $ios-spacing-md;
        margin-bottom: $ios-spacing-md;
        background: $ios-background;
        border: 1px solid $ios-border;
        border-radius: $ios-border-radius-md;
        transition: all 0.2s ease;

        &:hover {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

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

        &.overdue {
          border-left: 4px solid $ios-danger;
          background: rgba($ios-danger, 0.02);
        }

        .complaint-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: $ios-spacing-md;

          .complaint-info {
            flex: 1;

            .complaint-title {
              display: flex;
              align-items: center;
              gap: $ios-spacing-sm;
              margin-bottom: $ios-spacing-xs;

              .type-tag {
                padding: $ios-spacing-xs $ios-spacing-sm;
                background: $ios-primary;
                color: white;
                border-radius: $ios-border-radius-sm;
                font-size: $ios-font-size-xs;
              }

              .customer-name {
                font-size: $ios-font-size-md;
                font-weight: $ios-font-weight-semibold;
                color: $ios-text-primary;
              }
            }

            .priority-badge {
              display: inline-block;
              padding: $ios-spacing-xs $ios-spacing-sm;
              color: white;
              border-radius: $ios-border-radius-sm;
              font-size: $ios-font-size-xs;
              font-weight: $ios-font-weight-semibold;
            }
          }

          .complaint-meta {
            display: flex;
            align-items: center;
            gap: $ios-spacing-sm;

            .status-badge {
              padding: $ios-spacing-xs $ios-spacing-sm;
              border-radius: $ios-border-radius-sm;
              font-size: $ios-font-size-xs;
              font-weight: $ios-font-weight-semibold;

              &.pending {
                background: rgba($ios-warning, 0.1);
                color: $ios-warning;
              }

              &.processing {
                background: rgba(#1890ff, 0.1);
                color: #1890ff;
              }

              &.resolved {
                background: rgba($ios-success, 0.1);
                color: $ios-success;
              }
            }

            .overdue-badge {
              padding: $ios-spacing-xs $ios-spacing-sm;
              background: rgba($ios-danger, 0.1);
              color: $ios-danger;
              border-radius: $ios-border-radius-sm;
              font-size: $ios-font-size-xs;
              font-weight: $ios-font-weight-semibold;
            }
          }
        }

        .complaint-content {
          margin-bottom: $ios-spacing-md;

          .description {
            margin: 0 0 $ios-spacing-sm 0;
            color: $ios-text-primary;
            line-height: 1.5;
          }

          .complaint-images {
            display: flex;
            gap: $ios-spacing-sm;
            flex-wrap: wrap;

            .complaint-image {
              width: 80px;
              height: 80px;
              object-fit: cover;
              border-radius: $ios-border-radius-sm;
              border: 1px solid $ios-border;
            }
          }
        }

        .complaint-footer {
          .time-info {
            display: flex;
            flex-wrap: wrap;
            gap: $ios-spacing-md;
            margin-bottom: $ios-spacing-sm;

            .submitted-time,
            .days-progress,
            .resolved-time {
              font-size: $ios-font-size-xs;
              color: $ios-text-secondary;
            }

            .days-progress {
              color: $ios-primary;
              font-weight: $ios-font-weight-semibold;
            }

            .resolved-time {
              color: $ios-success;
            }
          }

          .handler-response {
            padding: $ios-spacing-sm;
            background: rgba($ios-primary, 0.05);
            border-radius: $ios-border-radius-sm;
            border-left: 3px solid $ios-primary;
            margin-bottom: $ios-spacing-sm;

            strong {
              color: $ios-primary;
              font-size: $ios-font-size-sm;
            }

            .response-text {
              margin: $ios-spacing-xs 0;
              color: $ios-text-secondary;
              font-size: $ios-font-size-sm;
              line-height: 1.4;
            }

            .handler-name {
              font-size: $ios-font-size-xs;
              color: $ios-text-secondary;
            }
          }

          .solution-section {
            padding: $ios-spacing-sm;
            background: rgba($ios-success, 0.05);
            border-radius: $ios-border-radius-sm;
            border-left: 3px solid $ios-success;

            strong {
              color: $ios-success;
              font-size: $ios-font-size-sm;
            }

            .solution-text {
              margin: $ios-spacing-xs 0 0 0;
              color: $ios-text-secondary;
              font-size: $ios-font-size-sm;
              line-height: 1.4;
            }
          }
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: $ios-spacing-xl;
      color: $ios-text-secondary;

      .empty-icon {
        font-size: 48px;
        margin-bottom: $ios-spacing-md;
      }

      .empty-title {
        font-size: $ios-font-size-lg;
        font-weight: $ios-font-weight-semibold;
        color: $ios-text-primary;
        margin-bottom: $ios-spacing-sm;
      }

      .empty-desc {
        font-size: $ios-font-size-sm;
        color: $ios-text-secondary;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .stats-overview .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .priority-stats .priority-grid,
    .type-stats .type-grid {
      grid-template-columns: 1fr;
    }

    .filter-section {
      .search-row .search-group {
        flex-direction: column;
        align-items: stretch;
      }

      .filter-row {
        flex-direction: column;
        align-items: stretch;

        .filter-group {
          flex-direction: column;
          align-items: stretch;

          .filter-buttons {
            justify-content: center;
          }
        }
      }
    }

    .complaints-list .complaint-item .complaint-header {
      flex-direction: column;
      gap: $ios-spacing-sm;
    }
  }
}