@use '../../scss/common.scss' as *;

// 个人页面样式
.myself_page {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, rgba(238, 255, 220, 1) 0%, rgba(255, 255, 255, 1) 37%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

// 主要内容区域
.main_content {
  // position: relative;
  z-index: 5;
  flex: 1;
  margin-top: 0;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 0px 15px 15px 15px ;

  // 用户信息区域
  .user_info_section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 98px;

    // 加载状态
    .loading_container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px 0;

      .loading_text {
        @include text-style(16px, 400, 1.4em);
        color: $color-primary-lightest;
      }
    }


    // 统计数据
    .stats_section {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .stats_container {
        display: flex;
        align-items: center;
        gap: 20px;

        .stat_item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .stat_number {
            @include text-medium;
          }

          .stat_label {
            @include text-small;
          }
        }
      }
    }

    // 标签和简介
    .tags_bio_section {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .tags_container {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;

        .tag_item {
          @include tag-base;

          .tag_icon {
            width: 12px;
            height: 12px;
          }

          .tag_text {
            @include text-tag;
          }
        }
      }

      .bio_text {
        @include text-body;
        white-space: pre-line;
      }
    }

    // 球局订单和收藏功能
    .quick_actions_section {
      margin-bottom: 16px;

      .action_card {
        @include card-base;
        display: flex;
        align-items: center;
        overflow: hidden;

        .action_content {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 20px 0;
          cursor: pointer;
          transition: background-color 0.3s ease;

          &:hover {
            background-color: rgba(0, 0, 0, 0.02);
          }

          .action_icon {
            width: 20px;
            height: 20px;
          }

          .action_text {
            @include text-style(15px, 600, 1.4em);
            color: $color-primary;
          }
        }

        .action_divider {
          width: 1px;
          height: 16px;
          background: $color-primary-lightest-5;
        }
      }
    }
  }

  // 球局类型标签页
  .game_tabs_section {

    .tab_container {
      display: flex;
      gap: 16px;
      padding: 12px 15px;

      .tab_item {
        padding: 12px 0;
        cursor: pointer;
        transition: all 0.3s ease;

        .tab_text {
          @include text-primary;
          transition: color 0.3s ease;
        }

        &.active {
          .tab_text {
            color: $color-primary;
          }
        }

        &:not(.active) {
          .tab_text {
            color: $color-primary-lightest-2;
          }
        }
      }
    }
  }

  // 球局列表区域
  .game_list_section {
    .date_header {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 10px 15px;
      margin-bottom: 16px;

      .date_text {
        @include text-style(14px, 600, 1.4em, 2.71%);
        color: $color-primary-light;
      }

      .separator {
        @include text-style(18px, 400, 1.4em, 2.11%);
        color: $color-primary-lightest;
      }

      .weekday_text {
        @include text-style(14px, 600, 1.4em, 2.71%);
        color: $color-primary-light;
      }
    }

    // 球局卡片
    .game_cards {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 0 5px 15px;

      .game_card {
        @include card-base;
        padding: 0 0 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;

        &:active {
          transform: scale(0.98);
        }

        // 球局标题和类型
        .game_header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 15px 0;

          .game_title {
            @include text-style(16px, 600, 1.5em);
            color: $color-primary;
          }

          .game_type_icon {
            width: 16px;
            height: 16px;

            .type_icon {
              width: 100%;
              height: 100%;
            }
          }
        }

        // 球局时间
        .game_time {
          padding: 6px 15px 0;

          .time_text {
            @include text-caption;
          }
        }

        // 球局地点和类型
        .game_location {
          display: flex;
          align-items: center;
          gap: 2px;
          padding: 4px 15px 0;

          .location_text,
          .type_text,
          .distance_text {
            @include text-caption;
          }

          .separator {
            @include text-style(14px, 400, 1.3em);
            color: $color-text-tertiary;
          }
        }

        // 球局图片
        .game_images {
          position: absolute;
          top: 11px;
          right: 5px;
          width: 100px;
          height: 100px;
          box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);

          .game_image {
            position: absolute;
            width: 56.44px;
            height: 56.44px;
            border-radius: 9px;
            border: 1.5px solid $color-white;

            &:nth-child(1) {
              top: 4.18px;
              left: 19.18px;
            }

            &:nth-child(2) {
              top: 26.5px;
              left: 38px;
              width: 61.86px;
              height: 61.86px;
            }

            &:nth-child(3) {
              top: 32.5px;
              left: 0;
              width: 62.04px;
              height: 62.04px;
            }
          }
        }

        // 球局信息标签
        .game_tags {
          display: flex;
          flex-direction: row;
          gap: 6px;
          padding: 8px 15px 0;

          .participants_info {
            display: flex;
            gap: 4px;

            .avatars {
              display: flex;
              align-items: center;
              gap: -8px;

              .participant_avatar {
                @include avatar-base(20px);
                border: 1px solid $color-white;
              }
            }

            .participants_count {
              @include tag-base;
              padding: 6px;

              .count_text {
                @include text-tag;
              }
            }
          }

          .game_info_tags {
            display: flex;
            gap: 4px;

            .info_tag {
              @include tag-base;

              .tag_text {
                @include text-tag;
              }
            }
          }
        }
      }
    }
  }
}