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

import '../../beans/epg_bean.dart';
import '../../beans/home_info_bean.dart';
import '../../network/NetworkConfig.dart';
import '../game/game_info_page.dart';

class HomeRecommendPage extends StatefulWidget {
  final HomeInfoBean homeInfoBean;

  HomeRecommendPage(Key key, {required this.homeInfoBean});

  @override
  State<HomeRecommendPage> createState() => _HomeRecommendState();
}

class _HomeRecommendState extends State<HomeRecommendPage> {
  @override
  Widget build(BuildContext context) {
    return _recommendItem(context);
  }

  _recommendItem(context) {
    final size = MediaQuery.of(context).size;
    switch (widget.homeInfoBean.categoryType) {
      case "Popular":
        return Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 15, top: 30),
              child: Text(
                "${widget.homeInfoBean.categoryName}",
                style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
              ),
            ),
            Container(
              width: size.width,
              height: 170,
              margin: EdgeInsets.only(top: 20),
              child: ListView.builder(
                padding: EdgeInsets.zero,
                itemCount: widget.homeInfoBean.epgList?.length,
                itemBuilder: (BuildContext context, int index) {
                  return _item(index, widget.homeInfoBean.epgList![index]);
                },
                scrollDirection: Axis.horizontal,
              ),
            ),
          ],
        );
        break;

      case "NewlyReleased":
        return Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 15, top: 30),
              child: Text(
                "${widget.homeInfoBean.categoryName}",
                style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
              ),
            ),
            Container(
              width: size.width,
              height: 180,
              margin: EdgeInsets.only(left: 15, right: 15),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    onTap: () {
                      _jumpToPage(widget.homeInfoBean.epgList?[0]);
                    },
                    child: SizedBox(
                      width: 99,
                      height: 140,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Positioned(
                              bottom: 0,
                              child: Container(
                                width: 99,
                                height: 125,
                                decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(11)),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFFFBB259),
                                      Color(0xFFF99559),
                                    ],
                                  ),
                                ),
                              )),
                          Column(
                            children: [
                              CachedNetworkImage(
                                width: 57,
                                height: 57,
                                imageUrl: '${widget.homeInfoBean.epgList?[0].imageUrl}',
                                errorWidget: (context, url, error) => const Icon(Icons.error),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 9),
                                child: Text(
                                  "${widget.homeInfoBean.epgList?[0].title}",
                                  style: TextStyle(fontSize: 13, color: Colors.white),
                                ),
                              ),
                              Container(
                                width: 75,
                                height: 29,
                                margin: EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.all(Radius.circular(18)),
                                ),
                                child: Text(
                                  "打开",
                                  style: TextStyle(fontSize: 13, color: Color(0xFFFA9D59)),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      _jumpToPage(widget.homeInfoBean.epgList?[1]);
                    },
                    child: SizedBox(
                      width: 99,
                      height: 140,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Positioned(
                              bottom: 0,
                              child: Container(
                                width: 99,
                                height: 125,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(11)),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFF63D98F),
                                      Color(0xFF31A47D),
                                    ],
                                  ),
                                ),
                              )),
                          Column(
                            children: [
                              CachedNetworkImage(
                                width: 57,
                                height: 57,
                                imageUrl: '${widget.homeInfoBean.epgList?[1].imageUrl}',
                                errorWidget: (context, url, error) => const Icon(Icons.error),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 9),
                                child: Text(
                                  "${widget.homeInfoBean.epgList?[1].title}",
                                  style: TextStyle(fontSize: 13, color: Colors.white),
                                ),
                              ),
                              Container(
                                width: 75,
                                height: 29,
                                margin: EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.all(Radius.circular(18)),
                                ),
                                child: Text(
                                  "打开",
                                  style: TextStyle(fontSize: 13, color: Color(0xFF3CAF81)),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      _jumpToPage(widget.homeInfoBean.epgList?[2]);
                    },
                    child: SizedBox(
                      width: 99,
                      height: 140,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Positioned(
                              bottom: 0,
                              child: Container(
                                width: 99,
                                height: 125,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(11)),
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [
                                      Color(0xFF39ADFE),
                                      Color(0xFF0877FF),
                                    ],
                                  ),
                                ),
                              )),
                          Column(
                            children: [
                              CachedNetworkImage(
                                width: 57,
                                height: 57,
                                imageUrl: '${widget.homeInfoBean.epgList?[2].imageUrl}',
                                errorWidget: (context, url, error) => const Icon(Icons.error),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 9),
                                child: Text(
                                  "${widget.homeInfoBean.epgList?[2].title}",
                                  style: TextStyle(fontSize: 13, color: Colors.white),
                                ),
                              ),
                              Container(
                                width: 75,
                                height: 29,
                                margin: EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.all(Radius.circular(18)),
                                ),
                                child: Text(
                                  "打开",
                                  style: TextStyle(fontSize: 13, color: Color(0xFF1383FF)),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
        break;

      case "MustPlay":
        return Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 15, top: 30),
              child: Text(
                "${widget.homeInfoBean.categoryName}",
                style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
              ),
            ),
            SizedBox(
              width: size.width,
              child: Column(
                children: _mustPlayItem(),
              ),
            ),
          ],
        );
        break;
      case "Fighting":
        return Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 15, top: 30),
              child: Text(
                "${widget.homeInfoBean.categoryName}",
                style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 20, left: 15, right: 15),
              child: GridView.builder(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  itemCount: widget.homeInfoBean.epgList!.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3, // 两列
                    mainAxisSpacing: 18.0,
                    crossAxisSpacing: 10.0,
                    childAspectRatio: 0.495,
                  ),
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    return _fightingItem(index, widget.homeInfoBean.epgList![index]);
                  }),
            ),
          ],
        );
        break;
      case "GameSeries":
        return Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 15, top: 30),
              child: Text(
                "${widget.homeInfoBean.categoryName}",
                style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 20, left: 15, right: 15),
              child: GridView.builder(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  itemCount: widget.homeInfoBean.epgList!.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, // 两列
                    mainAxisSpacing: 18.0,
                    crossAxisSpacing: 10.0,
                    childAspectRatio: 0.98125,
                  ),
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    return _gameSeriesItem(index, widget.homeInfoBean.epgList![index]);
                  }),
            ),
          ],
        );
        break;
      case "Sports":
        return Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 15, top: 30),
              child: Text(
                "${widget.homeInfoBean.categoryName}",
                style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
              ),
            ),
            Container(
              width: size.width,
              margin: EdgeInsets.only(left: 15, right: 15),
              child: ListView.builder(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  itemCount: widget.homeInfoBean.epgList!.length,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    return _sportsItem(index, widget.homeInfoBean.epgList![index]);
                  }),
            ),
          ],
        );
        break;

      case "Activity":
        return Column(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(left: 15, top: 30),
              child: Text(
                "${widget.homeInfoBean.categoryName}",
                style: TextStyle(color: Color(0xFFD6D6D7), fontSize: 16),
              ),
            ),
            Container(
              width: size.width,
              margin: EdgeInsets.only(left: 15, right: 15),
              child: ListView.builder(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  itemCount: widget.homeInfoBean.epgList!.length,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    return _activityItem(index, widget.homeInfoBean.epgList![index]);
                  }),
            ),
          ],
        );
        break;
    }
  }

  _item(index, EpgBean data) {
    return GestureDetector(
      onTap: () {
        _jumpToPage(data);
      },
      child: Container(
        margin: EdgeInsets.only(left: index == 0 ? 0 : 18),
        padding: EdgeInsets.only(left: index == 0 ? 15 : 0),
        child: Column(
          children: [
            CachedNetworkImage(
              width: 90,
              height: 90,
              imageUrl: '${data.imageUrl}',
              errorWidget: (context, url, error) => const Icon(Icons.error),
            ),
            Container(
              margin: EdgeInsets.only(top: 11),
              child: Text(
                "${data.title}",
                style: TextStyle(fontSize: 14, color: Color(0xFF909090)),
              ),
            ),
            Container(
              width: 75,
              height: 32,
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 11),
              child: Text(
                "打开",
                style: TextStyle(fontSize: 13, color: Colors.white),
              ),
              decoration: BoxDecoration(
                color: Color(0xFF074CE7),
                borderRadius: BorderRadius.all(Radius.circular(18)),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _mustPlayItem() {
    return List.generate(
      widget.homeInfoBean.epgList!.length,
      (index) => GestureDetector(
        onTap: () {
          _jumpToPage(widget.homeInfoBean.epgList![index]);
        },
        child: Container(
          height: 140,
          margin: EdgeInsets.only(top: 18, left: 15, right: 15),
          child: Stack(
            children: [
              Positioned(
                  bottom: 0,
                  child: Container(
                    width: 331,
                    height: 122,
                    decoration: BoxDecoration(
                      color: Color(0xFF202530),
                      borderRadius: BorderRadius.all(Radius.circular(11)),
                    ),
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        Positioned(
                            left: 133,
                            top: 34,
                            child: SizedBox(
                              width: 160,
                              child: Text(
                                "${widget.homeInfoBean.epgList?[index].title}",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 16, color: Color(0xFFD6D6D7)),
                              ),
                            )),
                        Positioned(
                            left: 133,
                            top: 67,
                            child: SizedBox(
                              width: 160,
                              child: Text(
                                "${widget.homeInfoBean.epgList?[index].subTitle}",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(fontSize: 13, color: Color(0xFFA6A6A6)),
                              ),
                            )),
                        Positioned(
                            right: 18,
                            child: Text(
                              "${widget.homeInfoBean.epgList?[index].score}",
                              style: TextStyle(fontSize: 21, color: Color(0xFFD6AF4A)),
                            )),
                      ],
                    ),
                  )),
              Positioned(
                top: 0,
                left: 18,
                child: CachedNetworkImage(
                  width: 99,
                  height: 125,
                  imageUrl: '${widget.homeInfoBean.epgList?[index].imageUrl}',
                  errorWidget: (context, url, error) => const Icon(Icons.error),
                ),
              ),
            ],
          ),
        ),
      ),
    ).toList();
  }

  _fightingItem(index, EpgBean data) {
    return GestureDetector(
      onTap: () {
        _jumpToPage(data);
      },
      child: Column(
        children: [
          CachedNetworkImage(
            width: 99,
            height: 125,
            imageUrl: '${data.imageUrl}',
            errorWidget: (context, url, error) => const Icon(Icons.error),
          ),
          Container(
            width: 99,
            alignment: Alignment.center,
            margin: EdgeInsets.only(top: 11),
            child: Text(
              '${data.title}',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 14, color: Color(0xFF909090)),
            ),
          ),
          Container(
            width: 75,
            height: 32,
            margin: EdgeInsets.only(top: 11),
            alignment: Alignment.center,
            decoration: BoxDecoration(color: Color(0xFF074CE7), borderRadius: BorderRadius.all(Radius.circular(18))),
            child: Text(
              "打开",
              style: TextStyle(fontSize: 13, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  _gameSeriesItem(index, EpgBean data) {
    return GestureDetector(
      onTap: () {
        _jumpToPage(data);
      },
      child: Column(
        children: [
          CachedNetworkImage(
            width: 157,
            height: 125,
            imageUrl: '${data.imageUrl}',
            errorWidget: (context, url, error) => const Icon(Icons.error),
          ),
          Container(
            width: 157,
            alignment: Alignment.center,
            margin: EdgeInsets.only(top: 11),
            child: Text(
              '${data.title}',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 14, color: Color(0xFF909090)),
            ),
          ),
        ],
      ),
    );
  }

  _sportsItem(index, EpgBean data) {
    return GestureDetector(
      onTap: () {
        _jumpToPage(data);
      },
      child: Container(
        height: 70,
        margin: EdgeInsets.only(top: 18),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              left: 0,
              child: CachedNetworkImage(
                width: 68,
                height: 68,
                imageUrl: '${data.imageUrl}',
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            Positioned(
              top: 11,
              left: 83,
              child: SizedBox(
                width: 150,
                child: Text(
                  "${data.title}",
                  style: TextStyle(fontSize: 14, color: Color(0xFFD6D6D7)),
                ),
              ),
            ),
            Positioned(
              bottom: 10,
              left: 83,
              child: SizedBox(
                width: 150,
                child: Text(
                  "${data.subTitle}",
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 13, color: Color(0xFFA6A6A6)),
                ),
              ),
            ),
            Positioned(
                right: 0,
                child: Container(
                  width: 75,
                  height: 32,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Color(0xFF074CE7),
                    borderRadius: BorderRadius.all(Radius.circular(18)),
                  ),
                  child: Text(
                    "打开",
                    style: TextStyle(fontSize: 13, color: Colors.white),
                  ),
                ))
          ],
        ),
      ),
    );
  }

  _activityItem(index, EpgBean data) {
    return GestureDetector(
      onTap: () {
        _jumpToPage(data);
      },
      child: Container(
        height: 206,
        margin: EdgeInsets.only(top: 18),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
                bottom: 0,
                child: Container(
                  width: 331,
                  height: 137,
                  decoration: BoxDecoration(color: Color(0xFF202530), borderRadius: BorderRadius.all(Radius.circular(11))),
                )),
            Positioned(
              top: 0,
              child: CachedNetworkImage(
                width: 313,
                height: 137,
                imageUrl: '${data.imageUrl}',
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            Positioned(
              bottom: 38,
              left: 10,
              child: SizedBox(
                width: 150,
                child: Text(
                  "${data.title}",
                  style: TextStyle(fontSize: 14, color: Color(0xFFD6D6D7)),
                ),
              ),
            ),
            Positioned(
              bottom: 10,
              left: 10,
              child: SizedBox(
                width: 150,
                child: Text(
                  "${data.subTitle}",
                  style: TextStyle(fontSize: 13, color: Color(0xFFA6A6A6)),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  ///跳转页面
  _jumpToPage(value) {
    if (NetworkConfig.token == "") {
      Navigator.pushNamed(context, "/LoginPage");
      return;
    }
    switch (value.resType) {
      case 1: //游戏详情
        Navigator.push(
            context,
            MaterialPageRoute(
              //导航打开新视图
              builder: (context) => GameInfoPage(
                gameId: "${value.resId}",
              ),
            ));
        break;
      case 2: //app页面
        switch (value.resId) {
          case "shop": //商城
            break;
          case "Task": //任务中心
            break;
        }
        break;
      case 3: //内部H5
        break;
      case 4: //外部H5
        break;
    }
  }
}