import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vnoteapp/components/appbar.dart';
import 'package:vnoteapp/components/panel.dart';

import 'controller.dart';

class PatientDetailPage extends GetView<PatientDetailController> {
  const PatientDetailPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(238, 238, 238, 1),
      // appBar: VAppBar(titleText: "${controller.state.name}档案详情"),
      appBar: VAppBar(
        context: context,
        titleWidget: Obx(
          () => Text(
            "${controller.state.name}档案详情",
            style: const TextStyle(fontSize: 24),
          ),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
        child: Column(
          children: [
            SizedBox(
              height: 220,
              child: Row(
                children: [
                  VPanel(
                    backgroundColor: const Color.fromRGBO(0, 152, 218, 1),
                    child: SizedBox(
                      width: 680,
                      child: _buildPatientInfoChild(),
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: VPanel(
                      backgroundColor: const Color.fromRGBO(249, 216, 69, 1),
                      child: _buildFollowUpChild(),
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 16),
            Expanded(
              child: VPanel(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30),
                  child: _buildEntranceChild(),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildPatientInfoChild() {
    const txtStyle = TextStyle(color: Colors.white, fontSize: 14);
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 110,
          padding: const EdgeInsets.only(top: 8),
          child: CircleAvatar(
            radius: 50,
            child: Image.asset("assets/images/patient/avatar_girl.png"),
          ),
        ),
        const SizedBox(width: 8),
        Obx(
          () => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 8),
              Text(controller.state.name,
                  style: txtStyle.copyWith(fontSize: 18)),
              const SizedBox(height: 8),
              Text(
                  "${controller.state.genderDesc}  ${controller.state.age}岁        电话：${controller.state.phone}",
                  style: txtStyle),
              const SizedBox(height: 2),
              Text("地址：${controller.state.address}", style: txtStyle),
              const SizedBox(height: 16),
              SizedBox(
                width: 380,
                child: Wrap(
                  spacing: 20,
                  runSpacing: 12,
                  //TODO:
                  children: ["一般人群", "高血压", "老年人", "儿童", "糖尿病", "冠心病", "残疾人"]
                      .map((e) => _PatientClassTagWidget(
                            label: e,
                          ))
                      .toList(),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  /// 构建功能页入口
  Widget _buildEntranceChild() {
    return Wrap(
      spacing: 110,
      runSpacing: 40,
      children: [
        _FunctionEntranceWidget(
          label: "健康档案",
          assetName: "档案.png",
          onTap: controller.gotoInfo,
        ),
        _FunctionEntranceWidget(
          label: "人群随访",
          assetName: "随访.png",
          onTap: () {},
        ),
        _FunctionEntranceWidget(
          label: "随访报告",
          assetName: "随访报告.png",
          onTap: () {},
        ),
        _FunctionEntranceWidget(
          label: "健康体检",
          assetName: "体检.png",
          onTap: () {},
        ),
        _FunctionEntranceWidget(
          label: "医生签约",
          assetName: "签约.png",
          onTap: () {
            Get.toNamed(
              "/contract/package_list",
              parameters: {"patientCode": controller.state.code},
            );
          },
        ),
        _FunctionEntranceWidget(
          label: "双向转诊",
          assetName: "转诊.png",
          onTap: () {},
        ),
        _FunctionEntranceWidget(
          label: "诊疗展示",
          assetName: "诊疗.png",
          onTap: () {},
        ),
      ],
    );
  }

  Widget _buildFollowUpChild() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _FollowUpTagWidget(),
          const SizedBox(height: 24),
          LayoutBuilder(builder: (context, c) {
            return Container(
              width: c.maxWidth,
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Wrap(
                spacing: 20,
                runSpacing: 12,
                children: ["高血压", "儿童"]
                    .map((e) => _PatientClassTagWidget(
                          label: e,
                        ))
                    .toList(),
              ),
            );
          })
        ],
      ),
    );
  }
}

class _PatientClassTagWidget extends StatelessWidget {
  final String label;

  const _PatientClassTagWidget({required this.label});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60,
      height: 24,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: Colors.white, width: 1),
      ),
      child: Text(
        label,
        style: const TextStyle(color: Colors.white, fontSize: 12),
      ),
    );
  }
}

class _FunctionEntranceWidget extends StatelessWidget {
  final String label;
  final String assetName;
  final VoidCallback? onTap;

  const _FunctionEntranceWidget({
    required this.label,
    required this.assetName,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Ink(
        child: InkWell(
          borderRadius: BorderRadius.circular(8),
          onTap: () {
            onTap?.call();
          },
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
            ),
            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 14),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  "assets/images/patient/$assetName",
                  width: 70,
                  height: 70,
                  fit: BoxFit.contain,
                ),
                const SizedBox(height: 8),
                Text(
                  label,
                  style: const TextStyle(
                    fontSize: 22,
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _FollowUpTagWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 190,
      height: 60,
      alignment: Alignment.center,
      // padding: const EdgeInsets.symmetric(horizontal: 56 / 2),
      decoration: BoxDecoration(
        color: const Color.fromRGBO(240, 128, 0, 1),
        borderRadius: BorderRadius.circular(56 / 2),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            "assets/images/icons/remind.png",
            width: 32,
            height: 32,
            fit: BoxFit.contain,
          ),
          const SizedBox(width: 4),
          const Text(
            "随访提醒",
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}
