import 'package:flutter/material.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'package:cached_network_image/cached_network_image.dart';

///
/// 快速登陆
///
class LoginQuickPage extends StatelessWidget {
  final Map<String, dynamic> model;

  const LoginQuickPage(this.model, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: LoginQuickContainerPage(),
    );
  }
}

class LoginQuickContainerPage extends StatefulWidget {
  @override
  _LoginQuickContainerPageState createState() => _LoginQuickContainerPageState();
}

class _LoginQuickContainerPageState extends State<LoginQuickContainerPage> {

  /// 登陆事件
  void _submitOnClick() {
    print('点击登陆');
  }

  /// 切换账号
  void _changeAccount() {
    print('切换账号');
  }

  /// 同意or取消用户协议
  void _agree(){

  }

  final _sizedBoxHeight30 = const SizedBox(height: 30);
  final _sizedBoxHeight35 = const SizedBox(height: 35);
  final _sizedBoxHeight20 = const SizedBox(height: 20);
  final _sizedBoxHeight16 = const SizedBox(height: 16);
  final _sizedBoxHeight28 = const SizedBox(height: 28);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        /// appbar
        _getAppBarWidget(),
        _sizedBoxHeight30,

        /// logo
        _getLogoWidget(null),
        _sizedBoxHeight35,

        /// 账号
        _getAccountWidget(null),
//        _sizedBoxHeight20,

        /// 切换账号提示
        _changeAccountTipWidget(null),
//        _sizedBoxHeight20,

        /// 登陆按钮
        _submitButton(null),
        _sizedBoxHeight16,

        /// 协议
        _protocolWidget(null),

        /// 底部tip
        Expanded(
          child: Align(
            child: _bottomTipWidget(null),
            alignment: Alignment.bottomCenter,
          ),
        )
      ],
    );
  }

  /// 底部提示
  Widget _bottomTipWidget(var model) {
    return Container(
        margin: const EdgeInsets.only(bottom: 28), child: Text('中国电信提供认证服务', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#C0C0C0'))));
  }

  /// 协议
  Widget _protocolWidget(var model) {
    return Container(
      child: Text('《嗨如意用户协议》', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#C0C0C0'))),
    );
  }

  /// 立即登陆按钮
  Widget _submitButton(var model) {
    return Material(
      child: Container(
        height: 52,
        width: double.infinity,
        color: Colors.white,
        padding: const EdgeInsets.symmetric(horizontal: 27.5),
        child: RaisedButton(
          child: Text(
            '立即登录',
            style: TextStyle(fontSize: 15),
          ),
          textColor: HexColor.fromHex('#FFFFFF'),
          color: HexColor.fromHex('#FF3939'),
          disabledColor: HexColor.fromHex('#F5F5F5'),
          disabledTextColor: HexColor.fromHex('#999999'),
          elevation: 5,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(52 / 2)),
          onPressed: _submitOnClick,
        ),
      ),
    );
  }

  /// 切换账号提示
  Widget _changeAccountTipWidget(var model) {
    return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => _changeAccount(), child: Container( margin: const EdgeInsets.symmetric(vertical: 20), child: Text('切换账号', style: TextStyle(fontSize: 13, color: HexColor.fromHex('#FF3939')))));
  }

  /// 账号
  Widget _getAccountWidget(var model) {
    return Text('158****3158', style: TextStyle(fontSize: 25, color: HexColor.fromHex('#333333')));
  }

  /// login
  Widget _getLogoWidget(var model) {
    return Container(
      margin: EdgeInsets.only(bottom: 12, top: MediaQuery.of(context).padding.top),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(14),
        boxShadow: [
          BoxShadow(color: Colors.grey[300], offset: Offset(0.0, 0.0), blurRadius: 10.0, spreadRadius: 1.0),
          BoxShadow(color: Colors.grey[300], offset: Offset(0.0, 0.0)),
        ],
      ),
      height: 80,
      width: 80,
      child: CachedNetworkImage(
        imageUrl: model?.logoImg ?? '',
        fit: BoxFit.fill,
      ),
    );
  }

  /// appBar
  Widget _getAppBarWidget() {
    return AppBar(
      brightness: Brightness.light,
      backgroundColor: Colors.transparent,
      elevation: 0,
      leading: Icon(
        Icons.arrow_back_ios,
        size: 22,
        color: HexColor.fromHex('#333333'),
      ),
    );
  }
}