import 'package:fis_i18n/i18n.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/views/wechat_mini_program/wx_public_widgets/custom_image_file_loader.dart';
import 'package:flyinsono/views/wechat_mini_program/wx_public_widgets/wx_scaffold.dart';
import 'package:get/get.dart';

import 'index.dart';

class WxImagesListPage extends FisView<WxImagesListController> {
  const WxImagesListPage({Key? key}) : super(key: key);

  // 卡片列表视图
  Widget _buildListView() {
    return RefreshIndicator(
      onRefresh: controller.refreshList,
      child: Obx(
        () {
          final isLast =
              controller.state.imageList.length == controller.totalCount;
          return controller.state.imageList.isEmpty
              ? Center(
                  child: controller.state.noData
                      ? Text("没有图像数据")
                      : CircularProgressIndicator())
              : CustomScrollView(
                  controller: controller.gridViewScrollController,
                  slivers: [
                    SliverPadding(
                      padding: EdgeInsets.only(top: 10, left: 10, right: 10),
                      sliver: SliverGrid.builder(
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 10,
                          childAspectRatio: 1.314,
                        ),
                        itemCount: controller.state.imageList.length,
                        itemBuilder: (context, index) {
                          return _buildImageItem(
                            index: index,
                            url: controller
                                .state.imageList[index].previewImageUrl,
                            onTap: () => controller.handleShowDetail(index),
                          );
                        },
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: FContainer(
                        height: 50,
                        margin: EdgeInsets.only(bottom: 10),
                        child: FCenter(
                          child: FText(
                            isLast ? "没有更多数据" : i18nBook.common.loading.t,
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.grey,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                );
        },
      ),
    );
  }

  @override
  FWidget build(BuildContext context) {
    return FisBuilder<WxImagesListController>(
      builder: (_) {
        return WxScaffold(
          body: _buildListView(),
          title: "图像列表",
        );
      },
    );
  }

  Widget _buildImageItem(
      {required int index, required String url, required VoidCallback onTap}) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(3),
        color: Color.fromARGB(255, 0, 0, 0),
      ),
      child: GestureDetector(
        onTap: onTap,
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: double.infinity,
              child: CustomImageLoader(
                fileToken: url,
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                constraints: BoxConstraints(
                  minWidth: 30,
                ),
                margin: EdgeInsets.only(left: 5, top: 5),
                padding: EdgeInsets.all(2),
                decoration: BoxDecoration(
                  color: Color.fromARGB(255, 77, 77, 77),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text(
                  "$index",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Color.fromARGB(255, 241, 241, 241),
                      fontSize: 12,
                      fontWeight: FontWeight.bold),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
