import React, { useState, useEffect } from 'react';
import { Select, TimePicker } from 'antd';
const { Option } = Select;
import moment from 'moment';

const OnTime = (porps: any) => {
  // placeholder 默认显示  disabled  是否禁止
  // openSelect  选中函数  limit 限制时间    type 类型  时开始还是结束   1 就是结束 结尾是59
  // defaultValue 默认时间   inhibitTime  禁止选择时间
  let { placeholder, disabled, openSelect, limit, type, defaultValue, inhibitTime } = porps;

  const [imgOpen, setImgOpen] = useState(null as any);
  // 已经预约时间禁止
  const [Scheduled, setScheduled] = useState(null as any);

  // 禁止选择时间
  useEffect(() => {
    if (inhibitTime != null) {
      let arrs = '' as any;
      inhibitTime.forEach((element: any) => {
        let strArr = cutOut(element);
        arrs = arrs + strArr;
      });
      let confirm = [...new Set(arrs.substr(0, arrs.length - 1).split(','))];

      let newConfirm = [] as any;
      confirm.forEach((element: any) => {
        return newConfirm.push(parseInt(element));
      });

      setScheduled(newConfirm);
    }
  }, [inhibitTime]);

  // 时间截取
  function cutOut(str: any) {
    var one = str.indexOf(':');
    let str1 = parseInt(str.substring(0, one));
    let str2 = parseInt(str.match(/-(\S*):/)[1]);
    let arr = '';
    for (let i = str1; i <= str2; i++) {
      arr = `${arr}${i},`;
    }
    return arr;
  }

  useEffect(() => {
    if (defaultValue != null) {
      let a = moment(defaultValue, 'HH:mm');
      setImgOpen(a);
    }
  }, [defaultValue]);

  // console.log(limit);
  // 生成数组 -- 时间
  const createArray = (num: any) => {
    var arr = [];
    for (let i = 0; i < num; i++) {
      if (i < 10) {
        arr[i] = `0${i}`;
      } else {
        arr[i] = i;
      }
    }
    return arr;
  };

  //小时
  const hourS = createArray(24).map((item) =>
    // 处理限制时间段
    limit ? (
      <Option value={item + (type ? ':59' : ':00')} key={item} disabled={Times(item, limit)}>
        {item + (type ? ':59' : ':00')}
      </Option>
    ) : (
      <Option value={item + (type ? ':59' : ':00')} key={item}>
        {item + (type ? ':59' : ':00')}
      </Option>
    ),
  );

  // 字符串截取判断
  function Times(item: any, openTime: string) {
    if (
      parseInt(item) >= parseInt(openTime.slice(0, 2)) &&
      parseInt(item) <= parseInt(openTime.slice(6, 8))
    ) {
      if (Scheduled && Scheduled.indexOf(parseInt(item)) != -1) {
        // 如果存在有预约的时间  且在数组里面，就禁止选择
        return true;
      }
      return false;
    } else {
      return true;
    }
  }

  return (
    <>
      {defaultValue ? (
        <TimePicker
          defaultValue={moment(defaultValue, 'HH:mm')}
          format="HH:mm"
          onChange={openSelect}
          placeholder={placeholder}
          defaultOpenValue={moment('00:00', 'HH:mm')}
          disabled={disabled}
        />
      ) : (
        <Select
          style={{ width: 140 }}
          placeholder={placeholder}
          disabled={disabled}
          onSelect={openSelect}
        >
          {hourS}
        </Select>
      )}
    </>
  );
};

export default OnTime;
