import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:zhiying_comm/zhiying_comm.dart';

///
/// 首页的快速入口widget
///
class HomeQuickEntryWidget extends StatelessWidget {

  var data  = [];

  @override
  Widget build(BuildContext context) {
    int dataSize = 26; // 总数
    int columSize = 5; // 列数
    int rowSize = 2; // 行数

    for(int i = 0; i < dataSize; i ++ ){
      data.add('$i');
    }

    // 页数
    int pageCount = data.length % (rowSize * columSize) == 0
        ? data.length ~/ (rowSize * columSize)
        : (data.length ~/ (rowSize * columSize)) + 1;

    double containerHeight = 145.h * ( data.length >=  rowSize * columSize ? rowSize : (data.length / columSize).ceil()) + (rowSize == 1 ? 0 : 25.h);
//    double headHeight = 50.h ;

    return Container(
      margin: EdgeInsets.only(bottom: 25.h),
      height: containerHeight ,//+ headHeight,
      width: double.infinity,
      child: Column(
        children: <Widget>[
//          Container(
//            margin: EdgeInsets.symmetric(horizontal: 25.w),
//            height: headHeight,
//            color: Colors.green,
//          ),
          Expanded(
            child: Swiper(
              itemHeight: 145.h,
              containerHeight: double.infinity,
              duration: 100,
              scrollDirection: Axis.horizontal,
              loop: false,
              index: 0,
              autoplay: false,
              itemCount: pageCount, // 页数
              itemBuilder: (BuildContext context, int index) {
                return HomeQuickEntrySwiperItem(
                  data: data,
                  showDataSize: columSize * rowSize,
                  page: index,
                  columSize: columSize,
                  rowSize: rowSize,
                );
              },
              pagination: _SwiperCustomPagination(pageCount),
            ),
          )
        ],
      ),
    );
  }

  // 自定义进度条
  SwiperPlugin _SwiperCustomPagination(int pageCount){

    List list = [];
    for(int i = 0; i < pageCount; i ++){
      list.add(i);
    }

    return SwiperCustomPagination(
        builder: (BuildContext context, SwiperPluginConfig config){
          return Align(
            alignment: Alignment(0.0, 1),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: list.map((index) {
                var borderRadius;
                if (index == 0) {
                  borderRadius = BorderRadius.only(
                      topLeft: Radius.circular(2),
                      bottomLeft: Radius.circular(2));
                }
                if (index == list.length - 1) {
                  borderRadius = BorderRadius.only(
                      topRight: Radius.circular(2),
                      bottomRight: Radius.circular(2));
                }

                if (index == config.activeIndex) {
                  borderRadius = BorderRadius.all(Radius.circular(2));
                }

                return Container(
                  height: 4,
                  width: 25,
                  decoration: BoxDecoration(
                      borderRadius: borderRadius,
                      color: index == config.activeIndex
                          ? HexColor.fromHex('#FF4242')
                          : HexColor.fromHex('#FFFFFF')),
                );
              }).toList(),
            ),
          );
        }
    );
  }
}

///
/// 快速入口一页的显示
///
class HomeQuickEntrySwiperItem extends StatelessWidget {
  final List data;
  final int page; // 当前的页数
  final int showDataSize; // 显示的数据
  final int columSize; // 列数
  final int rowSize; // 行数

  const HomeQuickEntrySwiperItem(
      {this.page,
      this.data,
      this.showDataSize,
      this.columSize,
      this.rowSize});

  @override
  Widget build(BuildContext context) {

    // 当前显示的个数
    int itemCount = (data.length - page * showDataSize) >= showDataSize ? showDataSize : (data.length - page * showDataSize);

    return GridView.builder(
        cacheExtent: double.infinity,
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        padding: const EdgeInsets.all(0),
        reverse: false,
        physics: NeverScrollableScrollPhysics(),
        itemCount: itemCount,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: columSize,
          childAspectRatio: 1,
          crossAxisSpacing: 0,
          mainAxisSpacing: 25.h,
        ),
        itemBuilder: (context, i) {
          return HomeQuickEntryItem(
            data: data[  itemCount == showDataSize ?  page * showDataSize + i : page == 0 ? page + i : page * showDataSize + i ]
          );
        });
  }
}

///
/// 快速入口的样式
///
class HomeQuickEntryItem extends StatelessWidget {
  var data;

  HomeQuickEntryItem({this.data});

  /// 子图标的点击
  _itemOnClick(context){
    Navigator.push(context, MaterialPageRoute(
      builder: (context){
        return PageFactory.create('login', null);
      }
    ));
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _itemOnClick(context),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // 图片
          MyNetWorkImage(),
          SizedBox(height: 10.h),
          Text(
            '京东爆款$data',
            style:
            TextStyle(color: HexColor.fromHex('#666666'), fontSize: 20.sp),
          ),
//          SizedBox(height: 25.h,)
        ],
      ),
    );
  }
}

///
/// 图片build 优化
///
class MyNetWorkImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: CachedNetworkImage(
        height: 80.h,
        width: 80.h,
        imageUrl: 'https://upload.jianshu.io/users/upload_avatars/665534/aff6ec240f60?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',
      ),
    );
  }
}
