import { BfCalendar } from '@bud-fe/react-taro-ui';
import { IDateConfigObj } from '@bud-fe/react-taro-ui/es/_components/calendar/types/calendar';
import { View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [dateConfig, setDateConfig] = useState<IDateConfigObj>({
    '2023-09-29': { dateType: 1 }, // 休息日
    '2023-09-30': { dateType: 1 },
    '2023-10-01': { dateType: 2, remark: '2023.09.26' }, // 补班日
    // '2023-10-02': { dateType: 1, badgeText: '自', badgeBgColor: 'blue' },
    '2023-10-02': { dateType: 1 },
    '2023-10-03': { dateType: 2, remark: '09.27' },
    '2023-10-04': { dateType: 3 }, // 工作日
    '2023-10-05': { dateType: 1 },
    '2023-10-06': { dateType: 1 },
    '2023-10-07': { dateType: 2, remark: '09.29' },
    '2023-10-08': { dateType: 2, remark: '2024.09.23' },
    // '2023-10-09': { dateType: 3 },
    '2023-10-09': { dateType: 2, remark: '2023.09.30' },
  });
  return (
    <>
      <View className="group-title">基础用法</View>

      <BfCalendar
        currentDate="2023/10/28"
        requestDateConfig={async () => {
          return Promise.resolve({
            '2023-11-14': {
              date: '2023-11-14',
              dateType: 2,
              remark: '2023.11.14',
            },
          });
        }}
      />
      {/* // `data_type` int(1) DEFAULT NULL COMMENT '数据类型 1-休息日  2-补班日 3-工作日' */}
      <BfCalendar
        currentDate={{ start: '2023/10/28', end: '2023/10/29' }}
        minDate="2023-07-12"
        isMultiSelect
        dateConfig={dateConfig}
        onClickNextMonth={() => {
          setDateConfig((pre) => ({
            ...pre,
            ...{
              '2023-10-01': { dateType: 1 },
              '2023-10-02': { dateType: 1, badgeText: '休', badgeBgColor: 'purple' },
            },
          }));
        }}
      />

      <View className="group-title"> minDate="2018/3/21" maxDate="2018-5-12"</View>
      <BfCalendar currentDate="2018/4/11" minDate={1521561600000} maxDate="2018-5-12" />
      <View className="group-title"> maxDate="2018-5-12"</View>
      <BfCalendar currentDate="2018/4/11" maxDate={new Date('2018-5-12')} />
      <View className="group-title"> minDate="2018/3/21"</View>
      <BfCalendar currentDate="2018/4/11" minDate="2018/3/21" />
      <View className="group-title"> minDate="2018/3/21"</View>
      <BfCalendar currentDate="2018/4/11" enablePicker={false} />
      <BfCalendar marks={[{ value: '2018/11/11' }]} />
    </>
  );
};