import 'package:flutter/material.dart';
import 'package:twong/api/index.dart';
import 'package:twong/models/index.dart';
import 'package:twong/utils/index.dart';
import 'package:twong/config/style.dart';
import 'package:twong/widgets/app_bar.dart';

class BillRecordPage extends StatefulWidget {
  final int idx;
  BillRecordPage({this.idx = 0});

  @override
  State<StatefulWidget> createState() {
    return _BillRecordState();
  }
}

class _BillRecordState extends State<BillRecordPage> {
  int index;
  List _data = List<PromoteRecordList>();
  List<String> tabs = ["全部", "消费记录", "充值记录"];

  @override
  void initState() {
    super.initState();
    doSelect(widget.idx);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: DColors.back,
      appBar: DAppBar("账单记录"),
      body: SafeArea(
        child: Column(
          children: [
            _buildTabs(),
            Expanded(child: _buildList())
          ],
        ),
      ),
    );
  }

  void doSelect(int idx) {
    setState(() {
      index = idx;
      _data = null;
    });

    Network.inst.getPromotionRecord(type: idx).then((list) {
      setState(() {
        _data = list;
      });
    });
  }

  Widget _buildTabs() {
    final _style = TextStyle(fontSize: 12.px, color: Colors.white);
    List<Widget> widgets = List<Widget>();
    for (var idx = 0; idx < tabs.length; idx ++) {
      widgets.add(Expanded(child: Container(
        width: 4.px,
        child: FlatButton(
          minWidth: 1.px,
          highlightColor: Colors.transparent,
          onPressed: () => doSelect(idx),
          child: Container(
            padding: EdgeInsets.only(bottom: 4.px),
            decoration: BoxDecoration(
              border: index == idx ? Border(
                  bottom: BorderSide(color: Colors.white)
              ) : null,
            ),
            child: Text(tabs[idx], textAlign: TextAlign.center, style: _style),
          ),
        ),
      )));
    }

    return Container(
        constraints: BoxConstraints.expand().widthConstraints(),
        height: 46.px,
        decoration: BoxDecoration(
          // color: Colors.white,
          color: DColors.Main,
          boxShadow: DShadow.down,
        ),
        margin: EdgeInsets.only(bottom: 6.px),
        child: Row(children: widgets));
  }

  Widget _buildList() {
    List<Widget> widgets = List<Widget>();
    if(_data != null) {
      for (var item in _data) {
        List<Widget> subWidgets = List<Widget>();
        for (var subItem in item.list) {
          subWidgets.add(Container(
            margin: EdgeInsets.all(8.px),
            padding: EdgeInsets.only(left: 6.px, right: 6.px),
            child: Row(
              children: [
                Expanded(child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(subItem.title, style: TextStyle(fontSize: 13.px)),
                      Text(
                          subItem.add_time, style: TextStyle(color: Colors.grey,
                          fontSize: 12.px)),
                    ])),
                Text(Utils.formatRMB(subItem.number, sign: true),
                    style: TextStyle(color: Colors.green, fontSize: 16.px))
              ],
            ),
          ));
          subWidgets.add(Divider());
        }
        subWidgets.removeLast();
        widgets.add(Container(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                    margin: EdgeInsets.all(12.px),
                    padding: EdgeInsets.only(left: 6.px, right: 6.px),
                    child: Text(item.time, style: TextStyle(fontSize: 12.px))),
                Container(
                    color: Colors.white,
                    width: double.infinity,
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: subWidgets))
              ]),
        ));
      }
    }

    return Container(
      child: _data == null ? Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.only(top: 88.px),
        child: Center(child: Utils.loadingWidget),
      ) : Container(
        child: ListView(
          physics: ClampingScrollPhysics(),
          children: widgets,
        ),
      ),
    );
  }
}