/*
* 输入框筛选选择器
*/
import React, { useState, useEffect } from 'react'
import { View, Picker, Image, Input, Text } from '@tarojs/components'
import arrowIcon from '../../../static/img/patrol/arrow-down.svg'
import './index.scss'

export default function InputPicker(props) {
  const { title, placeholder, selector, value, onInput, isView } = props
  const [curSelector, setCurSelector] = useState([])

  useEffect(() => {
    setCurSelector(selector)
  }, [selector])

  useEffect(() => {
    handleInput({ detail: { value: value } })
  }, [value])

  function handleInput({ detail: { value: v } }) {
    onInput(v)
    if (v) {
      setCurSelector(selector.filter(item => item && item.includes(v)))
    } else {
      setCurSelector(selector)
    }
  }

  const handlePickerChange = (e) => {
    onInput(curSelector[e.detail.value])
  }

  return (
    <View className='input-picker'>
      <View className='input-box'>
        <View className='title'>&nbsp;&nbsp;{title}</View>
        <Input
          className='input'
          type='text'
          placeholder={placeholder}
          border={false}
          value={value}
          onInput={handleInput}
          disabled={isView}
        />
      </View>
      {
        !isView &&
        <Picker mode='selector' range={curSelector} onChange={handlePickerChange}>
          <Image src={arrowIcon} className='img' />
        </Picker>
      }
    </View>
  )
}