import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:lszlgl/base/base_state.dart';
import 'package:lszlgl/page/sample_task/sample_task_list_tab_page.dart';
import 'package:lszlgl/widget/stock_points_widget.dart';

/// 首页
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends BaseState<HomePage> with AutomaticKeepAliveClientMixin {
  List<String> bannerList = [
    'https://gd-hbimg.huaban.com/c7a22fb15d70a0a976e20fb810c048ec11c76fc31ac08-hajElf_fw658webp',
    'https://gd-hbimg.huaban.com/82e60fd3c61530d52ec1d01f80cfda11526c42e4495cb-6JwN1d_fw658webp',
  ];

  late List<ServiceModel> serviceList;

  void startSampleList(StepType type) async {
    MyRouter.startSampleTaskList(SampleTaskListTabPageArgs(type: type));
  }

  @override
  void initState() {
    super.initState();
    serviceList = [
      ServiceModel(name: '收获环节', icon: imgHomeListPzjc, onTap: () => startSampleList(StepType.reap)),
      ServiceModel(name: '库存环节', icon: imgHomeListZcjy, onTap: () => startSampleList(StepType.stock)),
    ];
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return myScaffold(child: buildBody());
  }

  Widget buildBody() {
    return Column(
      children: [
        myAppBar(
          title: '质量安全检验监测',
          autoLeading: false,
          naviBarColor: Colors.white,
          actions: [buildScan(),
          //  imageTest()
          ],
        ),
        Expanded(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            child: Column(
              children: [
                buildBanner(),
                const SizedBox(height: 18),
                ...List.generate(
                  serviceList.length,
                  (index) => buildServiceItem(serviceList[index]),
                ).toList(),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget buildScan() {
    return GestureDetector(
      onTap: MyRouter.startQrCodeScan,
      behavior: HitTestBehavior.opaque,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        alignment: Alignment.center,
        child: Image.asset(imgHomeScan, height: 24,width: 24),
      ),
    );
  }

  Widget imageTest(){
    return IconButton(
        onPressed: (){
          Navigator.push(context, MaterialPageRoute(builder: (ctx){
            return StockPointsWidget(
                width: 24,
                length: 10,
                height: 9.6,
                kWidth: MediaQuery.of(context).size.width - 8,
                kHeight: MediaQuery.of(context).size.height - 8 ,
            );
          }));
        }, icon: const Icon(Icons.image,color: Colors.white,));
  }

  Widget buildBanner() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 12),
      decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(18))),
      clipBehavior: Clip.hardEdge,
      child: AspectRatio(
        aspectRatio: 2 / 1,
        child: Swiper(
          autoplay: true,
          autoplayDelay: const Duration(seconds: 5).inMilliseconds,
          itemCount: bannerList.length,
          itemBuilder: (_, index) => CachedNetworkImage(
            fit: BoxFit.cover,
            imageUrl: bannerList[index],
            placeholder: (_, __) => const Center(child: CircularProgressIndicator()),
            errorWidget: (context, url, error) => const Center(child: Icon(Icons.error)),
          ),
        ),
      ),
    );
  }

  Widget buildServiceItem(ServiceModel service) {
    double sW = MediaQuery.of(context).size.width-24;
    return GestureDetector(
      onTap: service.onTap,
      child: Container(
        width: sW,
        height: sW * 0.294,
        margin: const EdgeInsets.only(left: 12, right: 12, bottom: 18),
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(12)),
          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.1), offset: const Offset(0, 5), blurRadius: 4)],
          image: DecorationImage(image: AssetImage(service.icon), fit: BoxFit.cover),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class ServiceModel {
  final String name;
  final String? nameEn;
  final Color? bgColor;
  final String icon;
  final VoidCallback onTap;

  ServiceModel({
    required this.name,
    this.nameEn,
    this.bgColor,
    required this.icon,
    required this.onTap,
  });
}