import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:ysairplane/tools/YSNetWorking.dart';
import 'package:ysairplane/tools/YSTools.dart';

const APPBAR_SCROLL_OFFSET = 100; //设置滑动变化的偏移量

class YSSquareArticle extends StatefulWidget {
  final squareId,typeId;
  const YSSquareArticle({Key key, this.squareId, this.typeId}) : super(key: key);
  @override
  _YSSquareArticleState createState() => _YSSquareArticleState();
}

class _YSSquareArticleState extends State<YSSquareArticle> {
  ScrollController _scroll = ScrollController();
  double appBarAlpha = 0;
  double start = 0;
  double number = 0;
  int _page = 1;
  List _dataArray = [];
  _onScroll(offset) {
    double alpha = offset / APPBAR_SCROLL_OFFSET;
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    setState(() {
      appBarAlpha = alpha;
    });
  }
  Map _dict;
  @override
  void initState() {
    Future.delayed(Duration(seconds: 0)).then((value){
      _getSquareDetailData();
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SingleChildScrollView(
        child: _dict==null?Container(
          height: MediaQuery.of(context).padding.top+44,
          padding: EdgeInsets.only(left: 15,right: 15,top: MediaQuery.of(context).padding.top),
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                onTap: (){
                  Navigator.pop(context);
                },
                child: Icon(Icons.arrow_back_ios,size: 20,color: Color(0xFF000000),),
              ),
              Text('详情',style: TextStyle(fontSize: 18,color: Color(0xFF000000),decoration: TextDecoration.none),),
              Icon(Icons.share,size: 25,color: Color(0xFF000000),)
            ],
          ),
        ):Column(
          children: [
            Stack(
              children: [
                Container(
                  height: MediaQuery.of(context).size.height-50,
                  child: Listener(
                    onPointerDown: (PointerDownEvent pointerDownEvent) {
                      start = pointerDownEvent.position.dy;
                    },
                    onPointerMove: (PointerMoveEvent pointerMoveEvent) {
                      setState(() {
                        number = (pointerMoveEvent.position.dy-start)/5;
                      });
                    },
                    onPointerUp: (PointerUpEvent upEvent) {
                      setState(() {
                        number = 0;
                      });
                    },
                    child: NotificationListener(
                      onNotification: (scrollNotification) {
                        if (scrollNotification is ScrollUpdateNotification &&
                            scrollNotification.depth == 0) {
                          //滚动且是列表滚动的时候
                          _onScroll(scrollNotification.metrics.pixels);
                          return true;
                        }else{
                          return false;
                        }
                      },
                      child: EasyRefresh(
                        onRefresh: _getSquareDetailData,
                        onLoad: _loadMore,
                        header: MaterialHeader(

                        ),
                        footer: BezierBounceFooter(
                          backgroundColor: Colors.transparent,
                          color: Colors.transparent,
                        ),
                        child: SingleChildScrollView(
                          controller: _scroll,
                          padding: EdgeInsets.all(0),
                          child: Stack(
                            children: [
                              Container(
                                height: 240+number,
                                width: MediaQuery.of(context).size.width,
                                child: Image(
                                  image: NetworkImage('${_dict['topicCover']}'),
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 230+number),
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10))
                                ),
                                child: Column(
                                  children: [
                                    Container(
                                      height: 60,
                                      padding: EdgeInsets.only(left: 15,right: 15,top: 10,bottom: 10),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Container(
                                            height: 40,
                                            width: 40,
                                            decoration: BoxDecoration(
                                              borderRadius: BorderRadius.all(Radius.circular(20)),
                                              image: DecorationImage(image: NetworkImage('${_dict['user']['avatar']}'),fit: BoxFit.fill)
                                          ),
                                            margin: EdgeInsets.only(right: 6),
                                          ),
                                          Column(
                                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                            children: [
                                              Container(
                                                width: MediaQuery.of(context).size.width-170,
                                                child: Text('${_dict['user']['nickname']}',style: TextStyle(fontSize: 14,color: Color(0xFF333333),decoration: TextDecoration.none),),
                                              ),
                                              Container(
                                                width: MediaQuery.of(context).size.width-170,
                                                child: Text('旅游达人',style: TextStyle(fontSize: 10,color: Color(0xFF999999),decoration: TextDecoration.none,fontWeight: FontWeight.normal),),
                                              )
                                            ],
                                          ),
                                          Container(
                                            height: 30,
                                            width: 65,
                                            child: Image.asset('lib/images/look.png'),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Divider(
                                      height: 0.5,
                                      color: Color(0xFFE5E5E5),
                                    ),
                                    Container(
                                      width: MediaQuery.of(context).size.width,
                                      padding: EdgeInsets.only(top: 15,left: 10,right: 10,bottom: 15),
                                      child: Text('${_dict['topicTitle']}',style: TextStyle(fontSize: 17,color: Color(0xFF333333),decoration: TextDecoration.none),),
                                    ),
                                    Container(
                                      width: MediaQuery.of(context).size.width,
                                      padding: EdgeInsets.only(left: 10,right: 10,bottom: 15),
                                      child: Text('${_dict['topicContent']}',
                                        style: TextStyle(fontSize: 14,color: Color(0xFF666666),decoration: TextDecoration.none,fontWeight: FontWeight.normal),),
                                    ),
                                    Container(
                                      height: 10,
                                      color: Color(0xFFF1F2F4),
                                      margin: EdgeInsets.only(bottom: 10),
                                    ),
                                    Container(
                                      width: MediaQuery.of(context).size.width,
                                      padding: EdgeInsets.only(left: 10,right: 10,bottom: 15),
                                      child: Text('335210条评论',style: TextStyle(fontSize: 13,color: Color(0xFF666666),decoration: TextDecoration.none,fontWeight: FontWeight.normal),),
                                    ),
                                    Container(
                                      height: 50,
                                      padding: EdgeInsets.only(left: 10,right: 10,bottom: 10),
                                      child: Row(
                                        children: [
                                          Container(
                                            height: 40,
                                            width: 40,
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.all(Radius.circular(20)),
                                                color: Color(0xFF151515)
                                            ),
                                          ),
                                          GestureDetector(
                                            onTap: (){
                                              _showInputView();
                                            },
                                            child: Container(
                                              height: 40,
                                              margin: EdgeInsets.only(left: 10),
                                              padding: EdgeInsets.only(left: 10,right: 10),
                                              width: MediaQuery.of(context).size.width-80,
                                              decoration: BoxDecoration(
                                                  borderRadius: BorderRadius.all(Radius.circular(20)),
                                                  color: Color(0xFFF5F5F5)
                                              ),
                                              alignment: Alignment.centerLeft,
                                              child: Text('有爱评论，说点儿好听的~',style:  TextStyle(fontSize: 14,color: Color(0xFF595959),decoration: TextDecoration.none,fontWeight: FontWeight.normal),)
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Container(
                                      child: ListView.separated(
                                        padding: EdgeInsets.only(top: 15),
                                        shrinkWrap: true,
                                        itemBuilder: (context,index){
                                          return Container(
                                            child: Column(
                                              children: [
                                                Container(
                                                  padding: EdgeInsets.only(left: 10,right: 10,bottom: 10),
                                                  child: Row(
                                                    crossAxisAlignment: CrossAxisAlignment.start,
                                                    children: [
                                                      Container(
                                                        height: 40,
                                                        width: 40,
                                                        decoration: BoxDecoration(
                                                            borderRadius: BorderRadius.all(Radius.circular(20)),
                                                            image: DecorationImage(image: NetworkImage('${_dataArray[index]['avatar']}'),fit: BoxFit.fill)
                                                        ),
                                                      ),
                                                      Container(
                                                        margin: EdgeInsets.only(left: 10),
                                                        width: MediaQuery.of(context).size.width-70,
                                                        child: Column(
                                                          crossAxisAlignment: CrossAxisAlignment.start,
                                                          children: [
                                                            GestureDetector(
                                                              child: Text('${_dataArray[index]['nickname']}',
                                                                style: TextStyle(fontSize: 14,color: Color(0xFF3C61B1),decoration: TextDecoration.none,fontWeight: FontWeight.bold),),
                                                              onTap: (){
                                                                _showInputView(type: 1,toUserid: int.parse('${_dataArray[index]['fromUserId']}'),
                                                                    fatherCommentId: int.parse('${_dataArray[index]['id']}'),fromUserId: int.parse('${_dataArray[index]['fromUserId']}'));
                                                              },
                                                            ),
                                                            Text('${_dataArray[index]['comment']}',style: TextStyle(fontSize: 15,color: Color(0xFF333333),decoration: TextDecoration.none,fontWeight: FontWeight.normal)),
                                                          ],
                                                        ),
                                                      )
                                                    ],
                                                  ),
                                                ),
                                                Container(
                                                  child: ListView.separated(
                                                    itemBuilder: (context,indexSub){
                                                      return Row(
                                                        crossAxisAlignment: CrossAxisAlignment.start,
                                                        children: [
                                                          Container(
                                                            height: 20,
                                                            width: 20,
                                                            decoration: BoxDecoration(
                                                                borderRadius: BorderRadius.all(Radius.circular(20)),
                                                                image: DecorationImage(image: NetworkImage('${_dataArray[index]['dtSquareCommentsList'][indexSub]['avatar']}'),fit: BoxFit.fill)
                                                            ),
                                                          ),
                                                          Container(
                                                            margin: EdgeInsets.only(left: 10),
                                                            width: MediaQuery.of(context).size.width-130,
                                                            child: Column(
                                                              crossAxisAlignment: CrossAxisAlignment.start,
                                                              children: [
                                                                GestureDetector(
                                                                  child: Text('${_dataArray[index]['dtSquareCommentsList'][indexSub]['nickname']}',
                                                                    style: TextStyle(fontSize: 14,color: Color(0xFF3C61B1),decoration: TextDecoration.none,fontWeight: FontWeight.bold),),
                                                                  onTap: (){
                                                                    _showInputView(type: 1,toUserid: _dataArray[index]['dtSquareCommentsList'][indexSub]['fromUserId'],
                                                                        fatherCommentId: _dataArray[index]['dtSquareCommentsList'][indexSub]['fatherCommentId']);
                                                                  },
                                                                ),
                                                                RichText(
                                                                  text: TextSpan(
                                                                      style: TextStyle(fontSize: 14,color: Color(0xFF333333),decoration: TextDecoration.none,fontWeight: FontWeight.normal),
                                                                      text: '回复',
                                                                      children: [
                                                                        TextSpan(
                                                                            text: ' ${_dataArray[index]['dtSquareCommentsList'][indexSub]['otherNickname']}：',
                                                                            style: TextStyle(color: Color(0xFF3C61B1),fontWeight: FontWeight.bold)
                                                                        ),
                                                                        TextSpan(
                                                                            text: '${_dataArray[index]['dtSquareCommentsList'][indexSub]['comment']}',
                                                                            style: TextStyle(color: Color(0xFF333333))
                                                                        ),
                                                                        TextSpan(
                                                                            text: '    ${_dataArray[index]['dtSquareCommentsList'][indexSub]['timeNode']}',
                                                                            style: TextStyle(color: Color(0xFF999999),fontSize: 12)
                                                                        )
                                                                      ]
                                                                  ),
                                                                )
                                                              ],
                                                            ),
                                                          )
                                                        ],
                                                      );
                                                    },
                                                    separatorBuilder: (context,index){
                                                      return Container(
                                                        height: 5,
                                                      );
                                                    },
                                                    itemCount: (_dataArray[index]['dtSquareCommentsList']).length,
                                                    shrinkWrap: true,
                                                    padding: EdgeInsets.only(left: 60,right: 40),
                                                    physics: NeverScrollableScrollPhysics(),
                                                  ),
                                                )
                                              ],
                                            ),
                                          );
                                        },
                                        separatorBuilder: (context,index){
                                          return Container(
                                            height: 5,
                                          );
                                        },
                                        itemCount: _dataArray.length,
                                        physics: NeverScrollableScrollPhysics(),
                                      ),
                                    )

                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  height: MediaQuery.of(context).padding.top+44,
                  padding: EdgeInsets.only(left: 15,right: 15,top: MediaQuery.of(context).padding.top),
                  color: Colors.white.withOpacity(appBarAlpha),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        onTap: (){
                          Navigator.pop(context);
                        },
                        child: Icon(Icons.arrow_back_ios,size: 20,color: appBarAlpha>0.5?Color(0xFF000000):Colors.white,),
                      ),
                      if(appBarAlpha>0.5)Text('详情',style: TextStyle(fontSize: 18,color: Color(0xFF000000),decoration: TextDecoration.none),),
                      Icon(Icons.share,size: 25,color: appBarAlpha>0.5?Color(0xFF000000):Colors.white,)
                    ],
                  ),
                )
              ],
            ),
            Container(
              height: 50,
              padding: EdgeInsets.only(left: 15,right: 15),
              color: Color(0xFFF5F5F5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: MediaQuery.of(context).size.width-120,
                    padding: EdgeInsets.only(left: 15,right: 15),
                    height: 30,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(15))
                    ),
                    child: Row(
                      children: [
                        GestureDetector(
                          onTap: (){
                            _showInputView(type: 0);
                          },
                          child: Container(
                            width: MediaQuery.of(context).size.width-175,
                            child: Text('我来说两句',style: TextStyle(fontSize: 14,color: Color(0xFF999999),decoration: TextDecoration.none,fontWeight: FontWeight.normal),),
                          ),
                        ),
                        Icon(Icons.tag_faces,size: 25,color: Color(0xFFF5F5F5),),
                      ],
                    ),
                  ),
                  GestureDetector(
                    onTap: (){
                      _postAgreementData(1);
                    },
                    child: Container(
                      height: 20,
                      width: 20,
                      child: Image.asset(_dict==null?'lib/images/love.png':_dict['likeStatus']==1?'lib/images/love2.png':'lib/images/love.png'),
                    ),
                  ),
                  GestureDetector(
                    child: Icon(_dict==null?Icons.star_border:_dict['collectStatus']==1?Icons.star:Icons.star_border,size: 20,color: Color(0xFFF5C419),),
                    onTap: (){
                      _postAgreementData(0);
                    },
                  ),
                  Icon(Icons.share,size: 20,color: Color(0xFF404040),),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  _showInputView({int type,int toUserid,int fatherCommentId,int fromUserId}){
    TextEditingController _text = TextEditingController();
    Navigator.push(context, PopRoute(child: BottomInputDialog(
      height: 140,
      inputView: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('评论',style: TextStyle(fontSize: 15,color: Color(0xFF424242),decoration: TextDecoration.none,fontWeight: FontWeight.bold),),
              GestureDetector(
                child: Text('发布',style: TextStyle(fontSize: 15,color: Color(0xFF4187D9),decoration: TextDecoration.none,fontWeight: FontWeight.bold),),
                onTap: (){
                  if(type==0){
                    _postCommentData({'comment':_text.text,'topicId':widget.squareId,'fatherCommentId':0,'fromUserId':0});
                  }else{
                    _postCommentData({'comment':_text.text,'topicId':widget.squareId,'fatherCommentId':fatherCommentId,'toUserId':toUserid,'fromUserId':fromUserId});
                  }
                },
              ),
            ],
          ),
          Container(
            height: 50,
            decoration: BoxDecoration(
                color: Color(0xFFF7F7F7),
                borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            margin: EdgeInsets.only(top: 10,bottom: 10),
            child: CupertinoTextField(
              placeholder: '友善发言，理性讨论，阳光你我',
              style: TextStyle(fontSize: 14,color: Color(0xFF999999),decoration: TextDecoration.none,fontWeight: FontWeight.normal),
              placeholderStyle: TextStyle(fontSize: 14,color: Color(0xFF999999),decoration: TextDecoration.none,fontWeight: FontWeight.normal),
              decoration: BoxDecoration(),
              maxLines: 50,
              autofocus: true,
              controller: _text,
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(),
              Icon(Icons.tag_faces,size: 25,color: Color(0xFF5C5C5C),),
            ],
          )
        ],
      ),
    )));
  }

  _postCommentData(Map parma) async{
    Map dict = await ysRequestHttp(context,type: requestType.post,api: '/app/piazza/SquareCommunity/comment/add',parameter: parma,isLoading: false,isToken: true);
    if(dict!=null){
      _getSquareDetailData();
    }
  }

  Future<void> _getSquareDetailData() async{
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/details',parameter: {'id':widget.squareId,'type':widget.typeId},isLoading: true,isToken: true,refresh: (){
      _getSquareDetailData();
    });
    if(dict!=null){
      setState(() {
        _dict = dict['data'];
      });
      _refreshData();
    }
  }

  Future<void> _refreshData() async{
    _page = 1;
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/comment/list',parameter: {'pageNo':_page,'pageSize':10,'id':widget.squareId,'type':widget.typeId},isToken: true);
    if(dict!=null){
      setState(() {
        _dataArray = dict['data']['resultList'];
        _page = dict['data']['pageNum'];
      });
    }
  }

  Future<void> _loadMore() async{
    _page++;
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/comment/list',parameter: {'pageNo':_page,'pageSize':10,'id':widget.squareId,'type':widget.typeId},isToken: true);
    if(dict!=null){
      setState(() {
        _dataArray.addAll(dict['data']['resultList']);
        _page = dict['data']['pageNum'];
      });
    }
  }

  _postAgreementData(int type) async{
    Map request = {'type':type};
    request['topicId'] = widget.squareId;
    Map dict = await ysRequestHttp(context,type: requestType.post,api: '/app/piazza/SquareCommunity/likeAndCollect',parameter: request,isLoading: false,isToken: true,refresh: (){

    });
    if(dict!=null){
      setState(() {
        if(type==1){
          _dict['likeStatus'] = dict['data'];
        }else{
          _dict['collectStatus'] = dict['data'];
        }
      });
    }
  }
}