// ignore_for_file: dead_code
// import 'dart:js';


import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:wallpaper/pages/homepage/homepage_controller.dart';
import 'package:wallpaper/pages/imgcategorypage/imgcategorypage_view.dart';

class HomePageView extends GetView <HomePageController> {
  const HomePageView({super.key});

  @override 
  Widget build(BuildContext context) {
    // Get.put(HomePageController);
    const title = "壁纸";
    final Widget bodyView = getBodyWidget();
    
    // Obx(() => {
    //   print(controller.typeList);
    //  return Text("data");}
    //  );
    return Scaffold(
              appBar: AppBar(
                centerTitle: true,
                title: const Text(title),
              ),
              
              body:bodyView,
    );
  
  }

  //返回内容
  Widget getBodyWidget(){
    return Obx(() => GridView.count(
              crossAxisCount: 2,
              mainAxisSpacing: 2,
              crossAxisSpacing: 2,
              childAspectRatio: 0.7,
              padding: const EdgeInsets.symmetric(horizontal: 5),
              // padding: const EdgeInsets.fromLTRB(5, 50, 5, 0),
              children: List.generate(controller.typeList.length, (index) {
                return getBodyItem(controller.typeList[index].data![0].previewThumb!,controller.typeList[index].name!,index);
            }),
          ));
  }

  Stack getBodyItem(String imgUrl,String title,int index){
    return Stack(//堆叠效果
                  children: [
                    FadeInImage.memoryNetwork(
                    width: double.infinity,
                    height: double.infinity,
                    placeholder: kTransparentImage,
                    image: imgUrl,
                    fit: BoxFit.cover,
                  ),
                  
                  
                  Material(
                    color: Colors.transparent,
                    child: InkWell(
                            onTap: () {
                              // Get.to(ImgCategoryPageView(stitle: title,dataModel: controller.typeList[index]));
                              controller.goCategoryView(title, controller.typeList[index]);
                            },
                            child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Container(
                                      color: Colors.black.withAlpha(160),
                                      height: 30,
                                      width: double.infinity,
                                      child: Align(
                                        alignment: Alignment.center,
                                        child: Text(
                                                title,
                                                style: const TextStyle(
                                                  color: Colors.white
                                                ),

                                              ),
                                      ),
                                ),
                              ),
                    ),
                  ),
                ],
            );

  }

  //初始化顶部数据
    SizedBox getHeaderWidget(BuildContext context){
      final size = MediaQuery.of(context).size;
      const cw = 80.0;

      return SizedBox(
                width: size.width,
                height: 40,
                child: ListView(
                          scrollDirection: Axis.horizontal,
                          children: <Widget>[
                                Container(
                                  width: cw,
                                  color: Colors.red,
                                ),
                                Container(
                                  width: cw,
                                  color: Colors.blue,
                                ),
                                Container(
                                  width: cw,
                                  color: Colors.green,
                                ),
                                Container(
                                  width: cw,
                                  color: Colors.yellow,
                                ),
                                getCustomContrainer("cuainer"),
                              ],
                        ),
              );
    
    }


    //customcontainer
    Container getCustomContrainer(String title) {
      return Container(
            alignment: Alignment.center,
            // decoration: BoxDecoration( //用于设置边框
            //     border: Border.all(color: Colors.black12, width: 0.5),
            //     borderRadius: BorderRadius.all(Radius.circular(5.0))),
            color:Colors.red,
            padding: const EdgeInsets.all(5.0),
            // margin: EdgeInsets.fromLTRB(3.0, 0.0, 3.0, 0.0),
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 100.0,),
              child: Text(
                title,
                softWrap: true,
              ),
            ));
    }

}