/*
 * @Author: XianKaiQun
 * @LastEditors  : WuWei
 * @Date: 2020-10-26 10:34:32
 * @LastEditTime : 2023-05-10 15:49:36
 */
part of '../view.dart';

class _FormComponent extends StatelessWidget {
  const _FormComponent({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final store = Provider.of<PrivateProcessStore>(context, listen: false);
    return Observer(builder: (context) {
      return WisScrollView(
        onInit: () => store.onInitform(),
        slivers: [
          WisCard(
              margin: EdgeInsets.only(left: 15.pt, right: 15.pt, bottom: 15.pt),
              child: Form(
                key: store.formKey,
                child: Wisdom.column(
                  color: Colors.white,
                  padding: EdgeInsets.symmetric(horizontal: 15.pt),
                  children: ListTile.divideTiles(
                    context: context,
                    tiles: [
                      for (int i = 0; i < store.formList.length; i++)
                        __FormItem(item: store.formList[i])
                    ],
                  ).toList(),
                ),
              )).asSliver(),
          SizedBox(
            height: 60.pt,
          ).asSliver(),
        ],
      ).asExpanded();
    });
  }
}

class __FormItem extends StatelessWidget {
  const __FormItem({Key? key, this.item}) : super(key: key);
  final item;

  @override
  Widget build(BuildContext context) {
    final store = Provider.of<PrivateProcessStore>(context, listen: false);

    /// 单行文本
    if (item['__config__']['tag'] == 'el-input' &&
        item['__config__']['tagIcon'] == 'input')
      // ERROR: 必须加 return, 否则报错 return null
      return Observer(builder: (context) {
        return new WFInput(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '${item['placeholder']}',
          type: InputType.singleLine,
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          maxLength: item['maxLenth'],
          onInput: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });

    /// 多行文本
    if (item['__config__']['tag'] == 'el-input' &&
        item['__config__']['tagIcon'] == 'textarea')
      return Observer(builder: (context) {
        return WFInput(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '${item['placeholder']}',
          type: InputType.multiLine,
          maxLength: item['maxLenth'],
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          onInput: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });

    /// 日期选择
    if (item['__config__']['tag'] == 'el-date-picker' &&
        item['__config__']['tagIcon'] == 'date')
      return Observer(builder: (context) {
        return WFDatePicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '请选择${item['__config__']['label']}',
          initialDateTime: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });

    ///日期范围
    if (item['__config__']['tag'] == 'el-date-picker' &&
        item['__config__']['tagIcon'] == 'dateRange')
      return Observer(builder: (context) {
        return WFDateRangePicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '请选择${item['__config__']['label']}',
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
          initialDateRange: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
        );
      });

    /// 上传
    if (item['__config__']['tag'] == 'el-upload' &&
        (item['__config__']['tagIcon'] == 'upload' ||
            item['__config__']['tagIcon'] == 'imgUpload'))
      return Observer(builder: (context) {
        return WFImagePicker(
          maxCount: item['limit'],
          currentCount: store.postFormPrs[item['__vModel__']] != null &&
                  store.postFormPrs[item['__vModel__']].length != null
              ? store.postFormPrs[item['__vModel__']].length
              : 0,
          onDelete: (i) => {store.onImageRemoveAt(item['__vModel__'], i)},
          onSelected: (images) =>
              {store.onFilesChanged(images, item['__vModel__'])},
          images: store.postFormPrs[item['__vModel__']] != null &&
                  store.postFormPrs[item['__vModel__']].length != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
        );
      });
    // 数字
    if (item['__config__']['tag'] == 'el-input-number' &&
        item['__config__']['tagIcon'] == 'number')
      return Observer(builder: (context) {
        return WFInputNumber(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '${item['placeholder']}',
          type: InputType.number,
          onInput: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
        );
      });

    ///金额
    if (item['__config__']['tag'] == 'el-input-number' &&
        item['__config__']['tagIcon'] == 'money')
      return Observer(builder: (context) {
        return WFInputMoney(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '${item['placeholder']}',
          type: InputType.money,
          onInput: (v) =>
              {store.onSetFormPrs(item['__vModel__'], v.toString())},
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
        );
      });

    /// 手机号
    if (item['__config__']['tag'] == 'el-input' &&
        item['__config__']['tagIcon'] == 'mobile')
      return Observer(builder: (context) {
        return WFInput(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '${item['placeholder']}',
          type: InputType.phoneNumber,
          onInput: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
        );
      });

    /// 开关
    if (item['__config__']['tag'] == 'el-switch')
      return Observer(
        builder: (context) {
          return WFSwitch(
            isRequired: item['__config__']['required'],
            title: Text('${item['__config__']['label']}'),
            initialValue: store.postFormPrs[item['__vModel__']] != null
                ? store.postFormPrs[item['__vModel__']]
                : false,
            onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
          );
        },
      );

    ///单选框
    if (item['__config__']['tag'] == 'el-radio-group' &&
        item['__config__']['tagIcon'] == 'radio')
      return Observer(builder: (context) {
        return WFSinglePicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: item['placeholder'] ?? null,
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          dataList: item != null && item['__slot__'] != null
              ? item['__slot__']['options']
              : [],
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });
    // 多选框
    if (item['__config__']['tag'] == 'el-checkbox-group' &&
        item['__config__']['tagIcon'] == 'checkbox')
      return Observer(builder: (context) {
        return WFMultiplePicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: item['placeholder'] ?? null,
          dataList: item != null && item['__slot__'] != null
              ? item['__slot__']['options']
              : [],
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });

    ///单选下拉框
    if (item['__config__']['tag'] == 'el-select' &&
        item['__config__']['tagIcon'] == 'select')
      return Observer(builder: (context) {
        return WFRadioPicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: '${item['placeholder']}',
          initialValue: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          dataList: item != null && item['__slot__'] != null
              ? item['__slot__']['options']
              : [],
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });

    ///时间范围
    if (item['__config__']['tag'] == 'el-time-picker' &&
        item['__config__']['tagIcon'] == 'timeRange')
      return Observer(builder: (context) {
        return WFTimeRangePicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: item['placeholder'] ?? '请选择${item['__config__']['label']}',
          initialTime: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : [],
          mode: DateTimeRangePickerMode.time,
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });

    ///时间选择
    if (item['__config__']['tag'] == 'el-time-picker' &&
        item['__config__']['tagIcon'] == 'time')
      return Observer(builder: (context) {
        return WFTimePicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          hintText: item['placeholder'] ?? '请选择${item['__config__']['label']}',
          initialDate: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });

    /// 日期时间
    if (item['__config__']['tag'] == 'el-date-picker' &&
        item['__config__']['tagIcon'] == 'datetime')
      return Observer(builder: (context) {
        return WFTimePicker(
          isRequired: item['__config__']['required'],
          title: Text('${item['__config__']['label']}'),
          type: 'datetime',
          hintText: item['placeholder'] ?? '请选择${item['__config__']['label']}',
          initialDate: store.postFormPrs[item['__vModel__']] != null
              ? store.postFormPrs[item['__vModel__']]
              : null,
          onChanged: (v) => {store.onSetFormPrs(item['__vModel__'], v)},
        );
      });
    else
      return Container(
        width: 0.0,
        height: 0.0,
        child: Text(''),
      );
  }
}
