import 'dart:convert';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zhiying_base_widget/widgets/wallet/wallet_data/model/wallet_header_model.dart';
import 'package:zhiying_base_widget/widgets/wallet/wallet_data/wallet_data_bloc.dart';
import 'package:zhiying_base_widget/widgets/wallet/wallet_data/wallet_data_sk.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'package:provider/provider.dart';

class WalletData extends StatefulWidget {
  final Map<String, dynamic> data;

  WalletData(this.data, {Key key}) : super(key: key);

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

class _WalletDataState extends State<WalletData> {
  Map<String, dynamic> data;
  WalletDataBloc _bloc;

  Map<String, dynamic> dataModel;

  @override
  void initState() {
    super.initState();
    data = widget.data;
    _bloc = WalletDataBloc();
    _bloc.loadHeaderData();
  }

  @override
  void didChangeDependencies() {

    RefreshListener.listen(context, (event) {
      _bloc.loadHeaderData();
    });
    super.didChangeDependencies();
  }


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

  @override
  Widget build(BuildContext context) {
    WalletHeaderModel model;

    return StreamBuilder(
      stream: _bloc.outData,
      builder: (context, asn) {
        dataModel = asn.data;
        if (data.containsKey('data')) {
          Map<String, dynamic> temp = json.decode(data['data']);
          model = WalletHeaderModel.fromJson(temp);
        } else {
          return WalletDataSkeleton();
        }
        return Container(
            width: double.infinity,
            child: dataModel == null
                ? WalletDataSkeleton()
                : Container(
                    margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 10),
                    padding: EdgeInsets.only(left: 18, right: 13),
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: CachedNetworkImageProvider(
                                model?.headerImg ?? ""),
                            fit: BoxFit.fill)),
                    height: 145,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                CachedNetworkImage(
                                  imageUrl: model?.headerAvatar ?? "",
                                  height: 33,
                                  width: 26,
                                  fit: BoxFit.fill,
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Text(
                                        model?.headerCashOutText ?? "",
                                        style: TextStyle(
                                            fontSize: 12.5,
                                            color: HexColor.fromHex(
                                                model?.headerCashOutTextColor ??
                                                    "")),
                                      ),
                                      Text(
                                        dataModel.containsKey(
                                                model.headerCashOutKey)
                                            ? dataModel[model.headerCashOutKey]
                                            : "",
                                        style: TextStyle(
                                          fontSize: 20,
                                          color: HexColor.fromHex(
                                              model.headerCashOutTextColor),
                                          fontFamily: 'Din-Bold',
                                          package: 'zhiying_comm',
                                        ),
                                      ),
                                    ],
                                  ),
                                )
                              ],
                            ),
                            GestureDetector(
                              onTap: () {
                                RouterUtil.route(
                                    model, model.toJson(), context);
                              },
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  image: DecorationImage(
                                      image: CachedNetworkImageProvider(
                                          model.headerCashOutBtnImg ?? ''),
                                      fit: BoxFit.fill),
                                ),
                                child: Padding(
                                  padding: EdgeInsets.only(
                                      left: 14.5,
                                      right: 14.5,
                                      top: 10,
                                      bottom: 10),
                                  child: Text(
                                    model.headerCashOutBtnText,
                                    style: TextStyle(
                                        color: HexColor.fromHex(
                                            model.headerCashOutBtnTextColor)),
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                        Divider(
                          height: 1,
                        ),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: _buildTopListItem(model))
                      ],
                    ),
                  ));
      },
    );
  }

  ///构建顶部Item
  _buildTopListItem(WalletHeaderModel model) {
    List<Widget> listWidget = List();
    for (var item in model.headerBottomList) {
      listWidget.add(Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            dataModel.containsKey(item.valueKey)
                ? dataModel[item.valueKey]
                : "",
            style: TextStyle(
                color: HexColor.fromHex(item.valueColor),
                fontSize: 15,
                fontFamily: 'Din-Bold',
                package: 'zhiying_comm'),
          ),
          Text(
            item.text,
            style: TextStyle(
                color: HexColor.fromHex(item.textColor), fontSize: 11),
          ),
        ],
      ));
    }
    return listWidget;
  }
}