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

import 'YSSquareArticle.dart';
import 'YSSquareVideo.dart';

class YSMineSquare extends StatefulWidget {
  @override
  _YSMineSquareState createState() => _YSMineSquareState();
}

class _YSMineSquareState extends State<YSMineSquare> {
  ScrollController _scrollController = ScrollController();
  Map _dict;
  int _selected = 0;
  List _dataArray = [];
  int _page = 1;
  @override
  void initState() {
    Future.delayed(Duration(seconds: 0)).then((value){
      _getUserInfoData();
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: EasyRefresh(
        onRefresh: _refresh,
        onLoad: _loadMore,
        header: MaterialHeader(

        ),
        footer: BezierBounceFooter(
          backgroundColor: Colors.transparent,
          color: Colors.transparent,
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: MediaQuery.of(context).padding.top+270,
                color: Colors.white,
                child: Stack(
                  children: [
                    Container(
                      height: MediaQuery.of(context).padding.top+220,
                      child: _dict==null?Image(
                        image: AssetImage('lib/images/squareBg2.png'),
                      ):CachedNetworkImage(
                        imageUrl: '${_dict['backGroundUrl']}',
                        fit: BoxFit.fill,
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top+10,left: 15,right: 15),
                      height: 50,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          GestureDetector(
                            child: Icon(Icons.arrow_back_ios,size: 20,color: Colors.white,),
                            onTap: (){
                              Navigator.pop(context);
                            },
                          ),
                          Stack(
                            children: [
                              GestureDetector(
                                child: Image(image: AssetImage('lib/images/suqareMsg.png'),height: 20,width: 20,),
                                onTap: (){
                                  Navigator.of(context).push(
                                    CupertinoPageRoute(
                                      builder: (context){
                                        return YSMessage();
                                      }
                                    )
                                  );
                                },
                              ),
                              Container(
                                margin: EdgeInsets.only(left: 15),
                                height: 15,
                                width: 15,
                                decoration: BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.all(Radius.circular(7.5))
                                ),
                                alignment: Alignment.center,
                                child: Text('6',style: TextStyle(fontSize: 11,color: Colors.white,fontWeight: FontWeight.normal,decoration: TextDecoration.none),),
                              )
                            ],
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top+70,left: 15),
                      height: MediaQuery.of(context).padding.top+170,
                      width: MediaQuery.of(context).size.width-30,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                        boxShadow: [
                          BoxShadow(
                            color: Color(0xFFF4F4F4),
                            blurRadius: 5,
                            offset: Offset(0.5, 3.0),
                          ),
                        ]
                      ),
                      padding: EdgeInsets.all(15),
                      child: Row(
                        children: [
                          Container(
                            width: (MediaQuery.of(context).size.width-60)*0.6,
                            padding: EdgeInsets.only(right: 30),
                            child: Column(
                              children: [
                                Container(
                                  child: Row(
                                    children: [
                                      Text(_dict==null?'':(_dict['user']['nickname']).toString().length>7?(_dict['user']['nickname']).toString().substring(0,7)+'..':(_dict['user']['nickname']).toString(),
                                        style: TextStyle(fontSize: 16,color: Color(0xFF333333),fontWeight: FontWeight.bold,decoration: TextDecoration.none),maxLines: 1,overflow: TextOverflow.ellipsis,),
                                      Icon(Icons.pregnant_woman,color: Colors.pinkAccent,),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(top: 10,bottom: 10),
                                  child: Text(_dict==null?'':'${_dict['labelIds']}',
                                    style: TextStyle(fontSize: 12,color: Color(0xFF333333),fontWeight: FontWeight.normal,decoration: TextDecoration.none),maxLines: 2,
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(top: 10,bottom: 20),
                                  child: Row(
                                    children: [
                                      Container(
                                        child: Text('陕西西安',
                                          style: TextStyle(fontSize: 10,color: Color(0xFF666666),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                        ),
                                        decoration: BoxDecoration(
                                          color: Color(0xFFEEEEEE),
                                          borderRadius: BorderRadius.all(Radius.circular(5))
                                        ),
                                        padding: EdgeInsets.all(5),
                                      ),
                                      Container(
                                        child: Text(_dict==null?'':'${_dict['user']['school']}',
                                          style: TextStyle(fontSize: 10,color: Color(0xFF666666),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                        ),
                                        decoration: BoxDecoration(
                                            color: Color(0xFFEEEEEE),
                                            borderRadius: BorderRadius.all(Radius.circular(5))
                                        ),
                                        padding: EdgeInsets.all(5),
                                        margin: EdgeInsets.only(left: 5),
                                      ),
                                    ],
                                  ),
                                ),
                                Row(
                                  children: [
                                    Container(
                                      height: 32,
                                      width: 50,
                                      child: Column(
                                        children: [
                                          Text(_dict==null?'':'${_dict['attention']}',
                                            style: TextStyle(fontSize: 14,color: Color(0xFF333333),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                          ),
                                          Text('关注',
                                            style: TextStyle(fontSize: 12,color: Color(0xFF666666),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                          )
                                        ],
                                      ),
                                    ),
                                    Container(
                                      height: 32,
                                      width: 50,
                                      child: Column(
                                        children: [
                                          Text(_dict==null?'':'${_dict['fans']}',
                                            style: TextStyle(fontSize: 14,color: Color(0xFF333333),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                          ),
                                          Text('粉丝',
                                            style: TextStyle(fontSize: 12,color: Color(0xFF666666),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                          )
                                        ],
                                      ),
                                    ),
                                    Container(
                                      height: 32,
                                      width: 50,
                                      child: Column(
                                        children: [
                                          Text(_dict==null?'':'${_dict['likeCount']}',
                                            style: TextStyle(fontSize: 14,color: Color(0xFF333333),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                          ),
                                          Text('喜欢',
                                            style: TextStyle(fontSize: 12,color: Color(0xFF666666),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                          )
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ],
                            ),
                          ),
                          Container(
                            width: (MediaQuery.of(context).size.width-60)*0.4,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Container(
                                  height: 70,
                                  width: 70,
                                  decoration: BoxDecoration(
                                    image: DecorationImage(image: _dict==null?AssetImage('lib/images/head.png'):NetworkImage('${_dict['user']['avatar']}')),
                                    borderRadius: BorderRadius.all(Radius.circular(35))
                                  ),
                                ),
                                GestureDetector(
                                  onTap: (){
                                    _showEditMsgView();
                                  },
                                  child: Container(
                                    height: 26,
                                    width: 60,
                                    margin: EdgeInsets.only(top: 10),
                                    padding: EdgeInsets.only(left: 8),
                                    decoration: BoxDecoration(
                                      color: Color(0xFFF4F4F4),
                                      borderRadius: BorderRadius.all(Radius.circular(13)),
                                    ),
                                    child: Row(
                                      children: [
                                        Icon(Icons.edit,size: 15,color: Color(0xFF999999),),
                                        Text('编辑',
                                          style: TextStyle(fontSize: 12,color: Color(0xFF999999),fontWeight: FontWeight.normal,decoration: TextDecoration.none),
                                        )
                                      ],
                                    ),
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: 50,
                color: Colors.white,
                padding: EdgeInsets.only(top: 20,left: 20,right: 20),
                child: ListView.separated(
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context,index){
                      return GestureDetector(
                        onTap: (){
                          setState(() {
                            _selected = index;
                          });
                        },
                        child: Container(
                          height: 30,
                          width: (MediaQuery.of(context).size.width-80)/3,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(index==0?'作品':index==1?'关注':'收藏',style: TextStyle(fontSize: 16,color: index==_selected?Color(0xFF333333):Color(0xFF666666),decoration: TextDecoration.none,fontWeight: index==_selected?FontWeight.bold:FontWeight.normal),),
                              Container(height: 2,width: 15,color: index==_selected?Color(0xFF333333):Colors.transparent,)
                            ],
                          ),
                        ),
                      );
                    },
                    separatorBuilder: (context,index){
                      return Container(width: 20,);
                    },
                    itemCount: 3
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: 10,right: 10),
                child: StaggeredGridView.countBuilder(
                  shrinkWrap: true,
                  controller: _scrollController,
                  crossAxisCount: 4,
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                  itemCount: _dataArray.length,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: (){
                        Navigator.of(context,rootNavigator: true).push(
                            CupertinoPageRoute(
                                builder: (context){
                                  return _dataArray[index]['type']==1?YSSquareArticle(squareId: _dataArray[index]['id'],typeId: _dataArray[index]['type'],)
                                      :YSSquareVideo(squareId: _dataArray[index]['id'],typeId: _dataArray[index]['type'],);
                                }
                            )
                        );
                      },
                      child: Stack(
                        children: [
                          Container(
                            color: Colors.white,
                            child:Column(
                              children: [
                                AspectRatio(
                                    child: Container(
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(topLeft: Radius.circular(5),topRight: Radius.circular(5)),
                                      ),
                                      child: ClipRRect(
                                        borderRadius: BorderRadius.only(topLeft: Radius.circular(5),topRight: Radius.circular(5)),
                                        child: CachedNetworkImage(
                                            imageUrl: _dataArray[index]['type']==0?'${_dataArray[index]['coverPath']}':'${_dataArray[index]['topicCover']}',
                                            fit: BoxFit.fill
                                        ),
                                      ),
                                    ),
                                    aspectRatio: double.parse('${_dataArray[index]['coverWidth']}')/double.parse('${_dataArray[index]['coverHeight']}')
                                ),
                                Container(
                                  child: Text(_dataArray[index]['type']==0?'${_dataArray[index]['videoTitle']}':'${_dataArray[index]['topicTitle']}',
                                    style: TextStyle(fontSize: 13,color: Color(0xFF333333),decoration: TextDecoration.none,),maxLines: 2,overflow: TextOverflow.ellipsis,),
                                  padding: EdgeInsets.all(5),
                                  alignment: Alignment.centerLeft,
                                ),
                                Container(
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Row(
                                        children: [
                                          Container(
                                            height: 20,
                                            width: 20,
                                            margin: EdgeInsets.only(right: 5),
                                            decoration: BoxDecoration(
                                              color: Colors.black12,
                                              borderRadius: BorderRadius.all(Radius.circular(10)),
                                            ),
                                            child: ClipRRect(
                                              borderRadius: BorderRadius.all(Radius.circular(10)),
                                              child: CachedNetworkImage(
                                                imageUrl: '${_dataArray[index]['user']['avatar']}',
                                                fit: BoxFit.fill,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            width: 70,
                                            child: Text('${_dataArray[index]['user']['nickname']}',
                                              style: TextStyle(fontSize: 12,color: Color(0xFF333333),decoration: TextDecoration.none,),overflow: TextOverflow.ellipsis,),
                                          )
                                        ],
                                      ),
                                      GestureDetector(
                                        behavior: HitTestBehavior.opaque,
                                        child: Row(
                                          children: [
                                            Container(
                                                height: 15,
                                                width: 15,
                                                margin: EdgeInsets.only(right: 5),
                                                child: Image.asset(_dataArray[index]['likeStatus']==0?'lib/images/love.png':'lib/images/love2.png')
                                            ),
                                            Container(
                                              child: Text('${_dataArray[index]['likeCounts']}',style: TextStyle(fontSize: 12,color: Color(0xFFEE564C),decoration: TextDecoration.none,fontWeight: FontWeight.normal),overflow: TextOverflow.ellipsis,),
                                            )
                                          ],
                                          mainAxisSize: MainAxisSize.min,
                                        ),
                                        onTap: (){
                                          _postAgreementData(index);
                                        },
                                      ),
                                    ],
                                  ),
                                  padding: EdgeInsets.only(left: 5,right: 5,top: 3,bottom: 5),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            height: 15,
                            margin: EdgeInsets.only(top: 10,left: 10),
                            decoration: BoxDecoration(
                              color: Colors.black12,
                              borderRadius: BorderRadius.all(Radius.circular(7.5)),
                            ),
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Container(
                                    height: 10,
                                    width: 15,
                                    margin: EdgeInsets.only(right: 3),
                                    child: Image.asset('lib/images/eyes2.png')
                                ),
                                Container(
                                  child: Text('${_dataArray[index]['likeCounts']}',style: TextStyle(fontSize: 12,color: Colors.white,decoration: TextDecoration.none,fontWeight: FontWeight.normal),overflow: TextOverflow.ellipsis,),
                                )
                              ],
                            ),
                            padding: EdgeInsets.only(left: 8,right: 8),
                          ),
                          _dataArray[index]['type']==0?Container(
                            margin: EdgeInsets.only(left: (MediaQuery.of(context).size.width-25)/2-30,
                                top: (MediaQuery.of(context).size.width-25)/2/(double.parse('${_dataArray[index]['coverWidth']}')/double.parse('${_dataArray[index]['coverHeight']}'))-30),
                            height: 20,
                            width: 20,
                            child: Icon(Icons.play_circle_filled,color: Colors.white,),
                          ):Container()
                        ],
                      ),
                    );
                  },
                  staggeredTileBuilder: (index) =>StaggeredTile.fit(2),
                  padding: EdgeInsets.only(top: 10),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  _showEditMsgView() async{
    showModalBottomSheet(
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      context: context,
      builder: (context){
        return Container(
          height: MediaQuery.of(context).size.height*0.8,
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: hsp(112),
                  padding: EdgeInsets.only(left: wsp(33),right: wsp(33)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      GestureDetector(
                        child: Text('取消',style: TextStyle(fontSize: zsp(34),color: Color(0xFF000000)),),
                        onTap: (){
                          Navigator.pop(context);
                        },
                      ),
                      Text('保存',style: TextStyle(fontSize: zsp(34),color: Color(0xFF007AFF)),)
                    ],
                  ),
                ),
                Divider(color: Color(0xFFE5E5E5),height: hsp(1),thickness: hsp(1),),
                Container(
                  child: ListView.separated(
                    shrinkWrap: true,
                    itemBuilder: (context,index){
                      return Container(
                        height: index==0?hsp(112):hsp(92),
                        padding: EdgeInsets.only(left: wsp(33),right: wsp(33)),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('标题',style: TextStyle(fontSize: zsp(32),color: Color(0xFF000000)),),
                            index==0?Container(
                              height: hsp(80),
                              width: hsp(80),
                              decoration: BoxDecoration(
                                color: Colors.black12,
                                borderRadius: BorderRadius.all(Radius.circular(hsp(40))),
                              ),
                            ):index==1||index==2?Text('UNI王一博',style: TextStyle(fontSize: zsp(32),color: Color(0xFF9A9A9A)),
                            ):Row(
                              children: [
                                Text('陕西 西安',style: TextStyle(fontSize: zsp(32),color: Color(0xFF9A9A9A))),
                                Icon(Icons.chevron_right,size: hsp(40),color: Color(0xFF9A9A9A))
                              ],
                            )
                          ],
                        ),
                      );
                    },
                    separatorBuilder: (context,index){
                      return Divider(color: Color(0xFFE5E5E5),height: hsp(1),thickness: hsp(1),);
                    },
                    itemCount: 5,
                    physics: NeverScrollableScrollPhysics(),
                  ),
                ),
                Divider(color: Color(0xFFE5E5E5),height: hsp(1),thickness: hsp(1),),
                Container(
                  padding: EdgeInsets.all(hsp(33)),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('标题',style: TextStyle(fontSize: zsp(32),color: Color(0xFF000000)),),
                      Container(height: hsp(10),),
                      Text('歌手、演员、主持人男子演唱组合UNIQ成员，职业摩托车赛车手',style: TextStyle(fontSize: zsp(30),color: Color(0xFF9A9A9A)),),
                    ],
                  ),
                ),
                Divider(color: Color(0xFFE5E5E5),height: hsp(1),thickness: hsp(1),),
              ],
            ),
          ),
        );
    });
  }

  _getUserInfoData() async{
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/community',parameter: {},isLoading: true,isToken: true);
    if(dict!=null){
      _refresh();
      setState(() {
        _dict = dict['data'];
      });
    }
  }

  Future<void> _refresh() async{
    _page = 1;
    Map dict = await ysRequestHttp(context,type: requestType.get,api: '/app/piazza/SquareCommunity/look',parameter: {'pageNo':_page,'pageSize':10,'type':_selected},isLoading: false,isToken: true);
    if(dict!=null){
      setState(() {
        _dataArray.addAll(dict['data']['resultList']);
      });
    }
  }

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

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

    });
    if(dict!=null){
      setState(() {
        _dataArray[index]['likeStatus'] = dict['data'];
        if(dict['data'] == 0){
          _dataArray[index]['likeCounts'] = int.parse('${_dataArray[index]['likeCounts']}') - 1;
        }else{
          _dataArray[index]['likeCounts'] = int.parse('${_dataArray[index]['likeCounts']}') + 1;
        }
      });
    }
  }

}