VitalApp/lib/pages/settings/devices/widgets/device_card.dart

// ignore_for_file: non_constant_identifier_names, constant_identifier_names

import 'package:flutter/material.dart';
import 'package:vitalapp/managers/interfaces/models/device.dart';
import 'package:vitalapp/pages/settings/devices/widgets/consts.dart';

/// 设备卡片
class DeviceCard extends StatelessWidget {
  static const Color _BOUND_COLOR = Colors.green;
  static final Color _UNBOUND_COLOR = Colors.orange.shade800;

  /// 设备类型
  final String type;

  /// 设备数据
  final DeviceModel? data;

  /// 点击绑定/解绑事件
  final ValueChanged<bool>? onTapChangeBind;

  const DeviceCard({
    super.key,
    required this.type,
    this.data,
    this.onTapChangeBind,
  });

  bool get hasData => data != null;

  @override
  Widget build(BuildContext context) {
    EdgeInsets padding =
        const EdgeInsets.symmetric(vertical: 12, horizontal: 16);

    final children = <Widget>[];
    children.add(_buildHeader());
    if (data != null) {
      children.add(const SizedBox(height: 8));
      final divider = Divider(
        height: 1,
        // indent: 8,
        // endIndent: 8,
        color: Colors.grey.shade300,
      );
      final cells = _buildInfoCells();
      for (final cell in cells) {
        children.add(divider);
        children.add(cell);
      }

      // 缩小下内距
      padding = padding.copyWith(bottom: 8);
    }

    return Container(
      padding: padding,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(width: 1, color: Colors.grey.shade300),
      ),
      child: Column(
        children: children,
      ),
    );
  }

  List<Widget> _buildInfoCells() {
    return [
      _InfoCell("名称", data!.productName),
      _InfoCell("型号", data!.model),
      _InfoCell("Mac", data!.mac),
    ];
  }

  Widget _buildHeader() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        _ProductImage(type),
        Expanded(
          child: _buildTypeSummary(),
        ),
        _buildOperateButton(),
      ],
    );
  }

  Widget _buildTypeSummary() {
    final typeName = DevicesSettingConsts.getDeviceNameByType(type);
    return Container(
      alignment: Alignment.centerLeft,
      padding: const EdgeInsets.only(left: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            typeName,
            style: const TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 4),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                width: 8,
                height: 8,
                child: CircleAvatar(
                  backgroundColor: hasData ? _BOUND_COLOR : _UNBOUND_COLOR,
                ),
              ),
              const SizedBox(width: 4),
              Text(
                hasData ? "已绑定" : "未绑定",
                style: TextStyle(
                  color: Colors.grey.shade600,
                  fontSize: 14,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildOperateButton() {
    final color = hasData ? _UNBOUND_COLOR : _BOUND_COLOR;
    return TextButton(
      style: ButtonStyle(
        overlayColor: MaterialStatePropertyAll(color.withOpacity(.2)),
      ),
      onPressed: () {
        onTapChangeBind?.call(!hasData);
      },
      child: Row(
        children: [
          Text(
            hasData ? "解除绑定" : "去绑定",
            style: TextStyle(
              color: color,
              fontSize: 14,
            ),
          ),
          Icon(
            Icons.arrow_forward_ios,
            color: color,
            size: 12,
          ),
        ],
      ),
    );
  }
}

class _ProductImage extends StatelessWidget {
  final String type;

  const _ProductImage(this.type);

  @override
  Widget build(BuildContext context) {
    final path = "assets/images/device/icon/$type.png";
    return Container(
      width: 76,
      height: 76,
      decoration: BoxDecoration(
        color: Colors.grey.withOpacity(.08),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Image.asset(
        path,
        fit: BoxFit.contain,
      ),
    );
  }
}

class _InfoCell extends StatelessWidget {
  static const double _CELL_HEIGHT = 46.0;
  static const double _FONT_SIZE = 16.0;
  static const _LABEL_STYLE =
      TextStyle(color: Colors.black, fontSize: _FONT_SIZE);
  static final _CONTENT_STYLE =
      TextStyle(color: Colors.grey.shade700, fontSize: _FONT_SIZE);

  final String label;
  final String content;

  const _InfoCell(
    this.label,
    this.content,
  );
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: _CELL_HEIGHT,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(label, style: _LABEL_STYLE),
          Text(content, style: _CONTENT_STYLE),
        ],
      ),
    );
  }
}