/*
 * @Author: Aimee
 * @Date: 2022-05-26 13:16:03
 * @LastEditors: Aimee
 * @LastEditTime: 2022-05-31 14:49:55
 * @FilePath: /gl_dao/lib/pages/store/index/index_page.dart
 * @Description: 商城首页        
 */

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:gl_dao/main_color.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import '../details/details_page.dart';

import './components/offline_bussiness.dart';
import './components/offline_title.dart';

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

  @override
  State<StorePages> createState() => _StorePagesState();
}

class _StorePagesState extends State<StorePages> with TickerProviderStateMixin {
  // 声明滚动事件
  final ScrollController scrollController = ScrollController();
  // 顶部自定义导航透明度
  double topBarOpacity = 0.0;
  // 自定义置顶分类透明度
  double topCategrayOpacity = 0.0;
  int _current = 0;
  List categoryList = [
    {
      "name": "推荐",
      "id": 1,
    },
    {
      "name": "檀香",
      "id": 2,
    },
    {
      "name": "蜜蜡饰品",
      "id": 3,
    },
    {
      "name": "字画",
      "id": 4,
    },
    {
      "name": "琉璃摆件",
      "id": 5,
    },
  ];

  @override
  void initState() {
    super.initState();
    // 页面滚动触发改变顶部自定义导航样式透明度
    scrollController.addListener(() {
      if (scrollController.offset >= 128) {
        if (topBarOpacity != 1.0) {
          setState(() {
            topBarOpacity = 1.0;
          });
        }
      } else if (scrollController.offset <= 128 &&
          scrollController.offset >= 0) {
        if (topBarOpacity != scrollController.offset / 128) {
          setState(() {
            topBarOpacity = scrollController.offset / 128;
          });
        }
      } else if (scrollController.offset <= 0) {
        if (topBarOpacity != 0.0) {
          setState(() {
            topBarOpacity = 0.0;
          });
        }
      }
      // 监听滚动是否展示顶部分类
      if (scrollController.offset > 560) {
        setState(() {
          topCategrayOpacity = 1.0;
        });
      } else {
        setState(() {
          topCategrayOpacity = 0.0;
        });
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: tMainBg,
      body: Stack(
        children: [
          ListView(
            controller: scrollController,
            padding: const EdgeInsets.all(0),
            children: [
              // *******banner*******
              Image.asset('assets/images/banner.png'),

              // *******电子商城*******
              Padding(
                padding: const EdgeInsets.only(top: 20, left: 16, right: 16),
                child: Column(
                  children: [
                    const OfflineTitleWidget("电子商城", '精选商家推荐'),
                    Container(
                      width: MediaQuery.of(context).size.width,
                      height: 116,
                      margin: const EdgeInsets.only(top: 16),
                      padding: const EdgeInsets.only(left: 14),
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(
                          Radius.circular(10.0),
                        ),
                        color: Colors.white,
                      ),
                      child: mySwiperWidget(),
                    )
                  ],
                ),
              ),

              // *******线下商城*******
              Padding(
                padding: const EdgeInsets.only(top: 20, left: 16, right: 16),
                child: Column(
                  children: [
                    const OfflineTitleWidget("线下商城", '您身边的线下体验店'),
                    Row(
                      children: const [
                        //首页线下商家列表item组件
                        OfflineBussinessWidget(),
                        SizedBox(width: 12),
                        //首页线下商家列表item组件
                        OfflineBussinessWidget(),
                      ],
                    ),
                    Row(
                      children: const [
                        //首页线下商家列表item组件
                        OfflineBussinessWidget(),
                        SizedBox(width: 12),
                        //首页线下商家列表item组件
                        OfflineBussinessWidget(),
                      ],
                    )
                  ],
                ),
              ),

              // *******分类组件*******
              Padding(
                padding: const EdgeInsets.only(bottom: 6.0),
                child: categoryWidget(),
              ),

              // *******商品列表*******
              Container(
                width: MediaQuery.of(context).size.width,
                padding: const EdgeInsets.only(
                  left: 10,
                  right: 10,
                ),
                child: Wrap(
                  spacing: 10,
                  runSpacing: 6,
                  children: _goodWidget(),
                ),
              ),
            ],
          ),

          // *******是否显示顶部分类组件*******
          topCategrayOpacity > 0
              ? Positioned(
                  top: 90,
                  width: MediaQuery.of(context).size.width,
                  child: Container(
                    padding: const EdgeInsets.only(bottom: 6),
                    color: Colors.white,
                    child: categoryWidget(),
                  ),
                )
              : const Text(''),

          // *******顶部导航*******
          navWidget(),

          // *******原来设计*******
          // demo(0.8),
        ],
      ),
    );
  }

  // 把自定义商品列表组件
  List<Widget> _goodWidget() {
    return categoryList.map((val) {
      return GestureDetector(
        onTap: () {
          // ignore: avoid_print
          print(val["id"]);
          Get.to(const StoreDetailsPages());
        },
        child: Card(
          // margin: const EdgeInsets.all(10.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
          shadowColor: Colors.black12,
          child: SizedBox(
            width: MediaQuery.of(context).size.width / 2 - 25,
            child: Column(
              children: [
                AspectRatio(
                  aspectRatio: 9.0 / 9.2,
                  child: ClipRRect(
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                    child: Image.network(
                      'https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                const SizedBox(height: 4),
                Container(
                  padding: const EdgeInsets.only(
                    left: 10,
                    right: 6,
                    top: 6,
                    bottom: 6,
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        height: 38,
                        width: double.infinity,
                        child: Text(
                          val["id"] == 1 || val["id"] == 2 || val["id"] == 4
                              ? '雄风 -  人呀年瞎猜书迷功能与成语人呀年瞎猜书迷功能与成语人呀年瞎猜书迷功能与成语人呀年瞎猜书迷功能与成语'
                              : '富贵花开',
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                            fontSize: 14,
                            color: tTextColor333,
                            fontWeight: FontWeight.w600,
                          ),
                          strutStyle: const StrutStyle(
                            forceStrutHeight: true,
                            height: 1,
                            leading: 0.3, //行距（0.5即行高的一半）
                          ),
                          maxLines: 2,
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: const [
                              Text(
                                '1999',
                                style: TextStyle(
                                  fontSize: 18,
                                  color: tMainRedColor,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                              SizedBox(width: 2),
                              Text(
                                'DT积分',
                                style: TextStyle(
                                  fontSize: 12,
                                  color: tMainRedColor,
                                ),
                              ),
                            ],
                          ),
                          const Text(
                            '月销量10',
                            style: TextStyle(
                              fontSize: 12,
                              color: tTextColor666,
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }).toList();
  }

  // 分类组件
  Widget categoryWidget() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      // padding: const EdgeInsets.all(16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: categoryList.asMap().keys.map((index) {
          return GestureDetector(
            onTap: () {
              setState(() {
                _current = index;
              });
            },
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.only(
                      top: 20, left: 17, right: 17, bottom: 4),
                  child: Text(
                    categoryList[index]["name"],
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                        color:
                            _current == index ? tMainRedColor : tTextColor333),
                  ),
                ),
                _current == index
                    ? Image.asset(
                        'assets/images/select_1.png',
                        width: 14,
                        height: 6,
                      )
                    : const SizedBox(
                        width: 14,
                        height: 6,
                      ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }

  // 电子商城 轮播图
  Widget mySwiperWidget() {
    List<List> imgList = [
      [
        {
          "title": '1名创优品',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b",
        },
        {
          "title": '1耐克',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b"
        },
        {
          "title": '1百草味',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b"
        },
        {
          "title": '1MLB',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b"
        },
      ],
      [
        {
          "title": '名创优品',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b",
        },
        {
          "title": '耐克',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b"
        },
        {
          "title": '百草味',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b"
        },
        {
          "title": 'MLB',
          "url":
              "https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b"
        },
      ]
    ];
    return Padding(
      padding: const EdgeInsets.only(top: 14, right: 10),
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          //每次循环遍历时，将i赋值给index imgList[index]['title'],
          return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: imgList[index].map((it) {
              return SizedBox(
                width: (MediaQuery.of(context).size.width - 60) / 4,
                child: Column(
                  children: [
                    Container(
                      width: 44,
                      height: 44,
                      decoration: BoxDecoration(
                        borderRadius: const BorderRadius.all(
                          Radius.circular(10),
                        ),
                        border: Border.all(
                          color: tTextColor999.withOpacity(.2),
                          width: 1,
                        ),
                      ),
                      child: ClipRRect(
                        borderRadius: const BorderRadius.all(
                          Radius.circular(10),
                        ),
                        child: Image.network(
                          it['url'],
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      it['title'],
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 13,
                      ),
                    )
                  ],
                ),
              );
            }).toList(),
          );
        },
        itemCount: imgList.length,
        //指示器
        pagination: SwiperPagination(
          builder: DotSwiperPaginationBuilder(
            size: 6,
            color: tTextColor999.withOpacity(.4),
            activeSize: 6,
            activeColor: tMainRedColor,
          ),
        ),
      ),
    );
  }

  // 自定义顶部导航
  Widget navWidget() {
    return Positioned(
      top: 0,
      left: 0,
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: 90,
        color: tMainRedColor.withOpacity(topBarOpacity),
        padding: const EdgeInsets.only(
          top: 40,
          left: 15,
          right: 15,
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
              onTap: selectCity,
              child: Row(
                children: [
                  Image.asset(
                    'assets/images/location.png',
                    width: 16.0,
                  ),
                  const SizedBox(width: 6),
                  const Text(
                    '全国',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 15,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(width: 14),
            Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: search,
                child: Container(
                  padding: const EdgeInsets.only(left: 10),
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.all(
                      Radius.circular(36.0),
                    ),
                    color: Colors.white,
                  ),
                  height: 32,
                  child: Row(
                    children: [
                      Image.asset(
                        'assets/images/search.png',
                        width: 14.0,
                      ),
                      const SizedBox(width: 10),
                      const Text(
                        '请搜索商家或商品',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 13,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            const SizedBox(width: 10),
            GestureDetector(
              onTap: add,
              child: const Icon(
                Icons.add,
                size: 22,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 自定义顶部导航-选择城市
  selectCity() {
    // ignore: avoid_print
    print('selectCity');
  }

  // 自定义顶部导航-搜索按钮
  search() {
    // ignore: avoid_print
    print('search');
  }

  // 自定义顶部导航-添加按钮
  add() {
    // ignore: avoid_print
    print('add');
  }

  Widget demo(double opci) {
    return ListView(
      children: [
        SizedBox(
          width: 750,
          child: Opacity(
            opacity: opci,
            child: Image.asset(
              'assets/images/top.png',
              width: 750,
              fit: BoxFit.cover,
              alignment: Alignment.bottomCenter,
            ),
          ),
        )
      ],
    );
  }
}