/*
 * @author dx
 * @date   2019-09-17
 **/
import 'dart:async';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart' as IMAGE;
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gmalpha_flutter/ActivityReportModel/service/remote/entity/ActivityReportEntity.dart';
import 'package:flutter/material.dart';
import 'package:gmalpha_flutter/ActivityReportModel/page/ActivityReportModel.dart';
import 'package:gmalpha_flutter/commonModel/base/Temp.dart';
import 'package:gmalpha_flutter/commonModel/ui/ALColors.dart';

final _goldenColor = Color(0xFFB9A689);

class ActivityReportPage extends StatefulWidget {
  ActivityReportModel _model;

  ActivityReportPage(int id, int type, String fromPage) {
    _model = new ActivityReportModel(id, type, fromPage);
  }

  @override
  State<StatefulWidget> createState() => ActivityReportState(_model);
}

class ActivityReportState extends State<ActivityReportPage> {
  ActivityReportModel _model;

  ActivityReportState(this._model);

  @override
  void initState() {
    super.initState();
    _model.start();
    _model.init(context);
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 375, height: 667)..init(context);
    return IMAGE.WillPopScope(
      child: Scaffold(
          appBar: AppBar(
            title: Text(''),
            centerTitle: true,
            leading: IMAGE.GestureDetector(
              onTap: () {
                click("brand_report", "return");
                _model.end();
                Navigator.pop(context, "");
                jumpToSearch();
              },
              child: IMAGE.Image.asset("images/nav_back.png"),
            ),
            actions: <Widget>[
              GestureDetector(
                child: Container(
                    margin: EdgeInsets.only(right: 30),
                    child: Center(
                        child: Text(
                          '再测一次',
                          style: TextStyle(
                              color: ALColors.Color323232,
                              fontSize: 14,
                              fontWeight: FontWeight.bold),
                        ))),
                onTap: () {
                  click("brand_report", "test_again");
                  _model.end();
                  Navigator.pop(context, "");
                  jumpToH5();
                },
              )
            ],
          ),
          body: StreamBuilder<ActivityReportEntity>(
            stream: _model.activityReportLive.stream,
            initialData: _model.activityReportLive.data,
            builder: (context, data) {
              if (data.data == null) {
                return loadingItem();
              }
              if (data.data.error != 0 || data.data.data == null) {
                return errorItem(data.data.message);
              }
              return Container(
                color: Color(0xfff5f5f5),
                padding: EdgeInsets.only(
                    left: ScreenUtil().setWidth(16),
                    right: ScreenUtil().setWidth(16)),
                child: SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      TopCard(share: data.data.data.report?.share),
                      SizedBox(height: ScreenUtil().setHeight(8)),
                      PictorialCard(_model,
                        pictorialList: data.data.data.report?.cards,
                        id: _model.id,),
                      SizedBox(height: ScreenUtil().setHeight(38))
                    ],
                  ),
                ),
              );
            },
          )),
      onWillPop: (){
        _model.end();
        Navigator.pop(context, "");
      },
    );
  }

  Widget errorItem(String reason) {
    return Center(
      child: Text("$reason"),
    );
  }

  Widget loadingItem() {
    return Center(child: CircularProgressIndicator());
  }

  @override
  void dispose() {
    super.dispose();
    _model.dispose();
  }
}

class TopCard extends StatelessWidget {
  final share;

  TopCard({Key key, this.share}) : super(key: key);

  _moneyContainer(val) {
    return Container(
        child: Column(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(color: Color(0xffeeeeee), width: 1.0))),
          margin: EdgeInsets.only(left: 18, right: 18),
          height: ScreenUtil().setHeight(62),
          child: Row(children: <Widget>[
            Text('¥',
                style: TextStyle(
                    fontSize: 28,
                    color: _goldenColor,
                    fontWeight: FontWeight.bold)),
            SizedBox(width: 8),
            Text('$val',
                style: TextStyle(
                    color: _goldenColor,
                    fontSize: ScreenUtil().setSp(45),
                    fontWeight: FontWeight.bold)),
          ]),
        )
      ],
    ));
  }

  _percentageContainer(val) {
    return Container(
        height: ScreenUtil().setHeight(28),
        child: Row(
          children: <Widget>[
            Text(
              '$val%',
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(20),
                  color: _goldenColor,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(width: 4),
            Text(
              '的全国同龄人',
              style: TextStyle(
                  fontSize: 11,
                  color: _goldenColor,
                  fontWeight: FontWeight.bold),
            )
          ],
        ));
  }

  _rankingContainer(val) {
    return Container(
      height: ScreenUtil().setHeight(28),
      child: Row(
        children: <Widget>[
          SizedBox(width: 4),
          Text(
            '$val',
            style: TextStyle(
                fontSize: ScreenUtil().setSp(20),
                color: _goldenColor,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(width: 4),
          Text(
            '名',
            style: TextStyle(
                fontSize: 11, color: _goldenColor, fontWeight: FontWeight.bold),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    if (share == null) {
      return Container();
    }
    return Container(
        color: Colors.white,
        width: ScreenUtil().setWidth(343),
        height: ScreenUtil().setHeight(277),
        child: Container(
          width: ScreenUtil().setWidth(343),
          height: ScreenUtil().setHeight(277),
          decoration: BoxDecoration(
              border: Border.all(
                  color: ALColors.Color323232,
                  width: ScreenUtil().setWidth(2))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(
                height: ScreenUtil().setHeight(8.5),
                child: Container(
                  margin: EdgeInsets.only(top: ScreenUtil().setHeight(.5)),
                  color: ALColors.Color323232,
                ),
              ),
              Padding(
                  padding: EdgeInsets.only(
                      left: ScreenUtil().setWidth(18),
                      top: ScreenUtil().setHeight(20)),
                  child: Text(
                    '你一年的颜值氪金约为：',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      color: ALColors.Color323232,
                      fontSize: ScreenUtil().setSp(12),
                      height: 17 / 12,
                      fontWeight: FontWeight.bold,
                      letterSpacing: 1.5,
                    ),
                  )),
              AnimationNumber(
                  targetNmber: share.totalCost.toDouble(),
                  delay: 400,
                  container: _moneyContainer),
              Container(
                  padding: EdgeInsets.only(
                      left: ScreenUtil().setWidth(18),
                      right: ScreenUtil().setWidth(18),
                      top: ScreenUtil().setHeight(14)),
                  child:
                      AnimationCharacter(targetNmber: share.beat, delay: 1000)),
              Container(
                  padding: EdgeInsets.only(
                      left: ScreenUtil().setWidth(18),
                      right: ScreenUtil().setHeight(18),
                      top: ScreenUtil().setHeight(16)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        color: Color(0xFFF6F6F6),
                        width: ScreenUtil().setWidth(140),
                        height: ScreenUtil().setHeight(55),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              height: ScreenUtil().setHeight(15),
                              margin: EdgeInsets.only(
                                  left: ScreenUtil().setWidth(8),
                                  top: ScreenUtil().setHeight(4)),
                              child: Text('你的氪金量超过了',
                                  style: TextStyle(
                                      fontSize: ScreenUtil().setSp(11),
                                      color: ALColors.Color8E8E8E,
                                      fontWeight: FontWeight.bold)),
                            ),
                            SizedBox(
                              width: double.maxFinite,
                              height: ScreenUtil().setHeight(4),
                            ),
                            Stack(
                              children: <Widget>[
                                Container(
                                  width: double.maxFinite,
                                  height: ScreenUtil().setHeight(28),
                                ),
                                Positioned(
                                    right: ScreenUtil().setWidth(4),
                                    child: AnimationNumber(
                                        targetNmber: share.beat.toDouble(),
                                        delay: 1000,
                                        container: _percentageContainer))
                              ],
                            )
                          ],
                        ),
                      ),
                      Container(
                        color: Color(0xFFF6F6F6),
                        width: ScreenUtil().setWidth(140),
                        height: ScreenUtil().setHeight(55),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                                height: ScreenUtil().setHeight(15),
                                margin: EdgeInsets.only(
                                    top: ScreenUtil().setHeight(4),
                                    left: ScreenUtil().setWidth(8)),
                                child: Text('你的氪金排名为全国',
                                    style: TextStyle(
                                        fontSize: ScreenUtil().setSp(11),
                                        color: Color(0xFF8E8E8E),
                                        fontWeight: FontWeight.bold))),
                            SizedBox(
                              width: double.maxFinite,
                              height: ScreenUtil().setHeight(4),
                            ),
                            Stack(
                              children: <Widget>[
                                Container(
                                  width: double.maxFinite,
                                  height: ScreenUtil().setHeight(28),
                                ),
                                Positioned(
                                  right: ScreenUtil().setWidth(6),
                                  child: AnimationNumber(
                                      targetNmber: share.rank.toDouble(),
                                      delay: 1000,
                                      container: _rankingContainer),
                                )
                              ],
                            )
                          ],
                        ),
                      )
                    ],
                  ))
            ],
          ),
        ));
  }
}

class PictorialCard extends StatelessWidget {
  final List<Cards> pictorialList;
  final id;
  final ActivityReportModel _model;

  PictorialCard(this._model,{Key key, this.pictorialList, this.id}) : super(key: key);

  Widget _gridViewItemUI(BuildContext context, item) {
    return Container(
        width: ScreenUtil().setWidth(110),
        height: ScreenUtil().setWidth(110),
        child: CachedNetworkImage(
          imageUrl: '${item.image}',
          width: ScreenUtil().setWidth(110),
          fit: BoxFit.cover,
        ));
  }

  Widget _listViewUI(BuildContext context, item) {
    var indexOf = pictorialList.indexOf(item);
    List<Widget> list = [];
    item.drafts.forEach((item) {
      list.add(_gridViewItemUI(context, item));
    });
    return Container(
        margin: EdgeInsets.only(top: ScreenUtil().setHeight(32)),
        child: GestureDetector(
            onTap: () {
              click("brand_report", "recommand_${indexOf + 1}");
              _model.end();
              jumpToPictorial('${item.protocol}&survey_record_id=$id');
            },
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: ScreenUtil().setWidth(343),
                  padding:
                      EdgeInsets.only(bottom: ScreenUtil().setHeight(11.0)),
                  child: Wrap(spacing: 6, children: list),
                ),
                Container(
                    width: ScreenUtil().setWidth(343),
                    height: ScreenUtil().setHeight(53),
                    color: Colors.white,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                            Container(
                              padding: EdgeInsets.only(
                                  right: ScreenUtil().setWidth(12)),
                              child: Text(
                                '${item.guide}',
                                style: TextStyle(
                                    color: Color(0xFF323232),
                                    fontWeight: FontWeight.bold,
                                    fontSize: ScreenUtil().setSp(14)),
                              ),
                            ),
                            Positioned(
                              width: ScreenUtil().setWidth(10),
                              height: ScreenUtil().setHeight(20),
                              top: ScreenUtil().setHeight(-2),
                              right: 0,
                              child: IMAGE.Image.asset('images/right_icon.png',
                                  width: ScreenUtil().setWidth(10),
                                  height: ScreenUtil().setHeight(20)),
                            )
                          ],
                        )
                      ],
                    ))
              ],
            )));
  }

  @override
  Widget build(BuildContext context) {
    if (pictorialList == null) {
      return Container();
    }
    return Column(
      children: pictorialList.map((item) {
        return _listViewUI(context, item);
      }).toList(),
    );
  }
}

class AnimationNumber extends StatefulWidget {
  final targetNmber;
  final delay;
  final container;

  AnimationNumber({Key key, this.targetNmber, this.delay, this.container})
      : super(key: key);

  _AnimationNumberState createState() => _AnimationNumberState();
}

class _AnimationNumberState extends State<AnimationNumber>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  var _timer;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: Duration(milliseconds: widget.delay),
        lowerBound: 0,
        upperBound: widget.targetNmber,
        vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
    _timer.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _timer = Timer(Duration(seconds: 1), () {
      _animationController.forward();
    });
    return widget.container(_animationController.value.toInt());
  }
}

class AnimationCharacter extends StatefulWidget {
  final targetNmber;
  final delay;

  AnimationCharacter({Key key, this.targetNmber, this.delay}) : super(key: key);

  _AnimationCharacterState createState() => _AnimationCharacterState();
}

class _AnimationCharacterState extends State<AnimationCharacter>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  var _timer;
  List peopleList;
  double margin = 10;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: Duration(milliseconds: widget.delay),
        lowerBound: 0,
        upperBound: 10,
        vsync: this);

    peopleList = [
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0},
      {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}
    ];

    final target = (widget.targetNmber / 10).ceil();
    _animationController.addListener(() {
      var value = _animationController.value;
      double percent = value / 10;
      double frist = target / 10;
      int nowValue;

      setState(() {
        peopleList.forEach((item) {
          int index = peopleList.indexOf(item);
          if (percent < frist) {
            double tempPercent = percent / frist;
            nowValue = (target * tempPercent).ceil();
            margin = ScreenUtil().setWidth(10.0 + (25.8 * nowValue).ceil());
            if (index != nowValue) {
              item['url'] = 'images/dark_grey_person.png';
            } else {
              item['url'] = 'images/golden_person.png';
            }
          } else {
            double tempPercent = (percent - frist) / (1 - frist);
            nowValue = (target + (11 - target) * tempPercent).ceil();
            if (index > target && index <= nowValue) {
              item['url'] = 'images/black_person.png';
            }
          }
        });
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
    _timer.dispose();
  }

  Widget _peopleViewUI(BuildContext context, item) {
    var index = peopleList.indexOf(item);
    return Container(
      margin: index != 0 ? EdgeInsets.only(left: ScreenUtil().setWidth(12)) : EdgeInsets.all(0),
      child: IMAGE.Image.asset(item['url'],
        width: ScreenUtil().setWidth(item['width']),
        height: ScreenUtil().setHeight(item['height'])
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    _timer = Timer(Duration(seconds: 1), () {
      _animationController.forward();
    });
    return Column(
      children: <Widget>[
        _youContainer(),
        Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: peopleList.map((item) {
              return _peopleViewUI(context, item);
            }).toList())
      ],
    );
  }

  _youContainer() {
    return Container(
        child: Stack(children: <Widget>[
      Container(
        width: double.maxFinite,
        height: ScreenUtil().setHeight(19),
        margin: EdgeInsets.only(bottom: ScreenUtil().setHeight(4)),
      ),
      Positioned(
          child: Container(
        margin: EdgeInsets.only(left: margin),
        width: ScreenUtil().setWidth(32),
        height: ScreenUtil().setHeight(19),
        child: IMAGE.Image.asset('images/you_icon.png'),
      ))
    ]));
  }
}
