import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:vbvs_app/common/color/appColors.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/controller/user_info_controller.dart';

class HelpArticle extends StatefulWidget {
  final Map article;
  HelpArticle({super.key, required this.article});

  @override
  State<HelpArticle> createState() => _HelpArticleState();
}

class _HelpArticleState extends State<HelpArticle> {
  bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/new_background.png'), // 本地图片
            fit: BoxFit.fill, // 填满整个 Container
          ),
        ),
        child: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              backgroundColor: Colors.transparent,
              automaticallyImplyLeading: false,
              iconTheme: IconThemeData(color: Colors.white),
              titleSpacing: 0,
              title: SizedBox(
                width: double.infinity,
                height: 180.rpx,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    // 中间居中的标题
                    Text(
                      '问题与帮助',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 30.rpx,
                      ),
                    ),
                    // 左侧图标
                    Positioned(
                      left: 0.rpx,
                      child: returnIconButtomNew(),
                    ),
                  ],
                ),
              ),
              actions: [],
              centerTitle: false,
            ),
            body: Padding(
              padding: EdgeInsets.only(left: 30.rpx, right: 30.rpx),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.only(
                        left: 26.rpx, top: 53.rpx, bottom: 15.rpx),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      widget.article['title'],
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 30.rpx,
                      ),
                    ),
                  ),
                  Divider(
                    color: Color(0XFF929699),
                    thickness: 0.5.rpx,
                  ),
                  Expanded(
                    child: Stack(
                      children: [
                        InAppWebView(
                          initialData: InAppWebViewInitialData(
                            data: wrapHtml(widget.article['content']),
                          ),
                          initialSettings: InAppWebViewSettings(
                            transparentBackground: true,
                          ),
                          onLoadStop: (controller, url) {
                            setState(() {
                              isLoading = false;
                            });
                          },
                        ),
                        if (isLoading)
                          Container(
                            color: const Color(0xFF042C46),
                            alignment: Alignment.center,
                            child: const CircularProgressIndicator(
                              valueColor:
                                  AlwaysStoppedAnimation<Color>(Colors.white),
                            ),
                          ),
                      ],
                    ),
                  ),
                ],
              ),
            )));
  }

  String wrapHtml(String htmlContent) {
    return """
    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body {
          color: #929699;
          background-color: transparent;
          font-family: sans-serif;
          padding: 0;
          font-size: 18;
        
        }
        p, li {
          line-height: 1.6;
        }
        ol {
          padding-left: 20px;
        }
        strong {
          color: #6BFDAC;
        }
      </style>
    </head>
    <body>
      $htmlContent
    </body>
    </html>
    """;
  }
}