food_hub_app/lib/views/recordForm.dart

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

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:image_picker/image_picker.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class RecordFormPage extends StatefulWidget {
  const RecordFormPage({super.key});

  @override
  State<RecordFormPage> createState() => _RecordFormPage();
}

class _RecordFormPage extends State<RecordFormPage> {
  final _formKey = GlobalKey<FormBuilderState>();

  List<TextEditingController> _controller = [];
  FormController _formController = FormController();

  String _selected_1 = '';
  String _selected_2 = '';
  String? _initLocalData;

  final ImagePicker _picker = ImagePicker();
  XFile? _selectedImage;

  /// 整个表单存放的数据
  Map<String, dynamic> _formData = {
    "name": '',
    "date": '',
    "gender": '',
    "birth": '',
    "place": '',
    "age": "2",
    "description": "2",
    "resume": '',
    "photo": '',
  };

  Map<String, dynamic> _formItemNotifier = {
    "name": '',
    "password": '',
    "gender": '',
    "birth": '',
    "place": '',
    "age": '2',
    "description": '',
    "resume": '',
    "photo": "",
  };

  /// 定义整个校验规则
  final Map<String, TDFormValidation> _validationRules = {
    'name': TDFormValidation(
      validate: (value) => value == null || value.isEmpty ? 'empty' : null,
      errorMessage: '输入不能为空',
      type: TDFormItemType.input,
    ),
    "birth": TDFormValidation(
      validate: (value) => value == null || value.isEmpty ? 'empty' : null,
      errorMessage: '不能为空',
      type: TDFormItemType.dateTimePicker,
    ),
    "photo": TDFormValidation(
      validate: (value) => value == null || value.isEmpty ? 'empty' : null,
      errorMessage: '不能为空',
      type: TDFormItemType.upLoadImg,
    ),
  };

  void confirmClick(BuildContext context) {
    if (_formKey.currentState?.saveAndValidate() ?? false) {
      // showSuccessToast("新增记录成功");
    } else {
      // showErrorToast("请先提交信息");
    }
  }

  List<TDUploadFile> files = [];

  List<TDUploadFile> _onValueChanged(
    List<TDUploadFile> fileList,
    List<TDUploadFile> value,
    TDUploadType event,
  ) {
    switch (event) {
      case TDUploadType.add:
        fileList.addAll(value);
        break;
      case TDUploadType.remove:
        fileList.removeWhere((element) => element.key == value[0].key);
        break;
      case TDUploadType.replace:
        final firstReplaceFile = value.first;
        final index = fileList.indexWhere(
          (file) => file.key == firstReplaceFile.key,
        );
        if (index != -1) {
          fileList[index] = firstReplaceFile;
        }
        break;
    }
    return fileList;
  }

  @override
  void initState() {
    /// 三个文本型的表格单元
    for (var i = 0; i < 4; i++) {
      _controller.add(TextEditingController());
    }
    _formData.forEach((key, value) {
      _formItemNotifier[key] = FormItemNotifier();
    });
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  String parseDatePickerSelected(Map<String, int> selected) {
    final String year = selected['year'].toString().padLeft(4, '0');
    final String month = selected['month'].toString().padLeft(2, '0');
    final String day = selected['day'].toString().padLeft(2, '0');

    return '$year-$month-$day';
  }

  TDFormItem buildNameItem() {
    return TDFormItem(
      label: '菜谱名称',
      name: 'name',
      type: TDFormItemType.input,
      labelWidth: 82.0,
      showErrorMessage: true,
      requiredMark: true,
      child: TDInput(
        leftContentSpace: 0,
        inputDecoration: InputDecoration(
          hintText: "请输入菜谱名称",
          border: InputBorder.none,
          hintStyle: TextStyle(color: TDTheme.of(context).grayColor6),
        ),
        backgroundColor: Colors.white,
        additionInfoColor: TDTheme.of(context).errorColor6,
        showBottomDivider: false,
        onChanged: (val) {
          _formData['name'] = val;
        },
      ),
    );
  }

  TDFormItem buildDateItem() {
    return TDFormItem(
      label: '完成时间',
      name: 'date',
      labelWidth: 82.0,
      type: TDFormItemType.dateTimePicker,
      contentAlign: TextAlign.left,
      tipAlign: TextAlign.left,
      hintText: '请选择完成时间',
      select: _formData['date'],
      selectFn: (BuildContext context) {
        TDPicker.showDatePicker(
          context,
          title: '选择时间',
          onConfirm: (selected) {
            setState(() {
              print(selected);
              _selected_1 =
                  '${selected['year'].toString().padLeft(4, '0')}-${selected['month'].toString().padLeft(2, '0')}-${selected['day'].toString().padLeft(2, '0')}';
              _formItemNotifier['birth']?.upDataForm(_selected_1);
            });
            Navigator.of(context).pop();
          },
          dateStart: [1999, 01, 01],
          dateEnd: [2050, 12, 31],
          initialDate: [2012, 1, 1],
        );
      },
    );
  }

  TDFormItem buildImageItem() {
    return TDFormItem(
      label: '上传图片',
      name: 'photo',
      labelWidth: 82.0,
      type: TDFormItemType.upLoadImg,
      formItemNotifier: _formItemNotifier['photo'],
      child: TDUpload(
        files: files,
        onError: print,
        onValidate: print,
        onChange: ((imgList, type) {
          files = _onValueChanged(files ?? [], imgList, type);
          List imgs = files.map((e) => e.remotePath ?? e.assetPath).toList();
          setState(() {
            _formItemNotifier['photo'].upDataForm(imgs.join(','));
          });
        }),
      ),
    );
  }

  Widget buildFormBtnGroup() {
    return Container(
      decoration: BoxDecoration(color: TDTheme.of(context).whiteColor1),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            Expanded(
              child: TDButton(
                text: '重置',
                type: TDButtonType.fill,
                theme: TDButtonTheme.light,
                shape: TDButtonShape.rectangle,
                onTap: () {
                  //用户名称
                  _controller[0].clear();
                  //密码
                  _controller[1].clear();
                },
              ),
            ),
            SizedBox(width: 20),
            Expanded(
              child: TDButton(
                text: '提交',
                type: TDButtonType.fill,
                theme: TDButtonTheme.primary,
                shape: TDButtonShape.rectangle,
                onTap: () => {},
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('新增记录'), backgroundColor: Colors.white),
      backgroundColor: Color(0xFFF5F5F5),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: SingleChildScrollView(
            child: TDForm(
              formController: _formController,
              data: _formData,
              rules: _validationRules,
              formContentAlign: TextAlign.left,
              formShowErrorMessage: true,
              onSubmit: () => {},
              items: [buildNameItem(), buildDateItem(), buildImageItem()],
              btnGroup: [buildFormBtnGroup()],
            ),
          ),
        ),
      ),
    );
  }
}