import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

abstract class BasicPage extends StatefulWidget {
  // 导航标题
  // 用法 naviTitle = xxxx
  final _title = Rx<String>("");
  final isTabBar = Rx<bool>(false);
  final tabIndex =Rx<int>(0);

  set naviTitle(String t) {
    _title.value = t;
  }
  set handleTabbar(int index) {
    tabIndex.value=index;
    isTabBar.value = true;
  }

  // 允许滚动 - 不是响应式的
  bool canScroll;

  //
  BasicPage({Key? key, this.canScroll = true}) : super(key: key);

  @protected
  Widget builder(BuildContext context);

  // 将要展示
  @protected
  @mustCallSuper
  void beforeShow() {
    assert(() {
      print("===========beforeShow===========");
      return true;
    }());
  }

  @protected
  @mustCallSuper
  void beforeHide() {
    assert(() {
      print("===========beforeHide===========");
      return true;
    }());
  }

  @protected
  @mustCallSuper
  void beforeUnmounted() {
    assert(() {
      print("===========beforeUnmounted===========");
      return true;
    }());
  }

  @override
  State<BasicPage> createState() => _BasicPageState();
}

class _BasicPageState extends State<BasicPage> {

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

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    widget.beforeShow();
  }

  @override
  void deactivate() {
    super.deactivate();
    widget.beforeHide();
  }

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

  // appBar 的样式请查询 theme 文件
  PreferredSizeWidget? _getAppBar() {
    return AppBar(title: Obx(() => Text(widget._title.value)));
  }

  Widget _buildChild(BuildContext context) {
    if (widget.canScroll) {
      return SingleChildScrollView(
        child: widget.builder(context),
      );
    } else {
      return widget.builder(context);
    }
  }



  final List _titles = ['首页', '订单', '资讯','我的'];
  final tabTextStyleSelected = TextStyle(
      color: const Color(0xFFFF703B),
      fontSize: 15.sp,
      fontWeight: FontWeight.bold); //选线卡选中字体颜色
  final tabTextStyleNormal = TextStyle(
      color: const Color(0xFF323232),
      fontSize: 15.sp,
      fontWeight: FontWeight.bold); //选项卡未选中字体颜色

  TextStyle getTabTextStyle(int curIndex) {
    //设置tabbar 选中和未选中的状态文本
    if (curIndex == widget.tabIndex.value) {
      return tabTextStyleSelected;
    }
    return tabTextStyleNormal;
  }

  // 切换底部选项卡，标题的变化设置
  Text getTabTitle(int curIndex) {
    return Text(_titles[curIndex], style: getTabTextStyle(curIndex));
  }

  List images = [
    ['images/index/HomesOFFImgaes.png', 'images/index/HomesNOImgaes.png'],
    ['images/index/OrdersOFFImgaes.png', 'images/index/OrdersNOImgaes.png'],
    ['images/index/newsONImages.png', 'images/index/newsOFFImages.png'],
    ['images/index/MineOFFImgaes.png', 'images/index/MineNOImgaes.png'],
  ];
  Image getTabIcon(int curIndex) {
    //设置tabbar选中和未选中的状态图标
    if (curIndex == widget.tabIndex.value) {
      return Image.asset(
        images[curIndex][1],
        width: 22.w,
        height: 22.w,
      );
    }
    return Image.asset(
      images[curIndex][0],
      width: 22.w,
      height: 22.w,
    );
  }

  Image getTabImage(path) {
    return Image.asset(path, width: 22.w, height: 22.w);
  }

  Widget tabBar(index) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        if(index!=widget.tabIndex.value){
          if(index==0){
            Get.offNamed('/');
          }else if(index==1){
            Get.offNamed('/order');
          }else if(index==2){
            Get.offNamed('/infomation');
          }else{
            Get.offNamed('/main');
          }
        }
      },
      child: Container(
        width: 93.w,
        height: 65.h,
        child: Column(
          children: [
            getTabIcon(index),
            Padding(
              padding: EdgeInsets.fromLTRB(0, 6.h, 0, 0),
              child: getTabTitle(index),
            )
          ],
        ),
      ),
    );
  }
  Widget? _bottomBar(){
    if(widget.isTabBar.value) {
      return Container(
      padding: EdgeInsets.fromLTRB(0, 7.h, 0, 7.h),
      decoration: BoxDecoration(
        color: const Color(0xFFFFFFFF),
        boxShadow: [
          BoxShadow(
            color: const Color(0x14000000),
            offset: Offset(0, -2.w),
            blurRadius: 3.w,
          ),
        ],
      ),
      child: Row(
        children:_titles.asMap().keys.map((index) =>tabBar(index)).toList(),
      ),
    );
    } else {
      return null;
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _getAppBar(),
      body: SafeArea(
        child: _buildChild(context),
      ),
      bottomNavigationBar: _bottomBar(),
    );
  }
}