import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutterflow_ui/flutterflow_ui.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/util/DailyLogUtils.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/component/tool/CustomCard.dart';
import 'package:vbvs_app/component/tool/TopSlideNotification.dart';
import 'package:vbvs_app/pages/main_bottom/component/main_page_b_bottom_change.dart';
import 'package:vbvs_app/pages/mh_page/test/WebviewTestModel.dart';

class HomeDeviceStausWidget extends StatefulWidget {
  final deviceStatus;

  const HomeDeviceStausWidget({super.key, required this.deviceStatus});

  @override
  State<HomeDeviceStausWidget> createState() => _HomeDeviceStausWidgetState();
}

class _HomeDeviceStausWidgetState extends State<HomeDeviceStausWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      constraints: BoxConstraints(minHeight: 180.rpx),
      decoration: BoxDecoration(
        color: Color(0xFF003058),
        borderRadius: BorderRadius.circular(16.rpx),
      ),
      child: Padding(
        padding: EdgeInsetsDirectional.fromSTEB(67.rpx, 0.rpx, 30.rpx, 0.rpx),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 170.rpx,
                  height: 81.rpx,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8.rpx),
                    child: Image.network(
                      widget.deviceStatus['device_image'], // 从DeviceStatus获取图片
                      width: 200.rpx,
                      height: 200.rpx,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Text(
                  '${(widget.deviceStatus['name'] ?? '').isEmpty ? '未命名'.tr : widget.deviceStatus['name']}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 26.rpx,
                    letterSpacing: 0.0.rpx,
                  ),
                ),
              ].divide(SizedBox(height: 26.rpx)),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Text(
                //   widget.deviceStatus['status'] == 1 ? '在线'.tr : '离线'.tr,
                //   style: TextStyle(
                //     color: widget.deviceStatus['status'] == 1
                //         ? stringToColor("#07BD60")
                //         : stringToColor("#F84B20"),
                //     fontSize: 26.rpx,
                //     letterSpacing: 0.0.rpx,
                //   ),
                // ),
                CustomCard(
                  gradientDirection: GradientDirection.vertical,
                  borderRadius: 10.rpx,
                  onTap: () async {
                    try {
                      var device = widget.deviceStatus;
                      WebviewTestController webviewTestController = Get.find();
                      var future = webviewTestController.web.jsbridge?.dart
                          .appToHtmlDevice(device);
                      Future.delayed(Duration(seconds: 5), () {
                        return;
                      });
                      await future;
                      await webviewTestController.web.jsbridge?.dart
                          .pageActive();
                      MainPageBBottomChange.jumpTo(2);
                    } catch (e) {
                      DailyLogUtils.writeError("发生异常: $e");
                    }
                  },
                  colors:
                      AppConstants().mhtButtongradientColors, // 你原本没有渐变，单色即可
                  enableGradient: true, // 关闭渐变
                  enableAnimation: true, // 启用缩放动画
                  child: SizedBox(
                    width: 150.rpx,
                    height: 61.rpx,
                    child: Center(
                      child: Text(
                        '控制'.tr,
                        style: TextStyle(
                          color: Color(0xFF003058),
                          fontSize: 26.rpx,
                          letterSpacing: 0.0.rpx,
                        ),
                      ),
                    ),
                  ),
                ),
              ].divide(SizedBox(height: 36.rpx)),
            ),
          ],
        ),
      ),
    );
  }
}