import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:odf/bean/details_bean.dart';
import 'package:odf/bean/row_list_bean.dart';
import 'package:odf/common/func.dart';
import 'package:odf/dialog/modify_info_dialog.dart';
import 'package:odf/tools/machine/machine_model.dart';

class MachineDetailsPage extends StatefulWidget {
  final String dofName;
  final String rackId;
  final bool isOpenPop;
  final String dropId;
  final String roomName;

  const MachineDetailsPage(
      {super.key, required this.rackId, required this.dofName, required this.isOpenPop, required this.dropId, required this.roomName});

  @override
  State<MachineDetailsPage> createState() => _MachineDetailsPageState();
}

class _MachineDetailsPageState extends State<MachineDetailsPage> {
  late StreamSubscription subscription;
  final MachineModel _viewmodel = MachineModel();

  List<DetailsBean> dataList = [];

  bool isOpen = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    subscription = _viewmodel.streamController.stream.listen((event) {
      String code = event['code'];
      if (code.isNotEmpty) {
        switch (code) {
          case "mList":
            dataList = event['data'];

            ///搜索进入详情直接弹窗
            if (widget.isOpenPop && !isOpen) {
              isOpen = true;
              FunctionUtil.popDialog2(
                context,
                ModifyInfoDialog(
                  onTap: () {
                    _viewmodel.mList(widget.rackId);
                  },
                  id: widget.dropId,
                ),
              );
            }
            break;
        }
      }
      EasyLoading.dismiss();
      setState(() {});
    });

    EasyLoading.show(status: "loading...");
    _viewmodel.mList(widget.rackId);
  }

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

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    final size = MediaQuery.of(context).size;
    final t10 = size.width / 36;
    final w25 = size.width / 14.4;
    final p5 = size.width / 72;
    final w9 = size.width / 40;
    final s21 = size.width / 17.142857142857;
    final t20 = size.width / 18;
    final w16 = size.width / 22.5;
    final s12 = size.width / 30;
    final l30 = size.width / 12;

    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: const Color(0xFFD8D8D8),
      body: Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
          image: AssetImage('assets/images/home_bg.png'),
          fit: BoxFit.cover,
        )),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(top: statusBarHeight + t10, left: t10, right: t10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Container(
                      width: w25,
                      height: w25,
                      padding: EdgeInsets.all(p5),
                      child: Image(
                        width: w9,
                        image: const AssetImage('assets/images/ic_back.png'),
                      ),
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    child: Text(
                      '${widget.dofName}详情',
                      style: TextStyle(fontSize: s21, fontWeight: FontWeight.w600),
                    ),
                  ),
                  Container(
                    width: w25,
                    height: w25,
                    padding: EdgeInsets.all(p5),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: t10),
              child: Text(
                widget.roomName,
                style: TextStyle(color: Color(0xFF1A73EC), fontWeight: FontWeight.w600),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: t10, left: t20, bottom: t10),
              child: Row(
                children: [
                  Container(
                    width: 16,
                    height: 16,
                    decoration: const BoxDecoration(
                      color: Colors.green,
                      shape: BoxShape.circle,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: p5),
                    child: Text(
                      "已连接",
                      style: TextStyle(color: const Color(0xFF666666), fontSize: s12),
                    ),
                  ),
                  Container(
                    width: w16,
                    height: w16,
                    margin: EdgeInsets.only(left: l30),
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: p5),
                    child: Text(
                      "已断开",
                      style: TextStyle(color: const Color(0xFF666666), fontSize: s12),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView.builder(
                  padding: const EdgeInsets.all(0),
                  itemCount: dataList.length,
                  itemBuilder: (context, index) {
                    return _item(index, dataList[index], context);
                  }),
            )
          ],
        ),
      ),
    );
  }

  _item(int index, DetailsBean data, context) {
    final size = MediaQuery.of(context).size;
    final t10 = size.width / 36;
    final w35 = size.width / 10.285714285714;
    final s12 = size.width / 30;
    final s16 = size.width / 22.5;
    final w40 = size.width / 9;
    final h20 = size.width / 18;
    final c5 = size.width / 72;

    return Container(
      margin: EdgeInsets.only(bottom: t10, left: t10, right: t10),
      child: Card(
        color: Colors.white,
        child: Container(
          padding: EdgeInsets.only(bottom: t10),
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.all(s12),
                child: Text(
                  "${data.name}",
                  style: TextStyle(fontSize: s16, color: const Color(0xFF666666)),
                ),
              ),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Column(
                  children: [
                    ...List.generate(data.odfPortsList.length, (index2) {
                      return Container(
                        margin: EdgeInsets.only(bottom: t10),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            ...List.generate(data.odfPortsList[index2].rowList.length, (index) {
                              RowListBean bean = data.odfPortsList[index2].rowList[index];
                              return GestureDetector(
                                onTap: () {
                                  FunctionUtil.popDialog2(
                                      context,
                                      ModifyInfoDialog(
                                          onTap: () {
                                            _viewmodel.mList(widget.rackId);
                                          },
                                          id: '${bean.id}'));
                                },
                                child: Column(
                                  children: [
                                    Container(
                                      width: w35,
                                      height: w35,
                                      alignment: Alignment.center,
                                      margin: EdgeInsets.symmetric(horizontal: t10),
                                      decoration: BoxDecoration(
                                        color: bean.status == 0 ? Colors.red : Colors.green,
                                        shape: BoxShape.circle,
                                      ),
                                      child: Text(
                                        "${bean.tips}",
                                        style: TextStyle(fontSize: bean.status == 0 ? 10 : 10, color: Colors.black),
                                      ),
                                    ),
                                    Container(
                                      width: w40,
                                      height: h20,
                                      alignment: Alignment.center,
                                      margin: EdgeInsets.symmetric(vertical: c5),
                                      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(c5))),
                                      child: Text("${bean.name}"),
                                    )
                                  ],
                                ),
                              );
                            })
                          ],
                        ),
                      );
                    }),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}