/*
 * @Author: XianKaiQun
 * @Date: 2020-08-03 17:30:44
 * @LastEditors: ChenYaJin
 * @LastEditTime: 2021-11-10 18:09:59
 * @Description: 
 */
part of '../index.dart';

///表单
class _FormComponent extends StatelessWidget {
  const _FormComponent({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final store = Provider.of<PrivateRepairHandleStore>(context);
    final style = WTheme.of(context);
    final colorScheme = style.colorScheme;
    final theme = Theme.of(context);
    final textTheme = theme.textTheme;
    final norm = store.norm;
    final form = norm?.operators ?? [];
    final contents = store.contents;
    return WisCard(
      isSliver: true,
      margin: EdgeInsets.symmetric(vertical: 7.5.pt, horizontal: 15.pt),
      padding: EdgeInsets.all(15.pt),
      child: Column(
        children: <Widget>[
          for (var i = 0; i < form.length; i++)
            () {
              final item = form[i];
              final mark = item.type == 'checkbox'
                  ? '（多选）'
                  : item.type == 'radio'
                      ? '（单选）'
                      : '';
              return Wisdom.column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.symmetric(vertical: 10.pt),
                    child: Text(
                      '${i + 1}、${item.name}$mark',
                      style: textTheme.titleMedium!.copyWith(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  if (item.type == 'text')
                    TextFormField(
                      minLines: 4,
                      maxLines: 4,
                      onChanged: (v) => store.onInputChange(item.id, v),
                      decoration: InputDecoration(
                        hintText: '请输入描述',
                      ),
                    )
                  else if (item.type == 'radio')
                    ...ListTile.divideTiles(
                      context: context,
                      tiles: [
                        for (String child in item.connent ?? [])
                          RadioListTile(
                            value: child,
                            groupValue: contents[item.id],
                            onChanged: (dynamic v) =>
                                store.onRadioChange(item.id, v),
                            dense: true,
                            title: Text(child),
                          ),
                      ],
                    ).toList()
                  else if (item.type == 'checkbox')
                    ...ListTile.divideTiles(
                      context: context,
                      tiles: [
                        for (String child in item.connent ?? [])
                          CheckboxListTile(
                            ///切割字符串到数组，判断数组中有没有该项
                            value:
                                (contents[item.id]?.split(',').indexOf(child) ??
                                        -1) !=
                                    -1,
                            onChanged: (v) =>
                                store.onCheckBoxChange(item.id, child, v!),
                            dense: true,
                            controlAffinity: ListTileControlAffinity.leading,
                            title: Text(child),
                          ),
                      ],
                    ).toList()
                  else if (item.type == 'img')
                    () {
                      final imageIds =
                          contents[item.id]?.split(',').toList() ?? [];
                      final imageProviders = imageIds
                          .map(
                            (e) => CachedNetworkImageProvider(
                                AppParseUtil.image(e)),
                          )
                          .toList();
                      return Wrap(
                        runSpacing: 10.pt,
                        spacing: 10.pt,
                        children: <Widget>[
                          for (var imageid in imageIds)
                            () {
                              final index = imageIds.indexOf(imageid);
                              return Stack(
                                children: <Widget>[
                                  Wisdom(
                                    onTap: () => WisPhotoViewUtil.show(
                                        imageProviders, index),
                                    padding:
                                        EdgeInsets.only(top: 8.pt, right: 8.pt),
                                    child: WImage.network(
                                      AppParseUtil.image(imageid),
                                      fit: BoxFit.cover,
                                      width: 80.pt,
                                      height: 80.pt,
                                    ),
                                  ),
                                  Positioned(
                                    top: 0,
                                    right: 0,
                                    child: WDot.delete(
                                      onTap: () =>
                                          store.removeImage(item.id, imageid),
                                    ),
                                  ),
                                ],
                              );
                            }(),
                          if (imageIds.length < item.imgCount!)
                            WLoadingWrapper(
                              action: () => store.onImagePicker(
                                item.id,
                                item.imgCount! - imageIds.length as int,
                              ),
                              builder: (context, action, child) {
                                return Wisdom(
                                  onTap: action,
                                  margin:
                                      EdgeInsets.only(top: 8.pt, right: 8.pt),
                                  padding: EdgeInsets.only(top: 10.pt),
                                  color: colorScheme.background,
                                  alignment: Alignment.center,
                                  width: 80.pt,
                                  height: 80.pt,
                                  child: child,
                                );
                              },
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(Icons.image),
                                  Text(
                                    '${imageIds.length}/${item.imgCount}',
                                    style: TextStyle(
                                      color: Colors.grey,
                                      fontSize: 10.pt,
                                    ),
                                  )
                                ],
                              ),
                            ),
                        ],
                      );
                    }(),
                ],
              );
            }(),
        ],
      ),
    );
  }
}
