import 'package:flutter/material.dart';
import 'package:wisdom_cli/wisdom_cli.dart';
import 'package:intelligent_package/src/components/showCofirmMeterDialog.dart';
import '../../view_models/private_intelligent_detail_model.dart';
import '../../view_models/private_intelligent_index_model.dart';

// part 'components/list.dart';
class DetailPage extends StatelessWidget {
  const DetailPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (providerContext) =>
              PrivateDetailStore(context, providerContext),
          lazy: false,
        ),
        ChangeNotifierProvider(
          create: (providerContext) =>
              PrivateIntelligentIndexStore(context, providerContext),
          lazy: false,
        )
      ],
      child: _PageView(),
    );
  }
}

class _PageView extends StatefulWidget {
  _PageView({Key? key}) : super(key: key);
  @override
  _PageViewState createState() => _PageViewState();
}

class _PageViewState extends State<_PageView> {
  @override
  Widget build(BuildContext context) {
    final style = WTheme.of(context);
    final colorScheme = style.colorScheme;
    final store = Provider.of<PrivateDetailStore>(context, listen: true);
    var item = store.routingArgs['item'];
    return new WillPopScope(
      onWillPop: () {
        Navigator.pop(context, item);
        return new Future(() => false);
      },
      child: Scaffold(
        appBar: WAppBar(
          brightness: Brightness.light,
          iconTheme: IconThemeData(
            color: Colors.white,
            size: 19.pt,
          ),
          backgroundColor: colorScheme.primary,
          title: WisText(
            '智能表明细',
            size: 19.pt,
            weight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
        body: WisScrollView(
          key: store.scorllViewListKeyIndex,
          onInit: () => store.getDetail(),
          onLoad: () => store.getDetailList(isLoad: true),
          slivers: <Widget>[
            DetailHeader().asSliver(),
            SliverPersistentHeader(
              pinned: true,
              floating: true,
              delegate: StickyTabBarDelegate(
                child: Wisdom(
                  key: store.scrollKey,
                  child: Wisdom.row(
                    color: Colors.white,
                    margin: EdgeInsets.only(
                        // top: item['meterType'] == 'electricMeter'
                        //     ? 260.pt
                        //     : 250.pt,
                        bottom: 10.pt),
                    padding: EdgeInsets.symmetric(
                      vertical: 10.pt,
                    ),
                    children: [
                      Wisdom(
                        minHeight: 20.pt,
                        maxHeight: 20.pt,
                        width: 3.pt,
                        margin: EdgeInsets.only(left: 16.pt, right: 6.pt),
                        color: Color(0xFF0F67F8),
                        borderRadius: BorderRadius.circular(1.5.pt),
                      ),
                      Wisdom(
                        margin: EdgeInsets.only(left: 10.pt),
                        child: WisText(
                          '变动记录',
                          size: 16.pt,
                          weight: FontWeight.w500,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            SliverFillRemaining(
              // hasScrollBody: false,
              // fillOverscroll: false,
              child: SingleChildScrollView(
                  controller: store.outerController,
                  child: Column(
                    children: [
                      for (var detail in store.detailList)
                        WisCard(
                          margin: EdgeInsets.symmetric(
                              vertical: 5.pt, horizontal: 15.pt),
                          color: Colors.white,
                          padding: EdgeInsets.all(15.pt),
                          child: Column(
                            children: [
                              Wisdom.row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                margin: EdgeInsets.only(bottom: 8.pt),
                                children: [
                                  Wisdom.row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      Text(
                                        '${store.actionType[detail.action]}',
                                        style: TextStyle(
                                          color: colorScheme.mainTitle,
                                          fontSize: 16.pt,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      Wisdom(
                                        margin: EdgeInsets.only(left: 10.pt),
                                        child: Text(
                                          detail.changeMargin != null &&
                                                  detail.changeMargin! > 0
                                              ? '+${detail.changeMargin}'
                                              : '${detail.changeMargin ?? ''}',
                                          style: TextStyle(
                                            color:
                                                detail.changeMargin != null &&
                                                        detail.changeMargin! > 0
                                                    ? Color(0xff26B41C)
                                                    : Color(0xffF9585A),
                                            fontSize: 16.pt,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                  WisText(
                                    '${store.chargeMode == 'transcribeCharging' ? '${detail.currentAmount ?? '--'}' : '${detail.currentMargin ?? '--'}'}',
                                    color: Color(0xff26B41C),
                                    weight: FontWeight.w500,
                                    size: 16.pt,
                                  ),
                                ],
                              ),
                              Wisdom.row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  WisText(
                                    '${detail.createAt ?? '--'}',
                                    color: colorScheme.placeholder2,
                                    size: 13.pt,
                                  ),
                                  if (detail.operationMode == 3)
                                    Text(
                                      '${'住户：' + (detail.createBy ?? '--')}',
                                      style: TextStyle(
                                        color: Color(0xff9A9A9A),
                                        fontSize: 12.pt,
                                      ),
                                    ),
                                  if (detail.operationMode != 3)
                                    Text(
                                      '${detail.createBy ?? '--'}',
                                      style: TextStyle(
                                        color: colorScheme.placeholder2,
                                        fontSize: 13.pt,
                                      ),
                                    ),
                                ],
                              ),
                            ],
                          ),
                        ),
                    ],
                  )),
            ),
          ],
        ),
      ),
    );
  }
}

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final child;

  StickyTabBarDelegate({@required this.child});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return this.child;
  }

  @override
  double get maxExtent => 60.pt;

  @override
  double get minExtent => 60.pt;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

class DetailHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final style = WTheme.of(context);
    final colorScheme = style.colorScheme;
    final store = Provider.of<PrivateDetailStore>(context, listen: true);
    final storeIndex =
        Provider.of<PrivateIntelligentIndexStore>(context, listen: true);
    var item = store.routingArgs['item'];
    bool isRefresh;

    return WisCard(
      margin: EdgeInsets.all(15.pt),
      child: Wisdom.column(
        mainAxisSize: MainAxisSize.min,
        padding: EdgeInsets.only(top: 15.pt, left: 15.pt, right: 15.pt),
        color: Colors.white,
        children: [
          Wisdom.row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            margin: EdgeInsets.only(bottom: 10.pt),
            children: [
              Wisdom.row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  if (item['meterType'] == 'electricMeter')
                    Image.asset(
                      'lib/assets/icon_dian.png',
                      width: 22.pt,
                      height: 22.pt,
                      package: 'intelligent_package',
                    ),
                  if (item['meterType'] == 'waterMeter')
                    Image.asset(
                      'lib/assets/icon_shui.png',
                      width: 22.pt,
                      height: 22.pt,
                      package: 'intelligent_package',
                    ),
                  Wisdom(
                    margin: EdgeInsets.only(left: 5.pt),
                    child: Text(
                      '${item['meterName'] ?? '--'}',
                      style: TextStyle(
                        color: colorScheme.mainTitle,
                        fontSize: 15.pt,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ).asExpanded(),
              if (item['meterType'] != null &&
                  item['meterType'] != 'waterMeter') ...[
                Wisdom(
                  onTap: () async => {
                    isRefresh = (await ShowConfirmMeterDialog(
                        context, item, storeIndex, true))!,
                    if (isRefresh)
                      {
                        store.getDetail(isChange: true),
                      }
                    else
                      {
                        store.getDetail(isChange: false),
                      }
                  },
                  padding: EdgeInsets.symmetric(
                    horizontal: 17.5.pt,
                    vertical: 7.pt,
                  ),
                  color: colorScheme.primary,
                  borderRadius: BorderRadius.circular(20.pt),
                  child: Text(
                    '合闸',
                    style: TextStyle(
                      color: Color(0xffffffff),
                      fontSize: 14.pt,
                    ),
                  ),
                ),
              ]
            ],
          ),
          Wisdom.row(
            crossAxisAlignment: CrossAxisAlignment.center,
            padding: EdgeInsets.only(bottom: 15.pt),
            children: [
              if (item['powerOn'] != null &&
                  item['powerOn'] == 1 &&
                  item['meterType'] == 'electricMeter')
                WTag(
                  child: WisText(
                    '已通电',
                    size: 13.pt,
                  ),
                  color: Color(0xFF25B41C),
                  margin: EdgeInsets.only(left: 5.pt),
                ),
              if (item['powerOn'] != null &&
                  item['powerOn'] == 0 &&
                  item['meterType'] == 'electricMeter')
                WTag(
                  child: WisText(
                    '已断电',
                    size: 13.pt,
                  ),
                  color: colorScheme.danger,
                  margin: EdgeInsets.only(left: 5.pt),
                ),
              if (item['multiple'] != null && item['multiple'] == 1)
                WTag(
                  child: WisText(
                    '1倍',
                    size: 13.pt,
                  ),
                  color: colorScheme.cyan,
                  margin: EdgeInsets.only(left: 5.pt),
                ),
              if (item['multiple'] != null && item['multiple'] > 1)
                WTag(
                  child: WisText(
                    '${item['multiple']}倍',
                    size: 13.pt,
                  ),
                  color: Color(0xff2E8CF0),
                  margin: EdgeInsets.only(left: 5.pt),
                ),
            ],
          ),
          Wisdom.row(
            color: Colors.white,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Wisdom.column(
                color: colorScheme.background4,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                padding: EdgeInsets.symmetric(vertical: 8.5.pt),
                margin: EdgeInsets.only(right: 8.pt),
                borderRadius: BorderRadius.circular(8.pt),
                children: [
                  Text('${item['currentAmount'] ?? '--'}',
                      style: TextStyle(
                          fontSize: 19.pt,
                          fontWeight: FontWeight.w600,
                          color: colorScheme.mainTitle)),
                  Text(
                    '表读数',
                    style: TextStyle(
                      color: colorScheme.placeholder2,
                      fontSize: 13.pt,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                ],
              ).asExpanded(),
              Wisdom.column(
                color: colorScheme.background4,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                padding: EdgeInsets.symmetric(vertical: 8.5.pt),
                borderRadius: BorderRadius.circular(8.pt),
                children: [
                  Text('${store.totalDetail?.initialAmount ?? '--'}',
                      style: TextStyle(
                          fontSize: 19.pt,
                          fontWeight: FontWeight.w600,
                          color: colorScheme.mainTitle)),
                  Text(
                    '初始读数',
                    style: TextStyle(
                      color: colorScheme.placeholder2,
                      fontSize: 13.pt,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                ],
              ).asExpanded()
            ],
          ),
          Wisdom.column(
            color: Colors.white,
            padding: EdgeInsets.symmetric(vertical: 15.pt, horizontal: 5.pt),
            children: [
              Wisdom.row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  WisText(
                    '安装位置',
                    color: colorScheme.minor,
                    size: 14.pt,
                    weight: FontWeight.w300,
                  ),
                  WisText(
                    '${item['roomNo'] ?? '--'}',
                    color: colorScheme.grey,
                    size: 14.pt,
                    weight: FontWeight.w300,
                  ),
                ],
              ),
              Wisdom.row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                margin: EdgeInsets.only(top: 10.pt),
                children: [
                  WisText(
                    '充值收费项目',
                    color: colorScheme.minor,
                    size: 14.pt,
                    weight: FontWeight.w300,
                  ),
                  WisText(
                    '${store.totalDetail?.feeName != '' ? store.totalDetail?.feeName ?? '--' : '--'}',
                    color: colorScheme.minor,
                    size: 14.pt,
                    weight: FontWeight.w300,
                  ),
                ],
              ),
              Wisdom.row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                margin: EdgeInsets.only(top: 10.pt),
                children: [
                  Wisdom(
                    child: Text(
                      '表号',
                      style: TextStyle(
                        color: colorScheme.minor,
                        fontSize: 14.pt,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                  ),
                  Wisdom(
                    child: Text(
                      '${item['meterCode'] ?? '--'}',
                      style: TextStyle(
                        color: colorScheme.grey,
                        fontSize: 14.pt,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                  ),
                ],
              ),
              if (store.chargeMode != 'transcribeCharging') ...[
                Wisdom.row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  margin: EdgeInsets.only(top: 10.pt),
                  children: [
                    WisText(
                      '表余量',
                      color: colorScheme.minor,
                      size: 14.pt,
                      weight: FontWeight.w300,
                    ),
                    WisText(
                      '${item['currentMargin'] ?? '--'}',
                      color: colorScheme.minor,
                      size: 14.pt,
                      weight: FontWeight.w300,
                    ),
                  ],
                ),
              ],
              if (store.chargeMode != 'transcribeCharging') ...[
                Wisdom.row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  margin: EdgeInsets.only(top: 10.pt),
                  children: [
                    Text(
                      '初始余量',
                      style: TextStyle(
                        color: colorScheme.minor,
                        fontSize: 14.pt,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    Text('${store.totalDetail?.initialMargin ?? '--'}',
                        style: TextStyle(
                          color: colorScheme.minor,
                          fontSize: 14.pt,
                          fontWeight: FontWeight.w300,
                        )),
                  ],
                ),
              ],
              if (store.chargeMode != 'transcribeCharging') ...[
                Wisdom.row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  margin: EdgeInsets.only(
                      top: 10.pt,
                      bottom: store.chargeMode == 'transcribeCharging'
                          ? 0.pt
                          : 10.pt),
                  children: [
                    Text(
                      '累计用量',
                      style: TextStyle(
                        color: colorScheme.minor,
                        fontSize: 14.pt,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    Text('${store.totalDetail?.electricityTotal ?? '--'}',
                        style: TextStyle(
                          color: colorScheme.minor,
                          fontSize: 14.pt,
                          fontWeight: FontWeight.w300,
                        )),
                  ],
                ),
              ],
              Wisdom.row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                margin: EdgeInsets.symmetric(vertical: 10.pt),
                children: [
                  WisText(
                    '预存款余额',
                    color: colorScheme.minor,
                    size: 14.pt,
                    weight: FontWeight.w300,
                  ),
                  WisText(
                    '${store.totalDetail?.prePayFee ?? '--'}',
                    color: colorScheme.minor,
                    size: 14.pt,
                    weight: FontWeight.w300,
                  ),
                ],
              ),
              Divider(
                color: Color(0xffE6E6E6),
              ),
              if (store.chargeMode == 'transcribeCharging') ...[
                Wisdom.row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  margin: EdgeInsets.only(top: 10.pt),
                  children: [
                    WisText(
                      '欠费金额',
                      color: colorScheme.minor,
                      size: 14.pt,
                      weight: FontWeight.w600,
                    ),
                    WisText(
                      '${item['arrearsFee'] ?? '--'}',
                      color: colorScheme.red,
                      size: 14.pt,
                      weight: FontWeight.w600,
                    ),
                  ],
                ),
              ] else ...[
                Wisdom.row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  margin: EdgeInsets.only(top: 10.pt),
                  children: [
                    Text(
                      '累计充值',
                      style: TextStyle(
                        color: colorScheme.minor,
                        fontSize: 14.pt,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    Text('${store.totalDetail?.topUpTotal ?? '--'}',
                        style: TextStyle(
                          color: colorScheme.red,
                          fontSize: 14.pt,
                          fontWeight: FontWeight.w600,
                        )),
                  ],
                ),
              ]
            ],
          ),
        ],
      ),
    );
  }
}
