import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:project_telephony/base/base_style.dart';
import 'package:project_telephony/ui/widget/plone_bottom.dart';
import 'package:project_telephony/utils/headers.dart';
import 'package:project_telephony/utils/toast/cloud_toast.dart';

import '../widget/image_scaffold.dart';

class UserCardPage extends StatefulWidget {
  const UserCardPage({Key? key}) : super(key: key);

  @override
  _UserCardPageState createState() => _UserCardPageState();
}

class _UserCardPageState extends State<UserCardPage> {
  String cardMi = "";

  @override
  Widget build(BuildContext context) {
    return CloudScaffold(
        systemStyle: const SystemUiOverlayStyle(
          statusBarIconBrightness: Brightness.dark,
          // systemNavigationBarColor: Colors.white,
        ),
        path: Assets.images.bg.path,
        bodyColor: Colors.white,
        extendBody: true,
        body: Column(
          children: [
            44.hb,
            ListTile(
                leading: Padding(
                  padding: EdgeInsets.only(left: 32.w, right: 156.w),
                  child: const Icon(
                    Icons.chevron_left,
                    color: Colors.black,
                  ),
                ),
                onTap: () {
                  Get.back();
                },
                title: Text(
                  "卡密兑换",
                  style: TextStyle(
                      fontSize: 34.sp,
                      fontWeight: FontWeight.bold,
                      color: BaseStyle.color333333),
                )),
            58.hb,
            Container(
              width: 750.w,
              height: 700.w,
              padding: EdgeInsets.symmetric(horizontal: 64.w),
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage(Assets.images.cardbg.path))),
              child: Column(
                children: [
                  88.hb,
                  Padding(
                    padding: EdgeInsets.only(left: 34.w),
                    child: getText(),
                  ),
                  124.hb,
                  _getCard(),
                  88.hb,
                  PloneBottom(
                    blM: false,
                    onTap: () {
                      if(cardMi.isEmpty){
                        CloudToast.show("卡密为空");
                      }else{
                        CloudToast.show("卡密兑换成功");
                      }
                    },
                    border: cardMi.isEmpty?true:false,
                    opacity: cardMi.isEmpty? 0.4:1,
                    text: "立即兑换",
                  )
                ],
              ),
            )
          ],
        ));
  }

  _getCard() {
    return TextField(
      // controller: ,
      onChanged: (value) {
        cardMi = value;
        setState(() {});
      },
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(30.w),
        hintText: "请在此处输入卡密",
        hintStyle: TextStyle(
          fontSize: 28.sp,
          fontWeight: FontWeight.w600,
          color: const Color(0xFF999999),
        ),
        fillColor: const Color(0xFFFFFFFF),
        filled: true,
        enabledBorder: const OutlineInputBorder(
          /*边角*/
          borderRadius: BorderRadius.all(
            Radius.circular(5), //边角为5
          ),
          borderSide: BorderSide(
            color: Colors.white, //边线颜色为白色
            width: 0, //边线宽度为2
          ),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.white, //边框颜色为白色
            width: 0, //宽度为5
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(5), //边角为30
          ),
        ),
      ),
    );
  }

  getText() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Text(
              "快速兑换",
              style: TextStyle(
                  color: const Color(0xFFFFEAB0),
                  fontSize: 40.sp,
                  fontWeight: FontWeight.bold),
            ),
            300.wb,
            Text(
              "VIP",
              style: TextStyle(
                  color: const Color(0xFFE7F3FF),
                  fontFamily: "BlackItalic",
                  fontSize: 40.sp),
            ),
          ],
        ),
        24.hb,
        Text(
          "短信帮手会员时长",
          style: TextStyle(color: const Color(0xFFFFEAB0), fontSize: 24.sp),
        )
      ],
    );
    //   RichText(
    //   text: const TextSpan(
    //     children: [
    //       TextSpan(
    //         text: "快速兑换",
    //         style: TextStyle(
    //           fontWeight: FontWeight.w600,
    //           color: Colors.black38,
    //         ),
    //       ),
    //       TextSpan(
    //         text: "VIP  \n",
    //         style: TextStyle(
    //           color: Colors.black38,
    //         ),
    //       ),
    //       TextSpan(
    //         text: "\n",
    //         style: TextStyle(
    //           color: Colors.black38,
    //         ),
    //       ),
    //       TextSpan(
    //         text: "vip",
    //         style: TextStyle(
    //           color: Colors.black38,
    //         ),
    //       ),
    //     ],
    //   ),
    // );
  }
}