import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

import 'controller.dart';

class QrCodePage extends GetView<QrCodeController> {
  const QrCodePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<QrCodeController>(
      init: QrCodeController(),
      id: 'qrcode',
      builder: (controller) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('绑定车辆'),
            centerTitle: true,
            elevation: 0,
          ),
          body: Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(horizontal: 24.0),
            child: SingleChildScrollView(child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(height: 24),
                Icon(
                  Icons.directions_car_rounded,
                  size: 100,
                  color: Theme.of(context).primaryColor.withOpacity(0.1),
                ),
                const SizedBox(height: 24),
                const Text(
                  "请选择绑定方式",
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 8),
                const Text(
                  "您可以拍摄照片自动识别，\n或手动输入车牌号进行绑定。",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 14, color: Colors.grey),
                ),
                const SizedBox(height: 60),

                // 拍照识别按钮
                ElevatedButton.icon(
                  onPressed: controller.takePhotoAndRecognize,
                  icon: const Icon(Icons.camera_alt_rounded),
                  label: const Text("拍照识别车牌"),
                  style: ElevatedButton.styleFrom(
                    minimumSize: const Size(double.infinity, 56),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),
                    textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                ),
                const SizedBox(height: 20),

                // 3. 手动输入按钮
                OutlinedButton.icon(
                  onPressed: (){
                    controller.manualInputBind("",1);
                  },
                  icon: const Icon(Icons.edit_note_rounded),
                  label: const Text("手动输入车牌"),
                  style: OutlinedButton.styleFrom(
                    minimumSize: const Size(double.infinity, 56),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(28)),
                    side: BorderSide(color: Theme.of(context).primaryColor, width: 1.5),
                    textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                ),
                const SizedBox(height: 100), // 底部留白
              ],
            ),),
          ),
        );
      },
    );
  }
}