import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../../beans/home_ranking_bean.dart';

class HomeRankingPage extends StatefulWidget {
  final List<HomeRankingBean> rankingList;

  const HomeRankingPage({super.key, required this.rankingList});

  @override
  State<HomeRankingPage> createState() => _HomeRankingPageState();
}

class _HomeRankingPageState extends State<HomeRankingPage> {
  List<HomeRankingBean> gameList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    gameList = widget.rankingList.sublist(3);
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Column(
      children: [
        ///游玩时长前三游戏
        Container(
          width: size.width,
          height: 250,
          margin: EdgeInsets.only(left: 15, right: 15),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                width: 99,
                height: 160,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      bottom: 0,
                      child: Container(
                        width: 99,
                        height: 104,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(11)),
                          gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Color(0xFF39ADFE),
                              Color(0xFF0978FF),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0,
                        child: Column(
                          children: [
                            ClipOval(
                              child: Container(
                                width: 20,
                                height: 20,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFFC3D2DE),
                                      Color(0xFF949EC8),
                                    ],
                                  ),
                                ),
                                child: Text(
                                  "2",
                                  style: TextStyle(fontSize: 12, color: Colors.white),
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 11),
                              child: CachedNetworkImage(
                                width: 57,
                                height: 57,
                                imageUrl: '${widget.rankingList[1].gameIconImage}',
                                errorWidget: (context, url, error) => const Icon(Icons.error),
                              ),
                            ),
                            Container(
                              width: 75,
                              margin: EdgeInsets.only(top: 8),
                              alignment: Alignment.center,
                              child: Text(
                                "${widget.rankingList[1].gameName}",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 14, color: Colors.white),
                              ),
                            ),
                            Container(
                              width: 75,
                              height: 29,
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(top: 9),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.all(Radius.circular(18)),
                              ),
                              child: Text(
                                '打开',
                                style: TextStyle(color: Color(0xFF1282FF), fontSize: 13),
                              ),
                            ),
                          ],
                        ))
                  ],
                ),
              ),
              Container(
                width: 99,
                height: 181,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      bottom: 0,
                      child: Container(
                        width: 99,
                        height: 126,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(11)),
                          gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Color(0xFFFE924B),
                              Color(0xFFF65A2E),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0,
                        child: Column(
                          children: [
                            ClipOval(
                              child: Container(
                                width: 20,
                                height: 20,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFFFFE660),
                                      Color(0xFFFD9E2A),
                                    ],
                                  ),
                                ),
                                child: Text(
                                  "1",
                                  style: TextStyle(fontSize: 12, color: Colors.white),
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 11),
                              child: CachedNetworkImage(
                                width: 57,
                                height: 57,
                                imageUrl: '${widget.rankingList[0].gameIconImage}',
                                errorWidget: (context, url, error) => const Icon(Icons.error),
                              ),
                            ),
                            Container(
                              width: 75,
                              margin: EdgeInsets.only(top: 17),
                              child: Text(
                                "${widget.rankingList[0].gameName}",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 14, color: Colors.white),
                              ),
                            ),
                            Container(
                              width: 75,
                              height: 29,
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(top: 18),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.all(Radius.circular(18)),
                              ),
                              child: Text(
                                '打开',
                                style: TextStyle(color: Color(0xFFF86534), fontSize: 13),
                              ),
                            ),
                          ],
                        ))
                  ],
                ),
              ),
              Container(
                width: 99,
                height: 160,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      bottom: 0,
                      child: Container(
                        width: 99,
                        height: 104,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(11)),
                          gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Color(0xFFEE5361),
                              Color(0xFFF52E30),
                            ],
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0,
                        child: Column(
                          children: [
                            ClipOval(
                              child: Container(
                                width: 20,
                                height: 20,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFFEDC1A5),
                                      Color(0xFFE17C38),
                                    ],
                                  ),
                                ),
                                child: Text(
                                  "3",
                                  style: TextStyle(fontSize: 12, color: Colors.white),
                                ),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 11),
                              child: CachedNetworkImage(
                                width: 57,
                                height: 57,
                                imageUrl: '${widget.rankingList[2].gameIconImage}',
                                errorWidget: (context, url, error) => const Icon(Icons.error),
                              ),
                            ),
                            Container(
                              width: 75,
                              margin: EdgeInsets.only(top: 8),
                              child: Text(
                                "${widget.rankingList[2].gameName}",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 14, color: Colors.white),
                              ),
                            ),
                            Container(
                              width: 75,
                              height: 29,
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(top: 9),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.all(Radius.circular(18)),
                              ),
                              child: Text(
                                '打开',
                                style: TextStyle(color: Color(0xFFF3353A), fontSize: 13),
                              ),
                            ),
                          ],
                        ))
                  ],
                ),
              ),
            ],
          ),
        ),

        ///游玩历史列表
        Container(
          margin: EdgeInsets.only(left: 15, right: 15, bottom: 20),
          child: ListView.builder(
              padding: EdgeInsets.zero,
              itemCount: gameList.length,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int index) {
                return _gameItem(index, gameList[index]);
              }),
        ),
      ],
    );
  }

  _gameItem(index, HomeRankingBean data) {
    return Container(
      width: double.infinity,
      height: 60,
      margin: EdgeInsets.only(top: 18),
      child: Row(
        children: [
          Container(
            width: 25,
            height: 25,
            alignment: Alignment.center,
            child: Text(
              "${index + 4}.",
              style: TextStyle(fontSize: 14, color: Colors.white),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 13),
            child: CachedNetworkImage(
              width: 57,
              height: 57,
              imageUrl: '${data.gameIconImage}',
              errorWidget: (context, url, error) => const Icon(Icons.error),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 11),
            child: Text(
              "${data.gameName}",
              style: TextStyle(fontSize: 14, color: Color(0xFFD6D6D7)),
            ),
          ),
          Expanded(child: Container()),
          Container(
            width: 57,
            height: 32,
            alignment: Alignment.center,
            margin: EdgeInsets.only(left: 13),
            decoration: BoxDecoration(
              color: Color(0xFF074CE7),
              borderRadius: BorderRadius.all(Radius.circular(18)),
            ),
            child: Text(
              '打开',
              style: TextStyle(color: Colors.white, fontSize: 13),
            ),
          ),
        ],
      ),
    );
  }
}