/*
 * @Author       : WuWei
 * @LastEditors: wuwei
 * @Date         : 2023-11-01 20:46:29
 * @LastEditTime: 2023-12-14 17:02:15
 * @Description  : 催缴登记
 */
import 'package:app_package/app_package.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:wisdom_cli/wisdom_cli.dart';

import '../../components/form_item.dart';
import '../../stores/urge_pay_store.dart';

class UrgePayPage extends StatelessWidget {
  const UrgePayPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return _PageView();
  }
}

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

  @override
  State<_PageView> createState() => __PageViewState();
}

class __PageViewState extends State<_PageView> {
  void dispose() {
    Get.delete<UrgePayStore>();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final UrgePayStore store = Get.isRegistered<UrgePayStore>()
        ? Get.find<UrgePayStore>()
        : Get.put(UrgePayStore());
    final colorScheme = WTheme.of(context).colorScheme;
    return Scaffold(
      backgroundColor: Color(0xFFF8F8F8),
      appBar: WAppBar(
        title: WisText(
          '催缴登记',
          color: colorScheme.mainTitle,
          weight: FontWeight.w600,
          size: 18.pt,
        ),
        brightness: Brightness.light,
        backgroundColor: Colors.white,
      ),
      body: WisScrollView(
        key: store.scrollViewKey,
        onInit: () => store.onInitData(),
        slivers: [
          SliverToBoxAdapter(
            child: Stack(children: [
              Positioned(
                top: 0,
                left: -1000,
                right: 0,
                child: RepaintBoundary(
                  key: store.wmglkey,
                  child: new Wisdom.column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        WisText(
                          DateTime.now().toLocal().toFormat(),
                          color: Colors.white,
                          size: 50.pt,
                        ),
                        // WisText(
                        //   store.currentAddress ?? '',
                        //   color: Colors.white,
                        //   size: 50.pt,
                        // ),
                      ]),
                ),
              ),
              WisCard(
                margin: EdgeInsets.only(
                  top: 15.pt,
                  bottom: 5.pt,
                  left: 15.pt,
                  right: 15.pt,
                ),
                child: Obx(() {
                  return Wisdom.column(
                    padding: EdgeInsets.fromLTRB(0, 15.pt, 15.pt, 15.pt),
                    children: <Widget>[
                      FormItemComponent(
                        leadingText: '催缴资产',
                        must: true,
                        child: Obx(() {
                          return _ItemRight(
                            placeholder: '选择缴费资产',
                            value: store.assetItem.value.name,
                            onTap: () => store.chooseAssets(),
                          );
                        }),
                      ),
                      // FormItemComponent(
                      //   must: true,
                      //   leadingText: '欠费金额',
                      //   child: _itemInputRight(
                      //     value: store.noticeArrearsFee.value == ''
                      //         ? null
                      //         : store.noticeArrearsFee.value,
                      //     placeholder: '输入欠费金额',
                      //     onTap: (value) => store.inputFee(value.trim()),
                      //     isInt: false,
                      //   ),
                      // ),
                      FormItemComponent(
                        must: true,
                        leadingText: '欠费金额',
                        child: _ItemRight(
                          placeholder: '',
                          value: '${store.payFee.value}',
                          onTap: () => null,
                          isColor: false,
                          icon: Container(),
                        ),
                      ),
                      // FormItemComponent(
                      //   must: true,
                      //   leadingText: '欠费期数',
                      //   child: _itemInputRight(
                      //     value: store.feeNum.value == ''
                      //         ? null
                      //         : store.feeNum.value,
                      //     placeholder: '输入欠费期数',
                      //     isInt: true,
                      //     onTap: (value) => store.inputFeeNum(value.trim()),
                      //   ),
                      // ),
                      FormItemComponent(
                        must: true,
                        leadingText: '欠费期数',
                        child: _ItemRight(
                          placeholder: '',
                          value: '${store.feeNum.value}',
                          onTap: () => null,
                          isColor: false,
                          icon: Container(),
                        ),
                      ),
                      // FormItemComponent(
                      //   leadingText: '欠费情况',
                      //   child: _ItemRight(
                      //     placeholder: '',
                      //     value: '${store.payFee.value}',
                      //     isColor: false,
                      //     icon: Container(),
                      //     onTap: () => store.chooseAssets(),
                      //   ),
                      // ),
                      FormItemComponent(
                        leadingText: '催缴方式',
                        child: _ItemRight(
                          placeholder: '',
                          value: '人工催缴',
                          onTap: () => null,
                          isColor: false,
                          icon: Container(),
                        ),
                      ),
                      FormItemComponent(
                        leadingText: '催缴住户',
                        must: true,
                        child: Obx(() {
                          return _ItemRight(
                            placeholder: '选择缴费住户',
                            value: store.resident.value.payer,
                            onTap: () => store.chooseResident(),
                          );
                        }),
                      ),
                      FormItemComponent(
                        leadingText: '催缴时间',
                        must: true,
                        child: Obx(() {
                          return _ItemRight(
                            placeholder: '选择缴费时间',
                            value: store.timeName,
                            onTap: () => store.chooseTime(),
                          );
                        }),
                      ),
                      FormItemComponent(
                        must: true,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        leadingText: '催缴内容',
                        child: Wisdom.row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          padding: EdgeInsets.fromLTRB(
                            8.pt,
                            2.pt,
                            5.pt,
                            2.pt,
                          ),
                          color: colorScheme.background4,
                          borderRadius: BorderRadius.circular(4.pt),
                          children: [
                            TextField(
                              minLines: 4,
                              maxLines: 4,
                              maxLength: 64,
                              onChanged: (value) => store.inputRemark(value),
                              decoration: InputDecoration(
                                fillColor: colorScheme.background4,
                                hintText: '输入催缴内容，最多64字',
                              ),
                            ).asExpanded(),
                          ],
                        ),
                      ),
                      FormItemComponent(
                        leadingText: '凭证上传',
                        child: Obx(() {
                          return _ItemRight(
                            placeholder: '选择缴费凭证',
                            value: store.imageName.value != ''
                                ? store.imageName.value
                                : null,
                            onTap: () => store.uploadImage(),
                            icon: Wisdom(
                              padding: EdgeInsets.only(right: 5.pt),
                              child: Icon(
                                Icons.file_upload_outlined,
                                color: colorScheme.placeholder2,
                                size: 20.pt,
                              ),
                            ),
                          );
                        }),
                      ),
                      if (store.imageId.value != '') ...[
                        Row(
                          children: [
                            Stack(
                              clipBehavior: Clip.none,
                              children: [
                                Wisdom(
                                  margin: EdgeInsets.only(
                                    left: 90.pt,
                                    bottom: 10.pt,
                                  ),
                                  onTap: () =>
                                      store.onShowImage(store.imageId.value),
                                  child: WImage.network(
                                    AppParseUtil.image(store.imageId.value),
                                    width: 100.pt,
                                    height: 100.pt,
                                    fit: BoxFit.cover,
                                    borderRadius: BorderRadius.circular(8.pt),
                                  ),
                                ),
                                Positioned(
                                  top: -6.pt,
                                  right: -10.pt,
                                  child: Wisdom(
                                    onTap: () => store.deleteImg(),
                                    padding: EdgeInsets.all(2.pt),
                                    color: colorScheme.divider2,
                                    borderRadius: BorderRadius.circular(20.pt),
                                    child:
                                        Icon(Icons.close_rounded, size: 18.pt),
                                  ),
                                ),
                              ],
                            )
                          ],
                        )
                      ],
                      Wisdom(
                        margin: EdgeInsets.only(left: 90.pt),
                        child: WisText(
                          '注：该图片用于记录催缴过程，支持jpg，jpeg， png格式，文件大小不超过2MB。',
                          size: 13.pt,
                          color: colorScheme.grey,
                        ),
                      ),
                    ],
                  );
                }),
              ),
            ]),
          ),
        ],
      ),
      bottomNavigationBar: Wisdom.row(
        padding: EdgeInsets.symmetric(horizontal: 15.pt),
        color: Colors.white,
        children: [
          SafeArea(
            child: WLoadingButton(
              // color: Color(0xff7FCF7D),
              height: 44.pt,
              margin: EdgeInsets.only(top: 8.pt, bottom: 8.pt, left: 10.pt),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.pt),
              ),
              onPressed: () => store.toSubmit(),
              child: WisText(
                "确认登记",
                size: 20.pt,
                color: Colors.white,
              ),
            ),
          ).asExpanded(),
        ],
      ),
    );
  }
}

class _ItemRight extends StatelessWidget {
  final String placeholder;
  final String? value;
  final Function() onTap;
  final Widget? icon;
  final bool? isColor;
  const _ItemRight({
    Key? key,
    this.isColor,
    required this.placeholder,
    this.value,
    required this.onTap,
    this.icon,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final colorScheme = WTheme.of(context).colorScheme;
    return Wisdom.row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      padding: EdgeInsets.fromLTRB(
        15.pt,
        8.pt,
        5.pt,
        8.pt,
      ),
      color: isColor == false ? Colors.transparent : colorScheme.background4,
      borderRadius: BorderRadius.circular(4.pt),
      onTap: () => onTap(),
      children: [
        WisText(
          value != null ? value! : placeholder,
          size: 15.pt,
          color:
              value != null ? colorScheme.mainTitle : colorScheme.placeholder2,
          overflow: TextOverflow.ellipsis,
        ).asExpanded(),
        icon ??
            Icon(
              Icons.arrow_right_rounded,
              size: 25.pt,
              color: colorScheme.placeholder2,
            ),
      ],
    );
  }
}

class _itemInputRight extends StatelessWidget {
  final String placeholder;
  final dynamic value;
  final Function(dynamic value) onTap;
  final Widget? child;
  final bool? isInt;
  const _itemInputRight({
    Key? key,
    required this.placeholder,
    this.isInt,
    required this.onTap,
    this.value,
    this.child,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final colorScheme = WTheme.of(context).colorScheme;
    return Wisdom.row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      padding: EdgeInsets.fromLTRB(
        8.pt,
        2.pt,
        5.pt,
        2.pt,
      ),
      color: colorScheme.background4,
      borderRadius: BorderRadius.circular(4.pt),
      children: [
        if (child != null) ...[
          child!,
        ] else ...[
          TextField(
            onChanged: (value) => onTap(value),
            onSubmitted: (_) => onTap(_),
            minLines: 1,
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              fillColor: colorScheme.background4,
              hintText: placeholder,
            ),
            keyboardType: TextInputType.numberWithOptions(
              decimal: isInt == true ? false : true,
            ),
          ).asExpanded(),
        ]
      ],
    );
  }
}
