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

@use '../../styles/_ios-theme.scss' as ios;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  // 投诉列表
  .complaints-list {
    .list-body {
      .complaint-item {
        display: flex;
        align-items: center;
        gap: ios.$ios-spacing-md;
        padding: ios.$ios-spacing-md;
        background: ios.$ios-background;
        border: 1px solid ios.$ios-border;
        border-radius: ios.$ios-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.$ios-danger;
          background: rgba(ios.$ios-danger, 0.02);
        }

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

          .complaint-info {
            flex: 1;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            .complaint-details {
              display: flex;
              flex-direction: column;
              gap: ios.$ios-spacing-sm;
            }

            .detail-item {
              display: flex;
              justify-content: space-between;
              padding: ios.$ios-spacing-xs;
              border-radius: ios.$ios-radius-sm;
              border: 1px solid ios.$ios-border;

              .detail-label {
                font-weight: 500;
              }

              .detail-value {
                display: flex;
                align-items: center;
                gap: ios.$ios-spacing-md;
                margin-bottom: ios.$ios-spacing-sm;

                .customer-info {
                  display: flex;
                  align-items: center;
                  gap: ios.$ios-spacing-xs;

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

                  .customer-id {
                    color: ios.$ios-primary;
                    font-weight: ios.$ios-font-weight-semibold;
                  }

                  .customer-level {
                    color: ios.$ios-success;
                  }
                }

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

                  .action-title {
                    color: ios.$ios-primary;
                    font-size: ios.$ios-font-size-sm;
                  }

                  .action-description {
                    margin: ios.$ios-spacing-xs 0;
                    color: ios.$ios-text-secondary;
                    font-size: ios.$ios-font-size-sm;
                  }

                  .action-timestamp {
                    font-size: ios.$ios-font-size-xs;
                    color: ios.$ios-text-secondary;
                  }
                }

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

                  .resolution-title {
                    color: ios.$ios-success;
                    font-size: ios.$ios-font-size-sm;
                  }

                  .resolution-content {
                    margin: ios.$ios-spacing-xs 0 0 0;
                    color: ios.$ios-text-secondary;
                    font-size: ios.$ios-font-size-sm;
                  }
                }
              }
            }
          }

          .complaint-footer {
            text-align: center;
            padding: ios.$ios-spacing-xl;
            color: ios.$ios-text-secondary;

            .no-complaints-message {
              margin-bottom: ios.$ios-spacing-md;
            }

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

            .no-complaints-description {
              font-size: ios.$ios-font-size-sm;
              color: ios.$ios-text-secondary;
            }
          }
        }
      }
    }

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

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

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

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

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

    .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.$ios-spacing-sm;
    }
  }
}