import { BfModalYearMonth } from '@bud-fe/react-taro-ui';
import { dateHelper } from '@bud-fe/utils';
import { Input, View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [text, setText] = useState<number>();
  const [text1, setText1] = useState<number>(-1383465600000);
  const [text2, setText2] = useState<number>();
  return (
    <>
      <View className="group-title">基础用法</View>
      <BfModalYearMonth
        modalConfig={{ title: '请选择出生年月' }}
        onConfirm={(val) => {
          console.log(val);
          setText(val);
        }}
        value={text}
      >
        <Input value={text ? dateHelper.formatDate(text, { type: 'YM' }) : undefined} />
      </BfModalYearMonth>
      <View className="group-title">onCancel,value</View>
      <BfModalYearMonth
        onConfirm={(val) => {
          console.log(val);
          setText1(val);
        }}
        value={text1}
        onCancel={() => {
          console.log('点击取消了');
        }}
      >
        <Input value={text1 ? dateHelper.formatDate(text1, { type: 'YM' }) : undefined} />
      </BfModalYearMonth>
      <View className="group-title">disabledDate</View>
      <BfModalYearMonth
        onConfirm={(val) => {
          console.log(val);
          setText2(val);
        }}
        value={Date.now()}
        disabledDate={[2017, 4]}
      >
        <Input value={text2 ? dateHelper.formatDate(text2, { type: 'YM' }) : undefined} />
      </BfModalYearMonth>
    </>
  );
};