import { useState } from 'react'
import { Picker } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import './index.scss'

export default function DatePicker (props) {

  const { change = () => { }, close = () => { }, visable = false } = props

  const [StartDate, setStartDate] = useState(null)
  const [EndDate, setEndDate] = useState(null)

  const StartDateChange = (e) => {
    setStartDate(e.detail.value)
  }

  const EndDateChange = (e) => {
    setEndDate(e.detail.value)
  }

  const Sure = () => {
    change([StartDate, EndDate])
  }

  return (
    <view className='components DatePicker' style={{display: visable ? 'block' : 'none'}}>
      <view>

        <view className='DateInput flex-h'>
          <view className='flex-item'>
            <Picker mode='date' value={null} onChange={StartDateChange}>
              <text className='DateText'>{StartDate || '请选择开始日期'}</text>
            </Picker>
          </view>
          <text>-</text>
          <view className='flex-item'>
            <Picker mode='date' value={null} onChange={EndDateChange}>
              <text className='DateText'>{EndDate || '请选择结束日期'}</text>
            </Picker>
          </view>
        </view>

        <view className='Btn flex-h'>
          <view className='flex-item'>
            <text onClick={close}>取消</text>
          </view>
          <view className='flex-item'>
            <text onClick={Sure}>确定</text>
          </view>
        </view>

      </view>
    </view>
  )
}
