import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import DatePicker from '../DatePicker';

export default (props) => {

  const { show, onChange, onCancel, ...leftProps } = props;
  
  const [showDt1, setShowDt1] = React.useState(false);
  const [showDt2, setShowDt2] = React.useState(false);
  const dtRef = React.useRef([]);
  
  const onDtChange = (inx, val) => {
    dtRef.current[inx] = val;

    if (inx == 0) {
      setShowDt1(false);
      setShowDt2(true);
    } else {
      setShowDt2(false);
      if (onChange) {
        onChange(dtRef.current)
      }
    }
  }

  React.useEffect(() => {
    if (show) {
      setShowDt1(true);
      setShowDt2(false);
    } else {
      setShowDt1(false);
      setShowDt2(false);
    }
  }, [show]);

  return (
    <>
      <DatePicker
        title="请选择起始日期"
        type="date"
        show={showDt1}
        onChange={e => onDtChange(0, e)}
        onCancel={onCancel}
        {...leftProps}
      />
      <DatePicker
        title="请选择结束日期"
        type="date"
        show={showDt2}
        onChange={e => onDtChange(1, e)}
        onCancel={onCancel}
        {...leftProps}
      />
    </>
  )
}
