import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          HeaderComponent(),
          RoomComponent(),
        ],
      ),
    );
  }
}

// 头部
class HeaderComponent extends StatefulWidget {
  HeaderComponent({Key? key}) : super(key: key);

  @override
  State<HeaderComponent> createState() => _HeaderComponentState();
}

class _HeaderComponentState extends State<HeaderComponent> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Image.asset(
            'images/home/header.png',
            width: double.infinity,
            height: 140.0,
            fit: BoxFit.cover,
          ),
          Container(
            padding: const EdgeInsets.fromLTRB(12.0, 39.0, 15.0, 0),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        ClipOval(
                          child: Image.asset(
                            'images/home/photo.png',
                            width: 56.0,
                            height: 56.0,
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text(
                                  "以冬",
                                  style: TextStyle(
                                    fontSize: 16.0,
                                    fontWeight: FontWeight.bold,
                                    color: Color.fromRGBO(51, 51, 51, 1),
                                  ),
                                ),
                                SizedBox(
                                  width: 6,
                                ),
                                Container(
                                  padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
                                  decoration: BoxDecoration(
                                      color: Color.fromRGBO(56, 208, 229, 1),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(12),
                                      )),
                                  child: Text(
                                    "1级",
                                    style: TextStyle(
                                        fontSize: 10,
                                        color:
                                            Color.fromRGBO(255, 255, 255, 1)),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 8,
                            ),
                            Container(
                              padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius:
                                    const BorderRadius.all(Radius.circular(30)),
                              ),
                              child: Row(
                                children: [
                                  Image.asset(
                                    "images/home/gold.png",
                                    width: 19.0,
                                    height: 19.0,
                                  ),
                                  SizedBox(
                                    width: 6,
                                  ),
                                  Text(
                                    "175",
                                    style: TextStyle(
                                      fontSize: 12.0,
                                      color: Color.fromRGBO(51, 51, 51, 1),
                                    ),
                                  ),
                                  SizedBox(
                                    width: 6,
                                  ),
                                  Image.asset(
                                    "images/home/add.png",
                                    width: 19.0,
                                    height: 19.0,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Image.asset(
                          'images/home/gift.png',
                          width: 28,
                          height: 28,
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text("活动")
                      ],
                    ),
                  ],
                ),
                SizedBox(
                  height: 26,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "优质房间",
                      style: TextStyle(
                        color: Color.fromRGBO(51, 51, 51, 1),
                        fontSize: 16,
                        fontWeight: FontWeight.w800,
                      ),
                    ),
                    Row(
                      children: [
                        Text(
                          "更多",
                          style: TextStyle(
                            color: Color.fromRGBO(153, 153, 153, 1),
                            fontSize: 14,
                          ),
                        ),
                        SizedBox(
                          width: 6,
                        ),
                        Image.asset(
                          "images/home/right_arrow.png",
                          width: 6,
                          height: 12,
                        )
                      ],
                    )
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 优质房间
class RoomComponent extends StatefulWidget {
  RoomComponent({Key? key}) : super(key: key);

  @override
  State<RoomComponent> createState() => _RoomComponentState();
}

class _RoomComponentState extends State<RoomComponent> {
  List listData = [
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
    {
      "title": "夏日甜心",
      "type": "交友",
      "num": "111",
      "imgUrl": "images/home/room.png",
    },
  ];
  List<Widget> _getDataList() {
    var list = listData.map(
      (item) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(15)),
            boxShadow: [
              BoxShadow(
                  // color: Color.fromRGBO(51, 51, 51, 1),
                  color: Color.fromRGBO(0, 0, 0, 0.1),
                  offset: Offset(0.0, 4.0), //阴影xy轴偏移量
                  blurRadius: 10.0, //阴影模糊程度
                  spreadRadius: 1.0 //阴影扩散程度
                  )
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(
                  Radius.circular(15),
                )),
                child: Stack(
                  children: [
                    Image.asset(
                      item['imgUrl'],
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      top: 5,
                      left: 10,
                      child: Container(
                        padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(8),
                          ),
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Color.fromRGBO(247, 111, 162, 1),
                              Color.fromRGBO(254, 174, 205, 1),
                            ],
                          ),
                        ),
                        child: Text(
                          "交友",
                          style: TextStyle(
                            color: Color.fromRGBO(255, 255, 255, 1),
                            fontSize: 10,
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      bottom: 4,
                      left: 4,
                      child: Container(
                        padding: EdgeInsets.fromLTRB(6, 4, 6, 4),
                        decoration: BoxDecoration(
                            color: Color.fromRGBO(0, 0, 0, 0.3),
                            borderRadius: BorderRadius.all(
                              Radius.circular(8),
                            )),
                        child: Row(
                          children: [
                            Image.asset(
                              'images/home/fire.png',
                              width: 8,
                              height: 9,
                            ),
                            SizedBox(
                              width: 4,
                            ),
                            Text(
                              "1122",
                              style: TextStyle(
                                  fontSize: 10,
                                  color: Color.fromRGBO(255, 255, 255, 1)),
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.only(left: 10, top: 10),
                child: Text(
                  item['title'],
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: TextStyle(
                    fontSize: 12,
                    color: Color.fromRGBO(51, 51, 51, 1),
                    fontWeight: FontWeight.w400,
                  ),
                ),
              )
            ],
          ),
        );
      },
    );
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color.fromRGBO(254, 249, 252, 1),
            Color.fromRGBO(255, 255, 255, 1),
          ],
        ),
      ),
      child: Column(
        children: [
          GridView.count(
            shrinkWrap: true,
            crossAxisCount: 3, //每行的数量
            crossAxisSpacing: 12.0, //左右间距
            mainAxisSpacing: 12.0, //上下间距
            padding: EdgeInsets.all(15),
            childAspectRatio: 0.75,
            children: this._getDataList(),
          ),
          ClassifyComponent(),
          GameComponent(),
          PlayWithFriendsComponent(),
        ],
      ),
    );
  }
}

// 分类
class ClassifyComponent extends StatefulWidget {
  ClassifyComponent({Key? key}) : super(key: key);

  @override
  State<ClassifyComponent> createState() => _ClassifyComponentState();
}

class _ClassifyComponentState extends State<ClassifyComponent> {
  List listData = [
    {
      "title": "排行榜",
      "imgUrl": "images/home/ranking.png",
    },
    {
      "title": "游玩卡",
      "imgUrl": "images/home/game.png",
    },
    {
      "title": "商城",
      "imgUrl": "images/home/shop.png",
    },
    {
      "title": "桌游房间",
      "imgUrl": "images/home/playing_games.png",
    },
    {
      "title": "好友在线",
      "imgUrl": "images/home/friend.png",
    },
  ];

  List<Widget> _getList() {
    List<Widget> list = [];
    for (var i = 0; i < listData.length; i++) {
      list.add(
        Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  listData[i]['imgUrl'],
                  width: 38,
                  height: 38,
                )
              ],
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              listData[i]['title'],
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Color.fromRGBO(102, 102, 102, 1),
                fontSize: 12,
              ),
            ),
          ],
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(16, 25, 16, 25),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: _getList(),
      ),
    );
  }
}

// 一起玩
class GameComponent extends StatefulWidget {
  GameComponent({Key? key}) : super(key: key);

  @override
  State<GameComponent> createState() => _GameComponentState();
}

class _GameComponentState extends State<GameComponent> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "一起玩",
                style: TextStyle(
                  color: Color.fromRGBO(51, 51, 51, 1),
                  fontSize: 16,
                  fontWeight: FontWeight.w800,
                ),
              ),
              Row(
                children: [
                  Text(
                    "更多",
                    style: TextStyle(
                      color: Color.fromRGBO(153, 153, 153, 1),
                      fontSize: 14,
                    ),
                  ),
                  SizedBox(
                    width: 6,
                  ),
                  Image.asset(
                    "images/home/right_arrow.png",
                    width: 6,
                    height: 12,
                  )
                ],
              )
            ],
          ),
          SizedBox(
            height: 12,
          ),
          Image.asset(
            "images/home/game-1.png",
            width: double.infinity,
            height: 76,
          ),
          SizedBox(
            height: 4,
          ),
          Image.asset(
            "images/home/game-2.png",
            width: double.infinity,
            height: 76,
          ),
          SizedBox(
            height: 4,
          ),
          Image.asset(
            "images/home/game-3.png",
            width: double.infinity,
            height: 76,
          ),
          SizedBox(
            height: 23,
          ),
        ],
      ),
    );
  }
}

// 玩友
class PlayWithFriendsComponent extends StatefulWidget {
  PlayWithFriendsComponent({Key? key}) : super(key: key);

  @override
  State<PlayWithFriendsComponent> createState() =>
      _PlayWithFriendsComponentState();
}

class _PlayWithFriendsComponentState extends State<PlayWithFriendsComponent> {
  final List _list = [
    {
      "photo": "images/home/room.png",
      "name": "小寡妇",
      "distance": "8.9",
      "constellation": "双鱼座",
      "type": "1",
      "sex": "0",
    },
    {
      "photo": "images/home/room.png",
      "name": "单身狗",
      "distance": "2.55",
      "constellation": "双鱼座",
      "type": "1",
      "sex": "1",
    },
    {
      "photo": "images/home/room.png",
      "name": "黑寡妇",
      "distance": "4.0",
      "constellation": "双鱼座",
      "type": "1",
      "sex": "0",
    },
    {
      "photo": "images/home/photo.png",
      "name": "钻石王老五",
      "distance": "3.9",
      "constellation": "双鱼座",
      "type": "2",
      "sex": "1",
    },
    {
      "photo": "images/home/ranking.png",
      "name": "钻石王老五",
      "distance": "4.55",
      "constellation": "射手座",
      "type": "1",
      "sex": "1",
    }
  ];

  List<Widget> _getData() {
    List<Widget> arr = [];
    for (var i = 0; i < _list.length; i++) {
      arr.add(Column(
        children: [
          Container(
            height: 84,
            padding: EdgeInsets.fromLTRB(10, 6, 10, 6),
            width: double.infinity,
            decoration: BoxDecoration(
              color: Color.fromRGBO(255, 255, 255, 1),
              borderRadius: BorderRadius.all(Radius.circular(15)),
              boxShadow: [
                BoxShadow(
                    // color: Color.fromRGBO(51, 51, 51, 1),
                    color: Color.fromRGBO(0, 0, 0, 0.1),
                    offset: Offset(0.0, 4.0), //阴影xy轴偏移量
                    blurRadius: 24.0, //阴影模糊程度
                    spreadRadius: 1.0 //阴影扩散程度
                    )
              ],
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    ClipOval(
                      child: Image.asset(
                        _list[i]['photo'],
                        width: 73,
                        height: 73,
                      ),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(
                          height: 9,
                        ),
                        Row(
                          children: [
                            Text(
                              _list[i]['name'],
                              style: TextStyle(
                                  fontSize: 14,
                                  color: Color.fromRGBO(51, 51, 51, 1),
                                  fontWeight: FontWeight.bold),
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            // "images/home/man.png",//男
                            _list[i]["sex"] == "0"
                                ? Image.asset(
                                    "images/home/girl.png",
                                    width: 15,
                                    height: 15,
                                  )
                                : Image.asset(
                                    "images/home/man.png",
                                    width: 15,
                                    height: 15,
                                  ),
                          ],
                        ),
                        Text(
                          "${_list[i]['distance']}km",
                          style: TextStyle(
                            fontSize: 10,
                            color: Color.fromRGBO(153, 153, 153, 1),
                          ),
                        ),
                        SizedBox(
                          height: 6,
                        ),
                        Container(
                          padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                          decoration: BoxDecoration(
                            color: Color.fromRGBO(239, 239, 241, 1),
                            borderRadius: BorderRadius.all(Radius.circular(8)),
                          ),
                          child: Text(
                            _list[i]['constellation'],
                            style: TextStyle(
                              fontSize: 10,
                              color: Color.fromRGBO(51, 51, 51, 1),
                            ),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(10, 6, 10, 6),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(234, 249, 251, 1),
                      borderRadius: BorderRadius.all(Radius.circular(13))),
                  child: Row(
                    children: [
                      Text(
                        '在玩${_list[i]['type'] == "1" ? "交友派对" : _list[i]['type'] == "2" ? "相亲房" : ""}',
                        style: TextStyle(
                          color: Color.fromRGBO(21, 185, 208, 1),
                          fontSize: 12,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                      SizedBox(
                        width: 8,
                      ),
                      Image.asset(
                        "images/home/right_arrow_green.png",
                        width: 5,
                        height: 8,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 10,
          ),
        ],
      ));
    }
    return arr;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "玩友",
                style: TextStyle(
                  color: Color.fromRGBO(51, 51, 51, 1),
                  fontSize: 16,
                  fontWeight: FontWeight.w800,
                ),
              ),
              Row(
                children: [
                  Text(
                    "开启位置权限，获得附近玩友",
                    style: TextStyle(
                      color: Color.fromRGBO(153, 153, 153, 1),
                      fontSize: 14,
                    ),
                  ),
                  SizedBox(
                    width: 6,
                  ),
                  Image.asset(
                    "images/home/right_arrow.png",
                    width: 6,
                    height: 12,
                  )
                ],
              )
            ],
          ),
          SizedBox(
            height: 16,
          ),
          Column(
            children: _getData(),
          ),
        ],
      ),
    );
  }
}
