import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/round_button.dart';
import 'package:huixiang/view_widget/separator.dart';

class WriteOffPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _WriteOffPage();
  }
}

class _WriteOffPage extends State<WriteOffPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF32A060),
      appBar: AppBar(
        title: Text(
          "核销码详情",
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 18,
          ),
        ),
        centerTitle: false,
        backgroundColor: Color(0xFF32A060),
        elevation: 0,
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
      ),
      body: Container(
        alignment: Alignment.topCenter,
        child: Stack(
          alignment: Alignment.topCenter,
          children: [
            Image.asset(
              "assets/image/icon_write_off_bg.png",
              width: MediaQuery.of(context).size.width * 0.912,
              fit: BoxFit.fill,
            ),
            LayoutBuilder(builder: (context, constraints) {
              return Container(
                width: constraints.constrainWidth() * 0.912,
                child: Column(
                  children: [
                    Expanded(
                      child: Container(
                        child: Column(
                          children: [
                            Text(
                              "马克杯兑换核销码",
                              style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                  color: Color(0xFF353535)),
                            ),
                            SizedBox(
                              height: 8,
                            ),
                            Text(
                              "有效期：2020.01~2020.01.21",
                              style: TextStyle(
                                  fontSize: 12, color: Color(0xFF353535)),
                            ),
                          ],
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                        ),
                        alignment: Alignment.center,
                      ),
                      flex: 6,
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 20, right: 20),
                      child: MySeparator(
                        width: 5,
                        height: 1,
                        color: Color(0xFFA29E9E),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        alignment: Alignment.center,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              "2673  7132  6323  6786",
                              style: TextStyle(
                                  fontSize: 14,
                                  wordSpacing: 6.6,
                                  letterSpacing: 6.6,
                                  fontWeight: FontWeight.bold,
                                  color: Color(0xFF353535)),
                            ),
                            SizedBox(
                              height: 12,
                            ),
                            Icon(
                              Icons.qr_code,
                              size: 72,
                              color: Colors.black,
                            ),
                            SizedBox(
                              height: 16,
                            ),
                            Icon(
                              Icons.qr_code,
                              size: 130,
                              color: Colors.black,
                            ),
                            SizedBox(
                              height: 35,
                            ),
                            InkWell(
                              onTap: (){
                                Navigator.of(context).pushNamed('/router/write_off_success_page');
                              },
                              child: Container(
                                child: RoundButton(
                                  text: S.of(context).weihexiao,
                                  textColor: Colors.white,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold,
                                  backgroup: Color(0xFF32A060),
                                  radius: 4,
                                  padding: EdgeInsets.fromLTRB(42, 12, 42, 12),
                                ),
                                width: 130,
                              ),
                            )
                          ],
                        ),
                      ),
                      flex: 28,
                    ),
                    Container(
                      child: MySeparator(
                        width: 5,
                        height: 1,
                        color: Color(0xFFA29E9E),
                      ),
                      margin: EdgeInsets.only(left: 20, right: 20),
                    ),
                    Expanded(
                      child: Container(
                        padding: EdgeInsets.fromLTRB(20, 15, 20, 24),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Container(
                                  width: 3,
                                  height: 15,
                                  margin: EdgeInsets.fromLTRB(4, 7, 4, 7),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(3),
                                      color: Color(0xFF20662A)),
                                ),
                                Text(
                                  S.of(context).shiyongtiaojian,
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 14,
                                      color: Color(0xFF353535)),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(
                                  width: 11,
                                ),
                                Expanded(
                                  child: Text(
                                    S.of(context).qianwanghuixiangmendianduihuanhexiao,
                                    style: TextStyle(
                                        textBaseline: TextBaseline.alphabetic,
                                        fontSize: 14,
                                        color: Color(0xFF353535)),
                                  ),
                                  flex: 1,
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Container(
                                  width: 3,
                                  height: 15,
                                  margin: EdgeInsets.fromLTRB(4, 7, 4, 7),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(3),
                                      color: Color(0xFF20662A)),
                                ),
                                Text(
                                  S.of(context).shiyongshuoming,
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 14,
                                      color: Color(0xFF353535)),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(
                                  width: 11,
                                ),
                                Text(
                                  S.of(context).zitiduihuanquan,
                                  style: TextStyle(
                                      textBaseline: TextBaseline.alphabetic,
                                      fontSize: 14,
                                      color: Color(0xFF353535)),
                                ),
                              ],
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(
                                  width: 11,
                                ),
                                Text(
                                  S.of(context).huixiangrenyimendian,
                                  style: TextStyle(
                                      textBaseline: TextBaseline.alphabetic,
                                      fontSize: 14,
                                      color: Color(0xFF353535)),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      flex: 13,
                    ),
                    Expanded(
                      child: Container(),
                      flex: 3,
                    ),
                  ],
                ),
              );
            })
          ],
        ),
      ),
    );
  }
}