YYHome/packages/cpt_auth/lib/modules/select_role/select_role_page.dart

import 'package:cpt_auth/modules/select_role/screen_owner.dart';
import 'package:cpt_auth/modules/select_role/screen_tenant.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_text_view.dart';

import '../../router/page/auth_page_router.dart';
import 'select_role_view_model.dart';

@RoutePage()
class SelectRolePage extends HookConsumerWidget {
  const SelectRolePage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const SelectRolePageRoute());
    } else {
      appRouter.push(const SelectRolePageRoute());
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(selectRoleViewModelProvider.notifier);
    final state = ref.watch(selectRoleViewModelProvider);

    return Scaffold(
      appBar: MyAppBar.appBar(context, ""),
      backgroundColor: context.appColors.backgroundDefault,
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            MyTextView(
              S.current.owner_or_tenant,
              fontSize: 23.5,
              marginTop: 25,
              marginBottom: 25,
              textAlign: TextAlign.center,
              isFontMedium: true,
              textColor: context.appColors.textBlack,
            ),

            //顶部的Tab切换
            Row(
              children: [
                MyTextView(
                  S.current.owner,
                  textColor: state.selectedIndex == 0 ? context.appColors.tabTextSelectedPrimary : context.appColors.tabTextUnSelectedPrimary,
                  fontSize: 16,
                  isFontMedium: true,
                  paddingTop: 16,
                  paddingBottom: 16,
                  cornerRadius: 5,
                  textAlign: TextAlign.center,
                  onClick: () {
                    viewModel.selectRole(0);
                  },
                  backgroundColor: state.selectedIndex == 0 ? context.appColors.tabBgSelectedPrimary : context.appColors.tabBgUnSelectedPrimary,
                ).expanded(),
                MyTextView(
                  S.current.tenant,
                  textColor: state.selectedIndex == 1 ? context.appColors.tabTextSelectedPrimary : context.appColors.tabTextUnSelectedPrimary,
                  fontSize: 16,
                  marginLeft: 15,
                  paddingTop: 16,
                  paddingBottom: 16,
                  textAlign: TextAlign.center,
                  isFontMedium: true,
                  cornerRadius: 5,
                  onClick: () {
                    viewModel.selectRole(1);
                  },
                  backgroundColor: state.selectedIndex == 1 ? context.appColors.tabBgSelectedPrimary : context.appColors.tabBgUnSelectedPrimary,
                ).expanded(),
              ],
            ),

            IndexedStack(
              index: state.selectedIndex,
              children: const [
                ScreenOwner(),
                ScreenTenant(),
              ],
            ).expanded(),

            //底部的按钮
            MyButton(
              onPressed: viewModel.submitRole,
              text: S.current.next,
              textColor: Colors.white,
              backgroundColor: context.appColors.btnBgDefault,
              fontWeight: FontWeight.w500,
              type: ClickType.throttle,
              fontSize: 16,
              minHeight: 50,
              radius: 5,
            ).marginOnly(top: 30, bottom: 30, left: 18, right: 18),
          ],
        ),
      ),
    );
  }
}