import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:liftmanager/internal/bbs/model/error_model.dart';
import 'package:liftmanager/net/api_service.dart';
import 'package:liftmanager/res/resources.dart';
import 'package:liftmanager/utils/toast.dart';
import 'package:liftmanager/utils/utils.dart';
import 'package:liftmanager/widgets/app_bar.dart';
import 'package:liftmanager/widgets/bbs_content.dart';
import 'package:liftmanager/widgets/load_image.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(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            SectionHeader(title: '故障码'),
                            SizedBox(height: 10),
                            Container(
                              width: 55,
                              height: 30,
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(left: 10),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(4.0),
                                color: Color(0xffEBF1FF),
                              ),
                              child: Text(
                                detailObj.code ?? '',
                                style: TextStyle(
                                  color: Color(0xff5589FF),
                                  fontSize: 12,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            ),
                            SizedBox(height: 20)
                          ],
                        ),
                      ),
                      Container(height: 5, color: Color(0xffFAF7FA)),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SectionHeader(title: '故障描述'),
                          Container(
                            padding: EdgeInsets.only(
                              left: ScreenUtil().setWidth(10),
                            ),
                            child: Text(
                              detailObj.descr ?? '',
                              style: TextStyle(
                                color: Color(0xff666666),
                                fontSize: 13,
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                        ],
                      ),
                      Container(height: 1, color: Color(0xffFAF7FA)),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SectionHeader(title: '问题现象'),
                          Container(
                            padding: EdgeInsets.only(
                              left: ScreenUtil().setWidth(10),
                            ),
                            child: Text(
                              detailObj.cause ?? '',
                              style: TextStyle(
                                color: Color(0xff666666),
                                fontSize: 13,
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                        ],
                      ),
                      Container(height: 1, color: Color(0xffFAF7FA)),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          SectionHeader(title: '解决办法'),
                          Container(
                            padding: EdgeInsets.only(
                              left: ScreenUtil().setWidth(10),
                            ),
                            child: Text(
                              detailObj.recoveryMethod ?? '',
                              style: TextStyle(
                                color: Color(0xff666666),
                                fontSize: ScreenUtil().setSp(13),
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                        ],
                      ),
                      Container(
                        padding: EdgeInsets.all(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)
                            ]),
                      ),
                    ],
                  ),
                ],
              ),
            )
          : 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,
          ),
        );
}