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 '../buy/buy.dart';

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

  @override
  State<StoreDetailsPages> createState() => _StoreDetailsPagesState();
}

class _StoreDetailsPagesState extends State<StoreDetailsPages>
    with TickerProviderStateMixin {
  // 声明滚动事件
  final ScrollController scrollController = ScrollController();
  // 顶部自定义导航透明度
  double topBarOpacity = 0.0;

  List<Map> 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",
    },
  ];

  @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;
          });
        }
      }
    });
  }

  @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: [
              // 轮播图
              mySwiperWidget(),
              // 标题,价格，月销量
              titleWidget(),
              // 规格 服务 作者
              sizeWidget(),
              // 商品详情
              detailWidget(),
            ],
          ),

          // 顶部导航
          navWidget(),
          // 底部按钮
          bottomWidget(),
          // demo(0.9),
        ],
      ),
    );
  }

  // 自定义商品详情
  Widget detailWidget() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.fromLTRB(0, 16, 0, 0),
      child: Column(
        children: imgList.map((item) {
          return Image.network(
            item['url'],
            fit: BoxFit.cover,
          );
        }).toList(),
      ),
    );
  }

  // 自定义规格、服务、作者
  Widget sizeWidget() {
    return Container(
      margin: const EdgeInsets.fromLTRB(16, 10, 16, 0),
      padding: const EdgeInsets.fromLTRB(16, 16, 16, 6),
      width: MediaQuery.of(context).size.width,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(
          Radius.circular(10),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            offset: Offset(0.0, 15.0), //阴影xy轴偏移量
            blurRadius: 15.0, //阴影模糊程度
            spreadRadius: 1.0, //阴影扩散程度
          ),
        ],
      ),
      child: Column(
        children: [
          Container(
            width: double.infinity,
            padding: const EdgeInsets.fromLTRB(0, 6, 0, 6),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: const [
                    Text(
                      '规格',
                      style: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
                Container(
                  width: 250,
                  alignment: Alignment.centerRight,
                  child: const Text(
                    '1m * 1m',
                    style: TextStyle(
                      color: tTextColor333,
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.fromLTRB(0, 6, 0, 6),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: const [
                    Text(
                      '服务',
                      style: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
                Container(
                  width: 250,
                  alignment: Alignment.centerRight,
                  child: const Text(
                    '书画藏品',
                    style: TextStyle(
                      color: tTextColor333,
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.fromLTRB(0, 6, 0, 6),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: const [
                    Text(
                      '作者',
                      style: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
                Container(
                  width: 250,
                  alignment: Alignment.centerRight,
                  child: const Text(
                    ' - ',
                    style: TextStyle(
                      color: tTextColor333,
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 自定义标题和销量价格
  Widget titleWidget() {
    return Container(
      padding: const EdgeInsets.only(
        top: 24,
        left: 15,
        right: 16,
        bottom: 6,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            width: double.infinity,
            child: Text(
              '书画虎年大吉（1米*1米）',
              style: TextStyle(
                fontSize: 18,
                color: tTextColor333,
                fontWeight: FontWeight.w600,
              ),
              strutStyle: StrutStyle(
                forceStrutHeight: true,
                height: 1,
                leading: 0.3, //行距（0.5即行高的一半）
              ),
              maxLines: 2,
            ),
          ),
          const SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [
                  Text(
                    '1999',
                    style: TextStyle(
                      fontSize: 20,
                      color: tMainRedColor,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(width: 2),
                  Padding(
                    padding: EdgeInsets.only(bottom: 2),
                    child: Text(
                      'DT积分',
                      style: TextStyle(
                        fontSize: 12,
                        color: tMainRedColor,
                      ),
                    ),
                  ),
                ],
              ),
              const Text(
                '月销量10',
                style: TextStyle(
                  fontSize: 13,
                  color: tTextColor999,
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  // 顶部轮播图
  Widget mySwiperWidget() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 390,
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
        color: Colors.white,
      ),
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          //每次循环遍历时，将i赋值给index imgList[index]['title'],
          return SizedBox(
            width: MediaQuery.of(context).size.width,
            height: 390,
            child: ClipRRect(
              child: Image.network(
                imgList[index]['url'],
                fit: BoxFit.cover,
              ),
            ),
          );
        },
        itemCount: imgList.length,
        autoplay: false,
        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: back,
              child: Icon(
                Icons.arrow_back_ios,
                size: 22,
                color: topBarOpacity > 0 ? Colors.white : Colors.white,
              ),
            ),
            Expanded(
              flex: 1,
              child: GestureDetector(
                child: Container(
                  padding: const EdgeInsets.only(left: 10),
                  alignment: Alignment.center,
                  child: Text(
                    '商品详情',
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    style: TextStyle(
                      color: topBarOpacity > 0 ? Colors.white : Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: share,
              child: Icon(
                Icons.share,
                size: 22,
                color: topBarOpacity > 0 ? Colors.white : Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 自定义底部按钮
  Widget bottomWidget() {
    return Positioned(
      bottom: 0,
      child: SafeArea(
        child: Container(
          margin: const EdgeInsets.only(
            left: 16,
            right: 16,
          ),
          width: MediaQuery.of(context).size.width - 32,
          height: 50,
          child: Row(
            children: [
              Container(
                width: (MediaQuery.of(context).size.width - 32) / 2,
                alignment: Alignment.center,
                child: const Text(
                  '加入购物车',
                  style: TextStyle(
                    fontSize: 17,
                    color: tTextColor666,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(8),
                    topLeft: Radius.circular(8),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  Get.to(const BuyPages());
                },
                child: Container(
                  width: (MediaQuery.of(context).size.width - 32) / 2,
                  alignment: Alignment.center,
                  child: const Text(
                    '立即购买',
                    style: TextStyle(
                      fontSize: 17,
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  decoration: const BoxDecoration(
                    // color: tMainRedColor,
                    gradient: LinearGradient(
                      colors: [tMainRedColor, tMainRedColor],
                    ),
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 返回按钮
  back() {
    Get.back();
  }

  // 分享
  share() {
    // ignore: avoid_print
    print('分享');
  }

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