import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sport/bean/shop.dart';
import 'package:sport/pages/my/shop_detail.dart';
import 'package:sport/provider/lib/provider_widget.dart';
import 'package:sport/provider/lib/view_state_lifecycle.dart';
import 'package:sport/provider/shop_model.dart';
import 'package:sport/provider/user_friend_model.dart';
import 'package:sport/router/navigator_util.dart';
import 'package:sport/router/routes.dart';
import 'package:sport/services/api/inject_api.dart';
import 'package:sport/utils/toast.dart';
import 'package:sport/widgets/appbar.dart';
import 'package:sport/widgets/button_primary.dart';
import 'package:sport/widgets/decoration.dart';
import 'package:sport/widgets/space.dart';

class ScoreShopPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ScoreShopPageState();
  }
}

class _ScoreShopPageState extends ViewStateLifecycle<ScoreShopPage, ShopModel>
    with ChangeNotifier,InjectApi  {
  @override
  ShopModel createModel() {
    // TODO: implement createModel
    return ShopModel();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Scaffold(
        backgroundColor: Colors.white,
        body: ProviderWidget<ShopModel>(
          onModelReady: (v) => v.init(),
          model: model,
          builder: (context, model, _) {
            return Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                      width: MediaQuery.of(context).size.width,
                      height: MediaQuery.of(context).size.width * 381 / 750,
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image:
                                  AssetImage("lib/assets/img/mall_bg_home.png"),
                              fit: BoxFit.cover)),
                      child: SafeArea(
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 12),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[],
                            ),
                          ),
                        ),
                      )),
                ),
                SafeArea(
                    child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        IconButton(
                          icon: Image.asset(
                              "lib/assets/img/topbar_return_white.png"),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                        Text(
                          "积分商城",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.w600),
                        ),
                        Expanded(
                          child: GestureDetector(
                            onTap: () {
                              NavigatorUtil.goPage(
                                  context, (context) => ShopDetailPage());
                            },
                            child: Container(
                              padding: EdgeInsets.only(right: 12.0),
                              alignment: Alignment.centerRight,
                              child: Text("明细",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                  )),
                            ),
                          ),
                        )
                      ],
                    ),
                    if (model.isIdle)
                      Container(
                        padding: EdgeInsets.all(20.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              "积分：",
                              style: TextStyle(
                                  fontSize: 16.0,
                                  color: Theme.of(context).accentColor),
                            ),
                            Text(
                              "${model.shop?.user?.score ?? 0}",
                              style: TextStyle(
                                  fontSize: 25.0,
                                  color: Theme.of(context).accentColor,
                                  fontWeight: FontWeight.w600),
                            )
                          ],
                        ),
                      ),
                  ],
                )),
                Positioned(
                  top: MediaQuery.of(context).size.width * 381 / 750 - 20,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Container(
                      width: MediaQuery.of(context).size.width,
                      height: double.infinity,
                      padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 0),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10.0),
                            topRight: Radius.circular(10.0)),
                      ),
                      child: CustomScrollView(
                        // shrinkWrap: true,
                        // physics: NeverScrollableScrollPhysics(),
                        slivers: <Widget>[
                          // SliverToBoxAdapter(
                          //   child: Row(
                          //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          //     children: <Widget>[
                          //       Expanded(
                          //         child: Container(
                          //           decoration: BoxDecoration(
                          //             borderRadius:
                          //             BorderRadius.all(Radius.circular(10.0)),
                          //             color: Colors.white,
                          //             boxShadow: [
                          //               BoxShadow(
                          //                   offset: Offset(0.0, 0),
                          //                   blurRadius: 5,
                          //                   spreadRadius: 0,
                          //                   color: Color.fromRGBO(0, 0, 0, 0.1))
                          //             ],
                          //           ),
                          //           child: Column(
                          //             children: <Widget>[
                          //               Container(
                          //                 margin: EdgeInsets.fromLTRB(
                          //                     38.0, 25.0, 38.0, 18.0),
                          //                 color: Colors.red,
                          //                 height: 60.0,
                          //               ),
                          //               Container(
                          //                 alignment: Alignment.center,
                          //                 child: Text(
                          //                   "改名卡30积分",
                          //                   style: TextStyle(
                          //                       color: Color(0xff333333),
                          //                       fontSize: 14.0),
                          //                 ),
                          //               ),
                          //               Space(
                          //                 height: 12.0,
                          //               ),
                          //               Padding(
                          //                 padding: EdgeInsets.fromLTRB(
                          //                     15.0, 0, 15.0, 15.0),
                          //                 child: PrimaryButton(
                          //                   callback: () {},
                          //                   content: "兑换",
                          //                   height: 35.0,
                          //                 ),
                          //               )
                          //             ],
                          //           ),
                          //         ),
                          //       ),
                          //       Space(
                          //         width: 20.0,
                          //       ),
                          //       Expanded(
                          //         child: Container(
                          //           // height: 170.0,
                          //           decoration: BoxDecoration(
                          //             borderRadius:
                          //             BorderRadius.all(Radius.circular(10.0)),
                          //             color: Colors.white,
                          //             boxShadow: [
                          //               BoxShadow(
                          //                   offset: Offset(0.0, 0),
                          //                   blurRadius: 5,
                          //                   spreadRadius: 0,
                          //                   color: Color.fromRGBO(0, 0, 0, 0.1))
                          //             ],
                          //           ),
                          //           child: Column(
                          //             children: <Widget>[
                          //               Container(
                          //                 margin: EdgeInsets.fromLTRB(
                          //                     38.0, 25.0, 38.0, 18.0),
                          //                 color: Colors.red,
                          //                 height: 60.0,
                          //               ),
                          //               Container(
                          //                 alignment: Alignment.center,
                          //                 child: Text(
                          //                   "跑酷游戏金币1000",
                          //                   style: TextStyle(
                          //                       color: Color(0xff333333),
                          //                       fontSize: 14.0),
                          //                 ),
                          //               ),
                          //               Space(
                          //                 height: 12.0,
                          //               ),
                          //               Padding(
                          //                 padding: EdgeInsets.fromLTRB(
                          //                     15.0, 0, 15.0, 15.0),
                          //                 child: PrimaryButton(
                          //                   callback: () {},
                          //                   content: "兑换",
                          //                   height: 35.0,
                          //                 ),
                          //               )
                          //             ],
                          //           ),
                          //         ),
                          //       ),
                          //     ],
                          //   ),
                          // ),
                          if(model.isIdle)
                          SliverGrid(
                            gridDelegate:
                                SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 2,
                                    crossAxisSpacing: 18,
                                    mainAxisSpacing:18,
                                    childAspectRatio: 150 / 181),
                            delegate: SliverChildBuilderDelegate(
                                (BuildContext context, int index) {
                                  Items item = model?.shop?.items[index];
                              return Container(
                                margin: EdgeInsets.all(5.0),
                                decoration: card(),
                                child: Column(
                                  children: <Widget>[
                                    Space(height: 10.0,),
                                    CachedNetworkImage(
                                      imageUrl: item?.logo,
                                      width: 80.0,
                                      height: 80.0,
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      child: Text(
                                        "${item?.name}${item.price}积分",
                                        style: TextStyle(
                                            color: Color(0xff333333),
                                            fontSize: 14.0),
                                      ),
                                    ),
                                    Space(
                                      height: 12.0,
                                    ),
                                    Padding(
                                      padding: EdgeInsets.fromLTRB(
                                          15.0, 0, 15.0, 15.0),
                                      child: PrimaryButton(
                                        callback: () async {
                                          // print("${item.id}-----------------------------");
                                          var data = (await api.buyItem('${item.id}'));
                                          // ToastUtil.show("${data.msg}");
                                          ToastUtil.show("兑换成功，当前改名卡数量${data.data == null ? 0 : data.data}");
                                          model.init();
                                        },
                                        content: "兑换",
                                        height: 35.0,
                                      ),
                                    )
                                  ],
                                ),
                              );
                            }, childCount: model?.shop?.items?.length??0),
                          )
                        ],
                      )),
                )
              ],
            );
          },
        )));
  }
}
