import 'dart:convert';

import 'dart:io';
import 'dart:async';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:one_key/models/upload_img_model.dart';
import 'package:one_key/pages/online_check/photo_view_wiget.dart';
import 'package:one_key/pages/online_check/progress.dart';

import 'package:one_key/provider/online_check_edit_provider.dart';
import 'package:one_key/provider/upload_img_provider.dart';
import 'package:one_key/res/colors.dart';
import 'package:one_key/utils/dialog_util.dart';
import 'package:one_key/utils/misc.dart';
import 'package:one_key/utils/upload_image_util.dart';
import 'package:one_key/utils/utils.dart';
import 'package:one_key/widgets/MyDivider.dart';
import 'package:one_key/widgets/v_empty_view.dart';
import 'package:permission_handler/permission_handler.dart';
// import 'package:photo/photo.dart';
import 'package:provider/provider.dart';

import 'package:image_picker/image_picker.dart';
// import 'package:qiniu_flutter_sdk/qiniu_flutter_sdk.dart';
// import 'package:qiniu_flutter_sdk_diox/qiniu_flutter_sdk_diox.dart';

import 'package:qiniu_flutter_sdk/qiniu_flutter_sdk.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
import '../../utils/screen_util.dart';
import './dispose.dart';
import 'package:photo_manager/photo_manager.dart';
import 'package:flutter_native_image/flutter_native_image.dart';

typedef void OnPickImageCallback(
    double maxWidth, double maxHeight, int quality);
typedef void DeleteCallback(int index);

class ImgPickerFWidget extends StatefulWidget {
  final ScrollController? scrollController;
  final Color borderColor;
  final VoidCallback? callback;
  final int maxImageNumber;
  final UploadImageProvider? model;
  final UploadType? uploadType;
  final DeleteCallback? deleteCallback;
  final double size;
  final Color bgColor;
  final int crossAxisCount;
  final double mainAxisSpacing;
  final double crossAxisSpacing;
  final List<UploadImgModel>? feastRemarkXtImageList;
  ImgPickerFWidget(
      {Key? key,
      this.scrollController,
      this.borderColor = Colors.blue,
      this.callback,
      this.maxImageNumber = 5,
      this.model,
      this.uploadType,
      this.deleteCallback,
      this.size = 100,
      this.bgColor = MyColours.color_f3f3f3,
      this.crossAxisCount = 3,
      this.mainAxisSpacing = 40,
      this.crossAxisSpacing = 36,
      this.feastRemarkXtImageList})
      : super(key: key);

  @override
  _ImgPickerFWidgetState createState() => _ImgPickerFWidgetState();
}

class _ImgPickerFWidgetState extends DisposableState<ImgPickerFWidget> {
  final picker = ImagePicker();
  // OnlineCheckEditProvider _onlineCheckEditProvider;
  // UploadImageProvider _uploadImageProvider;

  // 用户输入的文件名
  String? key;
  // 用户输入的 partSize
  int partSize = 4;
  // 用户输入的 token
  String? token;

  /// storage 实例
  final Storage storage = Storage();
  // 控制器，可以用于取消任务、获取上述的状态，进度等信息
  //  PutController putController = PutController();
  // 当前的任务状态

  @override
  void initState() {
    // storage = Storage();
    // putController = PutController();
    super.initState();
  }

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

  ///#相机拍照，单图选择
   Future  _getFromPictureOrCamera(imageSource) async {
    final pickedFile = await picker.pickImage(source: imageSource);
    if (pickedFile != null) {
      // File compressedFile = await FlutterNativeImage.compressImage(
      //     pickedFile.path,
      //     quality: 70,
      //     percentage: 50);

      File? compressedFile =
          await Utils.compressImageToFile(pickedFile.path, quality: 70);
      setState(() {
        if (pickedFile != null) {
          UploadImgModel imgModel = UploadImgModel();
          imgModel.file = compressedFile;
          imgModel.process = 0.01;
          if (widget.uploadType == UploadType.ConsumptionUploadType) {
            widget.model!.imageList.add(imgModel);
          } else if (widget.uploadType == UploadType.StoreFrontUploadType) {
            widget.model!.imageListFront.add(imgModel);
          } else if (widget.uploadType == UploadType.EnvironmentUploadType) {
            widget.model!.imageListDenvironment.add(imgModel);
          } else if (widget.uploadType == UploadType.TableManagerType) {
            widget.model!.tableImageList.add(imgModel);
          } else if (widget.uploadType == UploadType.FeastRemarkType) {
            widget.model!.feastRemarkImageList.add(imgModel);
          } else if (widget.uploadType == UploadType.FeastRemarkXtType) {
            widget.feastRemarkXtImageList!.add(imgModel);
          } else if (widget.uploadType == UploadType.FeastRemarkDjType) {
            widget.model!.feastRemarkDjImageList.add(imgModel);
          } else if (widget.uploadType == UploadType.FeastRemarkContractType) {
            widget.model!.feastRemarkContractImageList.add(imgModel);
          } else if (widget.uploadType == UploadType.FeastRemarkInvoiceType) {
            widget.model!.feastRemarkInvoiceImageList.add(imgModel);
          }
        } else {
          print('No image selected.');
        }
      });
      if (pickedFile != null) {
        List<UploadImgModel>? temp = [];

        if (widget.uploadType == UploadType.ConsumptionUploadType) {
          temp = widget.model!.imageList;
        } else if (widget.uploadType == UploadType.StoreFrontUploadType) {
          temp = widget.model!.imageListFront;
        } else if (widget.uploadType == UploadType.EnvironmentUploadType) {
          temp = widget.model!.imageListDenvironment;
        } else if (widget.uploadType == UploadType.TableManagerType) {
          temp = widget.model!.tableImageList;
        } else if (widget.uploadType == UploadType.FeastRemarkType) {
          temp = widget.model!.feastRemarkImageList;
        } else if (widget.uploadType == UploadType.FeastRemarkXtType) {
          temp = widget.feastRemarkXtImageList;
        } else if (widget.uploadType == UploadType.FeastRemarkDjType) {
          temp = widget.model!.feastRemarkDjImageList;
        } else if (widget.uploadType == UploadType.FeastRemarkContractType) {
          temp = widget.model!.feastRemarkContractImageList;
        } else if (widget.uploadType == UploadType.FeastRemarkInvoiceType) {
          temp = widget.model!.feastRemarkInvoiceImageList;
        }
        bool need = await Utils.sizeNeed(File(pickedFile.path));
        File file = File(pickedFile.path);
        if (need) {
          file = File(compressedFile!.absolute.path);
        }
        UploadImageUtil().startUpload(context, file, temp!.length - 1, true,
            widget.model!, widget.uploadType,
            callback: widget.callback,
            countAll: 1,
            feastRemarkXtImageList: widget.feastRemarkXtImageList);
      }
    }
  }

  ///多图片选择
  void pickAsset(RequestType type, {List<AssetPathEntity>? pathList}) async {
    List<UploadImgModel>? temp = [];
    if (widget.uploadType == UploadType.ConsumptionUploadType) {
      temp = widget.model!.imageList;
    } else if (widget.uploadType == UploadType.StoreFrontUploadType) {
      temp = widget.model!.imageListFront;
    } else if (widget.uploadType == UploadType.EnvironmentUploadType) {
      temp = widget.model!.imageListDenvironment;
    } else if (widget.uploadType == UploadType.TableManagerType) {
      temp = widget.model!.tableImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkType) {
      temp = widget.model!.feastRemarkImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkXtType) {
      temp = widget.feastRemarkXtImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkDjType) {
      temp = widget.model!.feastRemarkDjImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkContractType) {
      temp = widget.model!.feastRemarkContractImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkInvoiceType) {
      temp = widget.model!.feastRemarkInvoiceImageList;
    }
    List<AssetEntity>? imgList = await AssetPicker.pickAssets(context,
        pickerConfig: AssetPickerConfig(
            maxAssets: widget.maxImageNumber - temp!.length,
            // selectedAssets: assets,
            requestType: type,
            themeColor: MyColours.color_199095));

    /// context is required, other params is optional.
    // List<AssetEntity> imgList = await PhotoPicker.pickAsset(
    //   // BuildContext required
    //   context: context,

    //   /// The following are optional parameters.
    //   themeColor: MyColours.color_199095,
    //   // the title color and bottom color
    //   textColor: Colors.white,
    //   // text color
    //   padding: 1.0,
    //   // item padding
    //   dividerColor: Colors.grey,
    //   // divider color
    //   disableColor: Colors.grey.shade300,
    //   // the check box disable color
    //   itemRadio: 0.88,
    //   // the content item radio
    //   maxSelected: widget.maxImageNumber - temp.length,
    //   // max picker image count
    //   // provider: I18nProvider.english,
    //   provider: I18nProvider.chinese,
    //   // i18n provider ,default is chinese. , you can custom I18nProvider or use ENProvider()
    //   rowCount: 3,
    //   // item row count
    //   thumbSize: 150,
    //   // preview thumb size , default is 64
    //   sortDelegate: SortDelegate.common,
    //   // default is common ,or you make custom delegate to sort your gallery
    //   checkBoxBuilderDelegate: DefaultCheckBoxBuilderDelegate(
    //     activeColor: MyColours.color_353535,
    //     unselectedColor: Colors.white,
    //     checkColor: MyColours.color_199095,
    //   ),
    //   // default is DefaultCheckBoxBuilderDelegate ,or you make custom delegate to create checkbox
    //   // loadingDelegate: this,
    //   // if you want to build custom loading widget,extends LoadingDelegate, [see example/lib/main.dart]
    //   badgeDelegate: const DurationBadgeDelegate(),
    //   // badgeDelegate to show badge widget
    //   pickType: type,
    //   photoPathList: pathList,
    // );
    if (imgList == null || imgList.isEmpty) {
      print("No pick item.");
      return;
    } else {
      for (int i = 0; i < imgList.length; i++) {
        var file = (await imgList[i].file)!;
        // File compressedFile = await FlutterNativeImage.compressImage(
        //     file.absolute.path,
        //     quality: 50,
        //     percentage: 50);
        File? compressedFile =
            await Utils.compressImageToFile(file.absolute.path, quality: 70);
        setState(() {
          UploadImgModel imgModel = UploadImgModel();
          imgModel.file = compressedFile;
          imgModel.process = 0.01;

          temp!.add(imgModel);
        });
        bool need = await Utils.sizeNeed(file);
        if (need) {
          file = File(compressedFile!.absolute.path);
        }
        UploadImageUtil().startUpload(context, file, temp.length - 1, false,
            widget.model!, widget.uploadType,
            countAll: imgList.length,
            callback: widget.callback,
            feastRemarkXtImageList: temp);
        // startUpload(File(file.absolute.path),
        //     _uploadImageProvider.imageList.length - 1, false);
      }
    }
  }

  // ///上传到七牛云
  // void startUpload(File selectedFile, int index, bool needInit) async {
  //   final PutController putController = PutController();
  //   print(index);

  //   // 添加状态监听
  //   putController.addStatusListener((StorageStatus status) {
  //     print('状态变化: 当前任务状态：${status.toString()}');
  //   });
  //   // 添加整体进度监听
  //   putController.addProgressListener((percent) {
  //     print('${index}任务进度变化：进度：${percent.toStringAsFixed(4)}');
  //     _uploadImageProvider.imageList[index].process = percent;
  //     _uploadImageProvider.notifyListeners();
  //   });
  //   // 添加实际发送进度订阅
  //   putController.addSendProgressListener((percent) {
  //     // _onlineCheckEditProvider.imageList[index].process = percent;
  //     // setState(() {});
  //     print('${index}实际发送变化：进度：${percent.toStringAsFixed(4)}');
  //   });
  //   if (token == null || token == '') {
  //     await _uploadImageProvider.getQiniuInfo(context, {});
  //   }
  //   var usedToken = _uploadImageProvider.qiniuInfoSunModel.token;
  //   if (usedToken == null || usedToken == '') {
  //     print('token 不能为空');
  //     return;
  //   }
  //   print('开始上传文件');
  //   storage.putFile(
  //     selectedFile,
  //     usedToken,
  //     options: PutOptions(
  //       key: key,
  //       partSize: partSize,
  //       controller: putController,
  //     ),
  //   )
  //     ..then((PutResponse response) {
  //       print('${index}上传已完成: 原始响应数据: ${jsonEncode(response.rawData)}');
  //       print('------------------------');
  //       String imgUrl = _uploadImageProvider.qiniuInfoSunModel.domain +
  //           '/' +
  //           response.rawData['key'];
  //       _uploadImageProvider.imageList[index].process = 1;
  //       _uploadImageProvider.imageList[index].qiniuUrl = imgUrl;
  //       // 取消当前任务
  //       putController.cancel();
  //       // _image
  //       _uploadImageProvider.notifyListeners();
  //     })
  //     .!!.catchError((dynamic error) {
  //       if (error is StorageError) {
  //         switch (error.type) {
  //           case StorageErrorType.CONNECT_TIMEOUT:
  //             print('发生错误: 连接超时');
  //             break;
  //           case StorageErrorType.SEND_TIMEOUT:
  //             print('发生错误: 发送数据超时');
  //             break;
  //           case StorageErrorType.RECEIVE_TIMEOUT:
  //             print('发生错误: 响应数据超时');
  //             break;
  //           case StorageErrorType.RESPONSE:
  //             print('发生错误: ${error.message}');
  //             break;
  //           case StorageErrorType.CANCEL:
  //             print('发生错误: 请求取消');
  //             break;
  //           case StorageErrorType.UNKNOWN:
  //             print('发生错误: 未知错误');
  //             break;
  //           case StorageErrorType.NO_AVAILABLE_HOST:
  //             print('发生错误: 无可用 Host');
  //             break;
  //           case StorageErrorType.IN_PROGRESS:
  //             print('发生错误: 已在队列中');
  //             break;
  //         }
  //       } else {
  //         print('发生错误: ${error.toString()}');
  //       }

  //       print('------------------------');
  //     });
  // }

  ///添加图片UI弹出
   Future  _openModalBottomSheet(context) async {
    final option = await showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        isDismissible: false,
        builder: (BuildContext context) {
          return Container(
            // height: ScreenUtil().setWidth(180 * 2),
            decoration: BoxDecoration(
                color: MyColours.color_ffffff,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(ScreenUtil().setWidth(24)),
                    topRight: Radius.circular(ScreenUtil().setWidth(24)))),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                InkWell(
                  onTap: () {
                    Utils.getPickPermission(context, () {
                      _getFromPictureOrCamera(ImageSource.camera);
                      if (Navigator.canPop(context)) {
                        Navigator.pop(context);
                      }
                    }, Permission.camera);
                  },
                  child: Container(
                      width: double.infinity,
                      height: ScreenUtil().setWidth(58 * 2),
                      child: Center(
                        child: Text(
                          '拍摄',
                          style: TextStyle(
                              fontSize: ScreenUtil().setSp(32),
                              color: MyColours.color_353535,
                              fontWeight: FontWeight.bold),
                        ),
                      )),
                ),
                MyDivider(
                  double.infinity,
                  ScreenUtil().setWidth(2),
                  color: MyColours.color_EEEEEE,
                ),
                InkWell(
                  onTap: () {
                    Utils.getPickPermission(context, () {
                      pickAsset(RequestType.image);
                      // _getFromPictureOrCamera(ImageSource.gallery);
                      if (Navigator.canPop(context)) {
                        Navigator.pop(context);
                      }
                    },
                        Platform.isAndroid
                            ? Permission.storage
                            : Permission.photos);
                  },
                  child: Container(
                      width: double.infinity,
                      height: ScreenUtil().setWidth(58 * 2),
                      child: Center(
                        child: Text(
                          '从相册选择',
                          style: TextStyle(
                              fontSize: ScreenUtil().setSp(32),
                              color: MyColours.color_353535,
                              fontWeight: FontWeight.bold),
                        ),
                      )),
                ),
                MyDivider(
                  double.infinity,
                  ScreenUtil().setWidth(10),
                  color: MyColours.color_EEEEEE,
                ),
                InkWell(
                    onTap: () {
                      if (Navigator.canPop(context)) {
                        Navigator.pop(context, '取消');
                      }
                    },
                    child: Container(
                        width: double.infinity,
                        height: ScreenUtil().setWidth(58 * 2),
                        child: Center(
                          child: Text(
                            '取消',
                            style: TextStyle(
                                fontSize: ScreenUtil().setSp(32),
                                color: MyColours.color_353535,
                                fontWeight: FontWeight.bold),
                          ),
                        )))
              ],
            ),
          );
        });
  }

  //查看大图
  _showPhotoView(BuildContext context, int index, List<String?> imgs,
      {isShow = false, List? dashName}) async {
    // if (imgs.length == 1 &&
    //     imgs[0] ==
    //         'http://nosqn.colorcun.com/custom/lite-online/image/def-banner.png') {
    //   imgs[0] = 'http://nosqn.colorcun.com/app/seller-hj-empty.png';
    // }
    Utils.setBarStatus(false, color: Colors.black);
    dynamic result = await showGeneralDialog(
        context: context,
        barrierDismissible: false,
        // barrierColor: Colors.red,
        barrierLabel:
            MaterialLocalizations.of(context).modalBarrierDismissLabel,
        transitionDuration: const Duration(milliseconds: 150),
        pageBuilder: (BuildContext context, Animation animation,
            Animation secondaryAnimation) {
          Widget child = Stack(
            children: <Widget>[
              PhotoPreview(
                  initialIndex: index,
                  photoList: imgs,
                  isShow: isShow,
                  dashName: dashName)
            ],
          );
          return child;
        });
    Utils.setBarStatus(true, color: Colors.white);
  }

  @override
  Widget build(BuildContext context) {
    // _uploadImageProvider =
    //     Provider.of<UploadImageProvider>(context, listen: true);
    List<UploadImgModel>? temp = [];
    if (widget.uploadType == UploadType.ConsumptionUploadType) {
      temp = widget.model!.imageList;
    } else if (widget.uploadType == UploadType.StoreFrontUploadType) {
      temp = widget.model!.imageListFront;
    } else if (widget.uploadType == UploadType.EnvironmentUploadType) {
      temp = widget.model!.imageListDenvironment;
    } else if (widget.uploadType == UploadType.TableManagerType) {
      temp = widget.model!.tableImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkType) {
      temp = widget.model!.feastRemarkImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkXtType) {
      temp = widget.feastRemarkXtImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkDjType) {
      temp = widget.model!.feastRemarkDjImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkContractType) {
      temp = widget.model!.feastRemarkContractImageList;
    } else if (widget.uploadType == UploadType.FeastRemarkInvoiceType) {
      temp = widget.model!.feastRemarkInvoiceImageList;
    }
    return _getGridImg(
        temp!.length < widget.maxImageNumber ? temp.length + 1 : temp.length,
        context,
        temp.length == widget.maxImageNumber ? true : false,
        temp);
  }

  /// 九宫格
  Widget _getGridImg(count, context, isLinjie, List<UploadImgModel>? temp) {
    return GridView.builder(
        controller: widget.scrollController,
        // padding: EdgeInsets.only(top: ScreenUtil().getAdapterSize(10)),
        shrinkWrap: true,
        itemCount: count,

        //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: widget.crossAxisCount,
            //纵轴间距
            mainAxisSpacing: ScreenUtil().setWidth(widget.mainAxisSpacing),
            //横轴间距
            crossAxisSpacing: ScreenUtil().setWidth(widget.crossAxisSpacing),
            //子组件宽高长度比例
            childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          //Widget Function(BuildContext context, int index)
          var linjie = widget.maxImageNumber;
          if (isLinjie) {
            linjie = widget.maxImageNumber - 1;
          }
          if (index == count - 1 && index < linjie) {
            return InkWell(
              onTap: () {
                // 触摸收起键盘
                FocusScope.of(context).requestFocus(FocusNode());
                _openModalBottomSheet(context);
              },
              child: Container(
                  width: ScreenUtil().setWidth((widget.size - 20) * 2),
                  height: ScreenUtil().setWidth((widget.size - 20) * 2),
                  decoration: BoxDecoration(
                      color: widget.bgColor,
                      borderRadius: BorderRadius.circular(r(5))
                      // border: Border.all(
                      //     color: MyColours.color_E0E0E0,
                      //     width: ScreenUtil().setWidth(2)),
                      ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      //     VEmptyView(46),
                      Image.asset(
                        Utils.getImgPath('f_add_image'),
                        width: ScreenUtil().setWidth(64),
                        height: ScreenUtil().setWidth(64),
                      ),
                      // VEmptyView(10),
                      // Text(
                      //   '上传照片',
                      //   style: TextStyle(
                      //       fontSize: ScreenUtil().setSp(24),
                      //       color: MyColours.color_999999),
                      // )
                    ],
                  )),
            );
          }
          return temp!.length < 1
              ? Text('')
              : InkWell(
                  onTap: () {
                    if (temp[index].process == 1) {
                      widget.model!.imageQiniuUrlList = [];
                      if (temp[index].qiniuUrl != null) {
                        for (int i = 0; i < temp.length; i++) {
                          widget.model!.imageQiniuUrlList.add(temp[i].qiniuUrl);
                        }

                        ///没有上传完成的不可以点击
                        _showPhotoView(
                            context, index, widget.model!.imageQiniuUrlList);
                      }
                    }
                  },
                  child: Stack(
                    children: [
                      Stack(
                        // alignment: Alignment.topRight,
                        children: [
                          temp[index].file != null
                              ? Container(
                                  child: ClipRRect(
                                  borderRadius: BorderRadius.circular(r(5)),
                                  child: Image.file(
                                    temp[index].file!,
                                    fit: BoxFit.cover,
                                    width:
                                        ScreenUtil().setWidth(widget.size * 2),
                                    height:
                                        ScreenUtil().setWidth(widget.size * 2),
                                  ),
                                ))
                              : ClipRRect(
                                  borderRadius: BorderRadius.circular(r(5)),
                                  child: CachedNetworkImage(
                                    imageUrl: temp[index].qiniuUrl!,
                                    fit: BoxFit.cover,
                                    width:
                                        ScreenUtil().setWidth(widget.size * 2),
                                    height:
                                        ScreenUtil().setWidth(widget.size * 2),
                                  ),
                                ),
                          Offstage(
                            offstage: temp[index].process! < 1,
                            child: Align(
                                alignment: Alignment.topRight,
                                child: GestureDetector(
                                  child: Image.asset(
                                    Utils.getImgPath("f_delete"),
                                    width: ScreenUtil().setWidth(40),
                                    height: ScreenUtil().setWidth(40),
                                  ),
                                  onTap: () {
                                    if (widget.uploadType ==
                                        UploadType.TableManagerType) {
                                      if (temp[index].isUpload) {
                                        //已经传到服务器，弹提醒窗口，是否删除
                                        //修改之前有内容，则弹框
                                        DialogUtil.cupertinoAlertDialog(context,
                                            title: "确认删除",
                                            content: "是否确定删除该照片，删除操作不可逆转，请谨慎操作",
                                            lCallback: () {
                                          print("取消");
                                        }, rCallback: () {
                                          print("确定");
                                          widget.deleteCallback!(index);
                                        });
                                      } else {
                                        //直接删除
                                        setState(() {
                                          temp.removeWhere((element) =>
                                              element == temp[index]);
                                        });
                                      }
                                    } else {
                                      //点击删除按钮
                                      setState(() {
                                        temp.removeWhere((element) =>
                                            element == temp[index]);
                                        widget.model!.imageQiniuUrlList
                                            .removeWhere((element) =>
                                                element ==
                                                widget.model!
                                                    .imageQiniuUrlList[index]);
                                      });
                                    }
                                  },
                                )),
                          ),
                        ],
                      ),
                      Offstage(
                        offstage: temp[index].process == 1,
                        child: Progress(
                          temp[index].process,
                          size: widget.size,
                        ),
                      )
                    ],
                  ));
        });
  }
}