import 'package:flutter/material.dart';
import 'package:liftmanager/net/api_service.dart';
import 'package:liftmanager/utils/toast.dart';
import 'package:liftmanager/widgets/app_bar.dart';
import 'package:liftmanager/res/resources.dart';
import 'package:liftmanager/widgets/load_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:liftmanager/internal/bbs/model/error_model.dart';
import 'package:liftmanager/utils/url.dart';
import 'package:liftmanager/utils/utils.dart';
import 'package:liftmanager/widgets/preview_images.dart';

class ErrorDetail extends StatefulWidget {
  ErrorDetail(this.id);

  final String id;

  @override
  State<StatefulWidget> createState() {
    return ErrorDetailState();
  }
}

class ErrorDetailState extends State<ErrorDetail> {
  @override
  void initState() {
    super.initState();
    getFaultCodeDetail();
  }

  bool _hasData = false;
  ErrorDetailModel detailObj;
  List<String> listPreview = [];
  getFaultCodeDetail() {
    NewApiService().getFaultCodeDetail(widget.id, onSuccess: (res) {
      detailObj = res;
      listPreview = [];
                                                        
                                                        detailObj.imgs.split(",").forEach((element) {
                                                          listPreview.add(Utils.getImagePath(element,isWater: true));
                                                        });
      _hasData = true;
      setState(() {});
    }, onError: (code, msg) {
      toasts(msg);
    });
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return Scaffold(
      resizeToAvoidBottomPadding: false, //不让键盘弹上去
      appBar: MyAppBar(
        centerTitle: "故障码详情",
      ),
      body: _hasData
          ? Container(
              child: ListView(
                children: <Widget>[
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        padding:
                            EdgeInsets.only(left: ScreenUtil().setWidth(20)),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              padding: EdgeInsets.only(
                                  top: ScreenUtil().setWidth(10),
                                  bottom: ScreenUtil().setWidth(5)),
                              child: Text(
                                "故障码",
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: ScreenUtil().setSp(16),
                                ),
                                textAlign: TextAlign.left,
                              ),
                            ),
                            SizedBox(height: 10),
                            Container(
                              // width: 90,
                              // height: 30,

                              padding: EdgeInsets.only(
                                  left: ScreenUtil().setWidth(10),
                                  right: ScreenUtil().setWidth(10),
                                  top: ScreenUtil().setWidth(5),
                                  bottom: ScreenUtil().setWidth(5)),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(2.0),
                                color: Color(0xff9FD1FE),
                              ),
                              child: Text(
                                detailObj.code ?? '',
                                style: TextStyle(
                                    color: Color(0xffffffff),
                                    fontSize: ScreenUtil().setSp(14)),
                                textAlign: TextAlign.center,
                              ),
                            ),
                            SizedBox(height: 20)
                          ],
                        ),
                      ),
                      Container(height: 5, color: Color(0xffFAF7FA)),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.only(
                                left: ScreenUtil().setWidth(20),
                                top: ScreenUtil().setWidth(10),
                                bottom: ScreenUtil().setWidth(5)),
                            child: Text(
                              "故障描述",
                              style: TextStyle(
                                color: Color(0xff222222),
                                fontSize: ScreenUtil().setSp(16),
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.only(
                                left: ScreenUtil().setWidth(15),
                                right: ScreenUtil().setWidth(15),
                                top: ScreenUtil().setWidth(10),
                                bottom: ScreenUtil().setWidth(20)),
                            child: Text(
                              detailObj.descr ?? '',
                              style: TextStyle(
                                color: Color(0xff666666),
                                fontSize: ScreenUtil().setSp(16),
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ],
                      ),
                      Container(height: 5, color: Color(0xffFAF7FA)),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.only(
                                left: ScreenUtil().setWidth(15),
                                top: ScreenUtil().setWidth(10),
                                bottom: ScreenUtil().setWidth(5)),
                            child: Text(
                              "问题现象",
                              style: TextStyle(
                                color: Color(0xff222222),
                                fontSize: ScreenUtil().setSp(16),
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.only(
                                left: ScreenUtil().setWidth(15),
                                right: ScreenUtil().setWidth(15),
                                top: ScreenUtil().setWidth(10),
                                bottom: ScreenUtil().setWidth(20)),
                            child: Text(
                              detailObj.cause ?? '',
                              style: TextStyle(
                                color: Color(0xff666666),
                                fontSize: ScreenUtil().setSp(14),
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ],
                      ),
                      Container(height: 5, color: Color(0xffFAF7FA)),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.only(
                                left: ScreenUtil().setWidth(15),
                                top: ScreenUtil().setWidth(10),
                                bottom: ScreenUtil().setWidth(5)),
                            child: Text(
                              "解决方法",
                              style: TextStyle(
                                color: Color(0xff222222),
                                fontSize: ScreenUtil().setSp(16),
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.only(
                                left: ScreenUtil().setWidth(15),
                                right: ScreenUtil().setWidth(15),
                                top: ScreenUtil().setWidth(10),
                                bottom: ScreenUtil().setWidth(20)),
                            child: Text(
                              detailObj.recoveryMethod ?? '',
                              style: TextStyle(
                                color: Color(0xff666666),
                                fontSize: ScreenUtil().setSp(14),
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ],
                      ),
                      Container(height: 5, color: Color(0xffFAF7FA)),
                      Container(
                        padding: EdgeInsets.only(
                            left: ScreenUtil().setWidth(15),
                            right: ScreenUtil().setWidth(15),
                            top: ScreenUtil().setWidth(10),
                            bottom: ScreenUtil().setWidth(10)),
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(width: 0.5, color: Colours.line),
                          ),
                        ),
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              ErrorImages(
                                  imgList: listPreview)
                              // Container(
                              //   child: Stack(
                              //     children: <Widget>[
                              //       ClipRRect(
                              //         borderRadius: BorderRadius.circular(5),
                              //         child: Container(
                              //           width: width,
                              //           height: 220,
                              //           child: LoadAssetImage(
                              //             "temporary/xue1",
                              //             fit: BoxFit.cover,
                              //           ),
                              //         ),
                              //       ),
                              //     ],
                              //   ),
                              // ),
                            ]),
                      ),
                    ],
                  ),
                ],
              ),
            )
          : Center(
              child: Text("正在加载..."),
            ),
    );
  }
}

class ErrorImages extends StatelessWidget {
  ErrorImages({Key key, this.imgList}) : super(key: key);

  List<dynamic> imgList = [];

  List<Widget> imageList(context) => imgList.asMap().keys.map((index) {
        double width = MediaQuery.of(context).size.width;

        return Container(
          margin: EdgeInsets.only(
            bottom: ScreenUtil().setWidth(10),
          ),
          child: GestureDetector(
            onTap: (){
              Navigator.of(context).push(
                                  new FadeRoute(
                                    page: PhotoViewGalleryScreen(
                                      images: imgList, //传入图片list
                                      index: index, //传入当前点击的图片的index
                                      // heroTag: img,//传入当前点击的图片的hero tag （可选）
                                    ),
                                  ),
                                );
            },
            child: ClipRRect(
            borderRadius: BorderRadius.circular(5),
              child: Container(
                width: width,
                height: 220,
                child: LoadNetworkImage(
                  imgList[index],
                  fit: BoxFit.cover,
                ),
              ),
            ),
          )
        );
      }).toList();

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.only(
            top: ScreenUtil().setWidth(5),
            left: ScreenUtil().setWidth(15),
            right: ScreenUtil().setWidth(15)),
        child: Wrap(
          spacing: 6,
          alignment: WrapAlignment.spaceBetween,
          crossAxisAlignment: WrapCrossAlignment.center,
          children: imageList(context),
        ));
  }
}

class FadeRoute extends PageRouteBuilder {
  final Widget page;
  FadeRoute({this.page})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
            opacity: animation,
            child: child,
          ),
        );
}