import React, { useState, useEffect } from 'react';
import {
  View,
  RadioGroup,
  Radio,
  Button,
  Image,
  Input,
  Textarea,
  Picker
} from '@tarojs/components';
import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui';
// import InputPicker from '../components/inputPicker';
import './index.scss';
import arrowIcon from '../../static/img/patrol/arrow-down.svg';

const Index = () => {
  const [isPatrol, setIsPatrol] = useState(true) // 巡查 or 养护
  const [prjTypeSelector, setPrjTypeSelector] = useState([])
  const [roadSelector, setRoadSelector] = useState([])
  const [projectType, setProjectType] = useState('')
  const [road, setRoad] = useState('')

  const [images, setimages] = useState([])

  const reportType = [
    {
      value: '巡查',
      text: '巡查',
      checked: true
    },
    {
      value: '养护',
      text: '养护',
      checked: false
    }
  ]

  useEffect(() => {
    const prjTypeSelector = ['道路', '桥梁', '涵洞']
    const roadSelector = ['富山一路', '金沙大道', '玉湖路']
    setPrjTypeSelector(prjTypeSelector)
    setRoadSelector(roadSelector)
  }, [])

  useEffect(() => {
    if (projectType) {
      setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
    }
  }, [projectType])
  // useEffect(() => {
  //   if (projectType) {
  //     setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
  //   }
  // }, [projectType])

  function onTypeChange(e) {
    if (e.detail.value === '巡查') {
      setIsPatrol(true)
    } else {
      setIsPatrol(false)
    }
  }

  function onPrjTypeChange(e) {
    setProjectType(selector[e.detail.value])
  }

  function onImgPickerChange() {

  }

  return (
    <View className='patrol'>
      <View className='report-type'>
        <View className='text'>上报类型</View>
        <RadioGroup onChange={onTypeChange}>
          {
            reportType.map((item, i) => {
              return (
                <Radio
                  key={i}
                  value={item.value}
                  checked={item.checked}
                  className='radio'
                  color='#346FC2'
                >
                  {item.text}
                </Radio>
              )
            })
          }
        </RadioGroup>
      </View>

      <View className='input-picker'>
        <AtInput
          className='input'
          title='工程类型：'
          type='text'
          placeholder='请选择工程类型'
          border={false}
          value={projectType}
          onChange={value => setProjectType(value)}
        />
        <Picker mode='selector' range={prjTypeSelector} onChange={onPrjTypeChange}>
          <Image src={arrowIcon} className='img-r' />
        </Picker>
      </View>
      <View className='input-picker'>
        <AtInput
          className='input'
          title='所在道路：'
          type='text'
          placeholder='请选择您所在的道路'
          border={false}
          value={road}
          onChange={value => setRoad(value)}
        />
        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
          <Image src={arrowIcon} className='img-r' />
        </Picker>
      </View>

      {/* <InputPicker 
        className='input-picker'
        title='工程类型：'
        placeholder='请选择工程类型'
        value={projectType}
        onChange={setProjectType}
        selector={prjTypeSelector}
      />
      <InputPicker 
        className='input-picker'
        title='所在道路：'
        placeholder='请选择您所在的道路'
        value={road}
        onChange={setRoad}
        selector={roadSelector}
      /> */}

      <View className='input-picker'>
        <AtInput
          className='input'
          title='所属路段:'
          type='text'
          placeholder='路段名称'
          border={false}
        // value={this.state.value}
        // onChange={this.handleChange.bind(this, 'value')}
        />
        <Image src={arrowIcon} className='img-l' />
        <AtInput
          className='input'
          type='text'
          placeholder='路段名称'
          border={false}
        // value={this.state.value}
        // onChange={this.handleChange.bind(this, 'value')}
        />
        <Image src={arrowIcon} className='img-r' />
      </View>

      <View>
        <AtTextarea
          count={false}
          title='具体位置:'
          type='text'
          placeholder='具体位置：根据定位自动获取，可手动修改'
          border={false}
        // value={this.state.value}
        // onChange={this.handleChange.bind(this, 'value')}
        />
      </View>

      {
        isPatrol ?
          <View className='img-picker'>
            现场图片：
            <AtImagePicker
              length={3}
              files={images}
              onChange={onImgPickerChange}
            />
          </View> :
          <View>
            养护图片:
            <AtTimeline
              items={[
                {
                  title: '养护前', 
                },
                { title: '养护中' },
                { title: '养护后' }
              ]}
            >
            </AtTimeline>
          </View>
      }

      <AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton>

    </View>
  )
}

export default Index