import React, { useState } from "react";
import moment from "moment";
import { DatePicker, Form } from "@tencent/tea-component";

const { RangePicker } = DatePicker;

const range = (s, t) =>
  Array(t - s + 1)
    .fill(0)
    .map((_, i) => s + i);

export default () => {
  function disabledDate(date, start) {
    // 选择范围在今天之前，且选择跨度不大于七天
    const isAfterToday = date.isAfter(moment(), "day");
    if (moment.isMoment(start)) {
      return (
        !isAfterToday &&
        !(
          moment(date)
            .subtract(6, "day")
            .isAfter(start, "day") ||
          moment(date)
            .add(6, "day")
            .isBefore(start, "day")
        )
      );
    }
    return !isAfterToday;
  }

  function disabledTime(dates, partial) {
    // const [start, end] = dates;
    if (partial === "start") {
      return {
        disabledHours: () => [...range(0, 8), ...range(18, 23)],
        disabledMinutes: hour => (hour === 9 ? range(0, 29) : []),
      };
    }
    return {
      disabledHours: () => range(17, 19),
      disabledSeconds: () => range(1, 59),
    };
  }

  return (
    <Form layout="vertical">
      <Form.Item label="disabledDate 限制">
        <RangePicker
          disabledDate={disabledDate}
          onChange={value =>
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            )
          }
        />
      </Form.Item>
      <Form.Item label="disabledTime 限制">
        <RangePicker
          showTime={{ minuteStep: 5, secondStep: 30 }}
          disabledDate={disabledDate}
          disabledTime={disabledTime}
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </Form.Item>
    </Form>
  );
};