import { BfListItem, BfListItemInput, BfRadioGroup } from '@bud-fe/react-taro-ui';
import { checkIsMobile, checkIsNumber, checkNotNull } from '@bud-fe/react-taro-ui/es/components/bf-list-item';
import { Button, Picker, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useEffect, useState } from 'react';

const radioOptions = [
  { label: '是', value: 1 },
  { label: '否', value: 0 },
];

export default () => {
  const { verify, formData, verifyList, ...otherProps } = BfListItem.useForm();
  const [date, setDate] = useState<string>();

  useEffect(() => {
    console.log('formdata ===> ', formData);
  }, [formData]);

  useEffect(() => {
    console.log('verifyList ===> ', verifyList);
  }, [verifyList]);

  return (
    <>
      <View className="group-title">基础用法</View>
      <BfListItem label="售点名称" required value="家乐福" />
      <BfListItem style={{ background: '#FFF', borderRadius: 8 }} label="带箭头" arrow arrowStyle={{ color: 'red' }} />

      <View className="group-title">带slotRight</View>
      <BfListItem
        style={{ background: '#FFF', borderRadius: 8 }}
        label="月销量"
        // slotRight={<BfListItemInput disableDebounce maxlength={50} placeholder="请输入" />}
        slotRight={<BfRadioGroup groups={radioOptions} disabled />}
      />

      <View className="group-title">配合 BfListItem.useForm</View>
      <BfListItem
        label="test1"
        slotRight={
          <BfListItemInput
            placeholder="数字测试"
            {...otherProps}
            verifyFunc={(value) => checkIsNumber(value, '测试啊')}
            formKey="number"
          />
        }
      />
      <BfListItem
        label="test2"
        slotRight={
          <BfListItemInput
            placeholder="手机号码测试"
            {...otherProps}
            verifyFunc={checkIsMobile}
            formKey="mobile"
            maxlength={11}
          />
        }
      />
      <BfListItem
        label="test3"
        slotRight={
          <BfListItemInput placeholder="空数据测试" {...otherProps} verifyFunc={checkNotNull} formKey="test" />
        }
      />

      <Picker
        mode="time"
        value={date || ''}
        onChange={(e) => {
          setDate(e.detail.value);
        }}
      >
        <BfListItem
          label="test4"
          value={date}
          {...otherProps}
          formKey="date"
          verifyFunc={(value) => {
            if (!value) {
              Taro.showToast({ title: '测试为空了' });
              return false;
            }
            return true;
          }}
        />
      </Picker>

      <Button
        onClick={() => {
          console.log('校验', verify());
        }}
      >
        校验
      </Button>
    </>
  );
};