/*
 * @Author: XianKaiQun
 * @Date: 2020-09-09 09:25:35
 * @LastEditors: ChenYaJin
 * @LastEditTime: 2023-04-06 12:37:35
 * @Description: 
 */
import 'package:app_package/app_package.dart';
import 'package:face_package/src/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:wisdom_cli/wisdom_cli.dart';
import '../../view_models/private_index_model.dart';

part 'components/face_list.dart';
part 'components/device_list.dart';

class IndexPage extends StatelessWidget {
  const IndexPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (providerContext) => PrivateIndexStore(context),
      child: _PageView(),
      lazy: false,
    );
  }
}

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

class _PageViewState extends State<_PageView> {
  PrivateIndexStore get store => Provider.of(context, listen: false);

  @override
  Widget build(BuildContext context) {
    final colorScheme = WTheme.of(context).colorScheme;
    return Scaffold(
        appBar: WAppBar(
          iconTheme: IconThemeData(
            color: colorScheme.mainTitle,
            size: 14.pt,
          ),
          backgroundColor: Colors.white,
          brightness: Brightness.light,
          title: WisText('${store.routingArgs['appBarTitle'] ?? '通行证管理'}',
              size: 19.pt,
              weight: FontWeight.w600,
              color: colorScheme.mainTitle),
          actions: <Widget>[_TopActionComponent()],
        ),
        body: WisTabPage(
          onChange: (index) => {store.onSetTabIndex(index)},
          divider: false,
          isMarginBottom: false,
          tabs: [
            Text('通行证管理'),
            Text('门禁设备'),
          ],
          views: [
            _FaceListComponent(),
            _DeviceListComponent(),
          ],
        ),
        bottomSheet: _BottomComponent());
  }
}

class _TopActionComponent extends StatelessWidget {
  _TopActionComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    PrivateIndexStore store;
    store = Provider.of<PrivateIndexStore>(context);
    final colorScheme = WTheme.of(context).colorScheme;
    if (store.tabIndex == 0) {
      return WSinglePickerField(
        value: store.status,
        onChanged: (dynamic value) => store.onStatusChange(value),
        getData: () async => SinglePickerEntity.map2entity(store.statusMap),
        title: Text('请选择通行证状态'),
        builder: (value, trigger) {
          return IconButton(
            onPressed: trigger,
            icon: Image(
              image: AssetList.$filter_png_image,
              width: 20.pt,
              color: colorScheme.mainTitle,
            ),
          );
        },
      );
    } else {
      return Container(
        height: 0,
      );
    }
  }
}

class _BottomComponent extends StatelessWidget {
  _BottomComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    PrivateIndexStore store;
    store = Provider.of<PrivateIndexStore>(context);
    if (store.tabIndex == 0) {
      return BottomAppBar(
        child: Wisdom.row(
          height: 60.pt,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          padding: EdgeInsets.only(left: 10.pt),
          children: <Widget>[
            Wisdom(
              onTap: () => store.route2add(),
              minWidth: 100.pt,
              alignment: Alignment.center,
              child: Container(
                height: 44.pt,
                margin: EdgeInsets.only(right: 15.pt),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Color.fromRGBO(77, 128, 255, 1),
                      Color.fromRGBO(15, 103, 248, 1)
                    ],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                  ),
                  borderRadius: BorderRadius.circular(25.pt),
                ),
                child: Center(
                  child: Text(
                    '添加通行证',
                    style: TextStyle(
                      fontSize: 14.pt,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ).asExpanded(),
          ],
        ),
      );
    } else {
      return Container(
        height: 0,
      );
    }
  }
}
