import 'package:ddcsh/common/data/app_data.dart';
import 'package:ddcsh/widget/icon_text_button.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';

import 'IndexLogic.dart';

class IndexPage extends StatefulWidget {
  const IndexPage({Key? key}) : super(key: key);

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

class _IndexPageState extends State<IndexPage> with AutomaticKeepAliveClientMixin {
  final logic = Get.put<IndexLogic>(IndexLogic());

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    Widget _headGroup = Container(
      padding: EdgeInsets.all(12.w),
      width: double.infinity,
      color: AppColor.theme,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 44.h),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("上海市", style: TextStyle(fontSize: 14.sp, color: Colors.white)),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(left: 15.w),
                  height: 32.h,
                  padding: EdgeInsets.only(left: 8.w, right: 8.w),
                  decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(16.h))),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      SizedBox(width: 10.w),
                      Expanded(child: Text("全新輪滑油", style: TextStyle(fontSize: 12.sp, color: AppColor.font99))),
                      const Icon(Icons.search, color: AppColor.font99),
                    ],
                  ),
                ),
              ),
            ],
          ),
          SizedBox(height: 11.h),
          Container(
            height: 50.h,
            padding: EdgeInsets.only(left: 11.w, right: 11.w),
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(2.h))),
            child: Row(
              children: [
                Icon(Icons.add, size: 30.h),
                SizedBox(width: 8.w),
                Text("添加愛車", style: TextStyle(fontSize: 18.sp, color: AppColor.black3F, fontWeight: FontWeight.bold)),
                SizedBox(width: 8.w),
                Expanded(child: Text("享受更優(yōu)質(zhì)服務", style: TextStyle(fontSize: 14.sp, color: AppColor.font99))),
                Image.asset("img/car_who_vin.png", height: 28.h),
              ],
            ),
          )
        ],
      ),
    );

    //功能欄目
    Widget _bigFunctionalGridView = Padding(
      padding: EdgeInsets.only(left: 25.w, right: 30.w),
      child: GridView.count(
        padding: const EdgeInsets.symmetric(vertical: 20),
        shrinkWrap: true,
        childAspectRatio: 1 / 1,
        mainAxisSpacing: 10.w,
        physics: const NeverScrollableScrollPhysics(),
        crossAxisSpacing: 18.w,
        crossAxisCount: 4,
        children: [
          _buildGridIconTextItemView("img/car_who_vin.png", "無法啟動"),
          _buildGridIconTextItemView("img/car_who_vin.png", "輪胎壞了"),
          _buildGridIconTextItemView("img/car_who_vin.png", "沒油了"),
          _buildGridIconTextItemView("img/car_who_vin.png", "沒電了"),
          _buildGridIconTextItemView("img/car_who_vin.png", "故障燈亮"),
          _buildGridIconTextItemView("img/car_who_vin.png", "車禍/事故"),
        ],
      ),
    );

    //百變酷炫欄目組
    Widget _recommendRowScrollView = Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 15.h, horizontal: 15.w),
      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(4.h))),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          _buildNavigationBarView("百變炫酷"),
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                _buildRowScrollItemView(),
                _buildRowScrollItemView(),
                _buildRowScrollItemView(),
                _buildRowScrollItemView(),
              ],
            ),
          )
        ],
      ),
    );

    //小的功能欄目
    Widget _minFunctionalGridView = Padding(
      padding: EdgeInsets.only(left: 25.w, right: 30.w),
      child: GridView.count(
        padding: const EdgeInsets.symmetric(vertical: 20),
        shrinkWrap: true,
        childAspectRatio: 1 / 1,
        mainAxisSpacing: 10.w,
        physics: const NeverScrollableScrollPhysics(),
        crossAxisSpacing: 18.w,
        crossAxisCount: 4,
        children: [
          _buildGridIconTextItemView("img/car_who_vin.png", "放心修"),
          _buildGridIconTextItemView("img/car_who_vin.png", "新車"),
          _buildGridIconTextItemView("img/car_who_vin.png", "二手車"),
          _buildGridIconTextItemView("img/car_who_vin.png", "更多"),
        ],
      ),
    );

    //視頻列表
    Widget _gridInfoList = GridView.custom(
      gridDelegate: SliverWovenGridDelegate.count(
        crossAxisCount: 2,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        pattern: [
          const WovenGridTile(1),
          const WovenGridTile(
            5 / 7,
            crossAxisRatio: 0.9,
            alignment: AlignmentDirectional.centerEnd,
          ),
        ],
      ),
      childrenDelegate: SliverChildBuilderDelegate(
        (context, index) => Text("位置 $index", style: TextStyle(fontSize: 12.sp, color: AppColor.font99)),
      ),
    );

    return Scaffold(
      backgroundColor: Colors.white, 
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              expandedHeight: 680.h,
              floating: true,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                background: Column(
                  children: [
                    _headGroup,
                    _bigFunctionalGridView,
                    _recommendRowScrollView,
                    _minFunctionalGridView,
                    _buildNavigationBarView("熱門推薦"),
                  ],
                ),
              ),
            )
          ];
        },
        body: _gridInfoList,
      ),
    );
  }

  //構(gòu)建一個上下類型的視圖
  Widget _buildGridIconTextItemView(String iconAsset, String title) {
    return IconTextButton(
      icon: Image.asset(iconAsset, height: 45.h),
      itDirection: IT_Direction.TOP_BOTTOM,
      text: Text(title, style: TextStyle(fontSize: 12.sp, color: Colors.black)),
    );
  }

  //構(gòu)建一個導航Bar
  Widget _buildNavigationBarView(String title) {
    return SizedBox(
      height: 50.h,
      child: Row(
        children: [
          Expanded(child: Text(title, style: TextStyle(fontSize: 16.sp, color: AppColor.black3F, fontWeight: FontWeight.bold))),
          Icon(Icons.chevron_right, color: AppColor.font99, size: 30.h),
        ],
      ),
    );
  }

  Widget _buildRowScrollItemView() {
    return Padding(
      padding: EdgeInsets.only(right: 15.w),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(5.w)),
        child: SizedBox(
          height: 90.h,
          width: 142.w,
          child: Stack(
            children: [
              SizedBox.expand(
                child: Container(
                  color: Colors.black,
                  child: Image.asset("img/car_who_vin.png"),
                ),
              ),
              Positioned(
                left: 5.h,
                top: 5.h,
                child: Text("炫彩改裝設計圖鑒", style: TextStyle(fontSize: 12.sp, color: Colors.white)),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<IndexLogic>();
    super.dispose();
  }
}