import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:one_key/pages/online_check/img_picker_widget.dart';
import 'package:one_key/provider/online_check_edit_provider.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/utils/navigator_util.dart';
import 'package:one_key/utils/utils.dart';
import 'package:one_key/widgets/MyDivider.dart';
import 'package:one_key/widgets/h_empty_view.dart';
import 'package:one_key/widgets/my_item.dart';
import 'package:one_key/widgets/system_app_bar.dart';
import 'package:one_key/widgets/v_empty_view.dart';
import 'package:provider/provider.dart';

class OnlineCheckEditPage extends StatefulWidget {
  final bool fromNotify;
  OnlineCheckEditPage({Key key, this.fromNotify = false}) : super(key: key);

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

class _OnlineCheckEditPageState extends State<OnlineCheckEditPage> {
  ScrollController _scrollController = ScrollController();
  TextEditingController _editingController = TextEditingController();
  FocusNode _focusNode = FocusNode();
  OnlineCheckEditProvider _onlineCheckEditProvider;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _getQiniuInfo();
    });
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        //有焦点
        _editingController.text = '¥';
      } else {
        //失去焦点
        _editingController.text = '';
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    //  _onlineCheckEditProvider
  }

  ///获取七牛云token
  ///
  _getQiniuInfo() async {
    await _onlineCheckEditProvider.getQiniuInfo(context, {});
  }

  ///顶部logo
  Widget _getLogoWidget() {
    return Column(
      children: [
        Image.asset(
          Utils.getImgPath('check'),
          width: ScreenUtil().setWidth(37 * 2),
          height: ScreenUtil().setWidth(33 * 2),
        ),
        VEmptyView(12),
        Container(
          height: ScreenUtil().setWidth(44),
          alignment: Alignment.center,
          child: Text(
            '顾客申请买单',
            style: TextStyle(
                fontSize: ScreenUtil().setSp(32),
                color: MyColours.color_353535,
                fontWeight: FontWeight.bold),
          ),
        )
      ],
    );
  }

  ///桌位信息、应收金额
  Widget _getTabAndMoneyInfoWidget() {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(ScreenUtil().setWidth(10))),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.symmetric(
                horizontal: ScreenUtil().setWidth(40),
                vertical: ScreenUtil().setWidth(36)),
            child: Row(
              children: [
                Text(
                  '桌位信息',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(32),
                      color: MyColours.color_707070),
                ),
                Spacer(),
                Text(
                  '[包间]秦皇岛',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(32),
                      color: MyColours.color_353535),
                )
              ],
            ),
          ),
          Padding(
            padding:
                EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(20)),
            child: MyDivider(
              double.infinity,
              ScreenUtil().setWidth(2),
              color: MyColours.color_EEEEEE,
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(
                horizontal: ScreenUtil().setWidth(40),
                vertical: ScreenUtil().setWidth(36)),
            child: Row(
              children: [
                Text(
                  '应收金额',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(32),
                      color: MyColours.color_707070),
                ),
                // Spacer(),
                HEmptyView(40),
                Expanded(
                    flex: 1,
                    child: TextField(
                      maxLines: 1,
                      textAlign: TextAlign.end,
                      //输入文本的样式
                      style: TextStyle(
                          fontSize: ScreenUtil().setSp(34),
                          color: MyColours.color_353535),
                      controller: _editingController,
                      focusNode: _focusNode,
                      // textAlignVertical: TextAlignVertical.top,
                      decoration: InputDecoration(
                        hintText: "点击填写金额",
                        hintStyle: TextStyle(
                          color: MyColours.color_9C9C9C,
                          fontSize: ScreenUtil().setSp(32),
                        ),
                        // contentPadding:
                        //     EdgeInsets.only(bottom: ScreenUtil().setWidth(17)),
                        border: InputBorder.none,
                      ),
                      onChanged: (value) {
                        print(value);
                        // currentRemark = value;
                        // print();
                      },
                      onEditingComplete: () {
                        print('fff');
                        _editingController.text = '';
                        // _needNode.unfocus();
                      },
                      // keyboardType: TextInputType.number,
                    ))
              ],
            ),
          ),
        ],
      ),
    );
  }

  ///顾客信息
  Widget _customInfoItemWidget(String title, String subTitle) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          title,
          style: TextStyle(
              fontSize: ScreenUtil().setSp(28), color: MyColours.color_707070),
        ),
        Text(
          subTitle,
          style: TextStyle(
              fontSize: ScreenUtil().setSp(28),
              color: MyColours.color_707070,
              fontWeight: FontWeight.bold),
        )
      ],
    );
  }

  Widget _customInfoWidget() {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(10)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
              height: ScreenUtil().setWidth(53 * 2),
              width: double.infinity,
              decoration: BoxDecoration(
                color: MyColours.color_FAFAFA,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10)),
              ),
              child: Padding(
                padding: EdgeInsets.fromLTRB(
                    ScreenUtil().setWidth(20),
                    ScreenUtil().setWidth(36),
                    ScreenUtil().setWidth(20),
                    ScreenUtil().setWidth(26)),
                child: Text(
                  '顾客信息',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(32),
                      color: MyColours.color_353535,
                      fontWeight: FontWeight.bold),
                ),
              )),
          Container(
            color: Colors.white,
            padding: EdgeInsets.fromLTRB(
                ScreenUtil().setWidth(40),
                ScreenUtil().setWidth(24),
                ScreenUtil().setWidth(40),
                ScreenUtil().setWidth(36)),
            child: Column(
              children: [
                _customInfoItemWidget('买单顾客', 'ffff'),
                VEmptyView(24),
                _customInfoItemWidget('顾客电话', 'ffff'),
                VEmptyView(24),
                _customInfoItemWidget('到店时间', 'ffff'),
                VEmptyView(24),
                _customInfoItemWidget('申请时间', 'ffff')
              ],
            ),
          )
          //  _getGridImg(1, context)
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    _onlineCheckEditProvider =
        Provider.of<OnlineCheckEditProvider>(context, listen: true);
    return Scaffold(
      backgroundColor: MyColours.color_f5f5f5,
      appBar: SystemAppBar(
        '提前买单',
        onTap: () {
          if (widget.fromNotify) {
            NavigatorUtil.goHomePage(context, initialIndex: 0);
          } else {
            Navigator.of(context).pop();
          }
        },
      ),
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Padding(
            padding: EdgeInsets.symmetric(
                horizontal: ScreenUtil().setWidth(20),
                vertical: ScreenUtil().setWidth(40)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //图标
                _getLogoWidget(),
                VEmptyView(40),
                _getTabAndMoneyInfoWidget(),
                VEmptyView(10),
                // 备注信息
                Container(
                  padding: EdgeInsets.symmetric(
                      horizontal: ScreenUtil().setWidth(20)),
                  child: Text(
                    '*贾森基德款式经典福克斯肌肤快速反击',
                    style: TextStyle(
                        fontSize: ScreenUtil().setSp(28),
                        color: MyColours.color_FD5656),
                  ),
                ),
                VEmptyView(20),
                ImgPickerWidget(scrollController: _scrollController),
                VEmptyView(20),
                _customInfoWidget()
              ],
            )),
      ),
    );
  }
}