import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

import '../../../beans/message_bean.dart';
import '../../../common/func.dart';
import '../my_home_model.dart';
import 'message_details_page.dart';

class MessageCenterPage extends StatefulWidget {
  const MessageCenterPage({super.key});

  @override
  State<MessageCenterPage> createState() => _MessageCenterPageState();
}

class _MessageCenterPageState extends State<MessageCenterPage> {
  late StreamSubscription subscription;
  final MyHomeModel _viewModel = MyHomeModel();

  List<MessageBean> messageList = [];

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

    subscription = _viewModel.streamController.stream.listen((event) {
      String code = event['code'];
      if (code.isNotEmpty) {
        switch (code) {
          case "getUserMessageList":
            EasyLoading.dismiss();
            messageList = event['data'];
            break;
        }
        setState(() {});
      }
    });

    FunctionUtil.loading();
    _viewModel.getUserMessageList();
  }

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

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final h50 = size.width / 7.2;
    final s16 = size.width / 22.5;
    final l14 = size.width / 25.714285714285;
    final w19 = size.width / 18.947368421052;
    final h26 = size.width / 13.846153846153;
    final t20 = size.width / 18;

    return Scaffold(
      backgroundColor: const Color(0xFF17181A),
      body: Column(
        children: [
          Container(
            width: size.width,
            height: h50,
            margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: Stack(
              alignment: Alignment.center,
              children: [
                Text(
                  "消息中心",
                  style: TextStyle(fontSize: s16, color: Color(0xFFD6D6D7)),
                ),
                Positioned(
                  left: l14,
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Image(
                      width: w19,
                      height: h26,
                      image: const AssetImage('assets/images/btn_fanhui.png'),
                    ),
                  ),
                )
              ],
            ),
          ),
          Expanded(
              child: Container(
            margin: EdgeInsets.only(left: l14, right: l14, bottom: t20),
            child: ListView.builder(
                padding: EdgeInsets.zero,
                itemCount: messageList.length,
                itemBuilder: (context, index) {
                  return _item(messageList[index], context);
                }),
          ))
        ],
      ),
    );
  }

  _item(MessageBean data, context) {
    final size = MediaQuery.of(context).size;
    final h73 = size.width / 4.931506849315;
    final t18 = size.width / 20;
    final w45 = size.width / 8;
    final l64 = size.width / 5.625;
    final t17 = size.width / 21.176470588235;
    final s14 = size.width / 25.714285714285;
    final w200 = size.width / 1.8;
    final t22 = size.width / 16.363636363636;
    final t47 = size.width / 7.6595744680851;
    final s13 = size.width / 27.692307692307;
    final l11 = size.width / 32.727272727272;
    final w7 = size.width / 51.428571428571;

    return GestureDetector(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
              //导航打开新视图
              builder: (context) => MessageDetailsPage(
                messageId: data.messageId!,
                title: data.title!,
              ),
            )).then((value) {
          _viewModel.getUserMessageList();
        });
      },
      child: Container(
        height: h73,
        margin: EdgeInsets.only(top: t18),
        decoration: BoxDecoration(color: Color(0xFF202530), borderRadius: BorderRadius.all(Radius.circular(l11))),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              left: l11,
              child: Image(
                width: w45,
                height: w45,
                image: AssetImage('assets/images/ic_system.png'),
              ),
            ),
            Positioned(
              left: l64,
              top: t17,
              child: Text(
                "${data.title}",
                style: TextStyle(fontSize: s14, color: Color(0xFFD6D6D7)),
              ),
            ),
            Positioned(
              left: l64,
              top: w45,
              child: SizedBox(
                width: w200,
                child: Text(
                  "${data.content}",
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: l11, color: Color(0xFF939394)),
                ),
              ),
            ),
            Positioned(
              right: l11,
              top: t22,
              child: Text(
                "${data.sendDateTime}",
                style: TextStyle(fontSize: l11, color: Color(0xFF939394)),
              ),
            ),
            Positioned(
              right: l11,
              top: t47,
              child: !data.isRead!
                  ? Container(
                      width: w7,
                      height: w7,
                      decoration: const BoxDecoration(color: Colors.red, borderRadius: BorderRadius.all(Radius.circular(10))),
                    )
                  : Container(),
            ),
          ],
        ),
      ),
    );
  }
}