Highways4Good/weapp/src/packages/patrol/index.jsx

import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
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(files) {
    setimages(files)
  }
  function onImageClick(index, file) {
    Taro.previewImage({
      urls: [file.url] // 需要预览的图片http链接列表
    })
  }

  useEffect(() => {
    console.log(images);
  }, [images])

  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')}
        />
        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
          <Image src={arrowIcon} className='img-l' />
        </Picker>
        <AtInput
          className='input'
          type='text'
          placeholder='路段名称'
          border={false}
        // value={this.state.value}
        // onChange={this.handleChange.bind(this, 'value')}
        />
        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
          <Image src={arrowIcon} className='img-r' />
        </Picker>
      </View>

      <AtTextarea
        count={false}
        title='具体位置：'
        placeholder='具体位置：根据定位自动获取，可手动修改'
      // value={this.state.value}
      // onChange={this.handleChange.bind(this, 'value')}
      />
      <AtTextarea
        count={false}
        title='巡查内容：'
        placeholder='请输入巡查内容'
      // value={this.state.value}
      // onChange={this.handleChange.bind(this, 'value')}
      />

      {
        isPatrol ?
          <View className='patrol-picker'>
            现场图片：
            <AtImagePicker
              className='img-picker'
              count={3 - images.length}
              showAddBtn={images.length >= 3 ? false : true}
              files={images}
              onChange={onImgPickerChange}
              onImageClick={onImageClick}
            />
          </View> :
          <View className='conserve-picker'>
            养护图片:
            <View className='horizontal-line hl-one'>
              <View className='circle c-one'></View>
              <View className='text t-one'>养护前</View>
            </View>
            <AtImagePicker
              className='img-picker'
              count={3}
              files={images}
              onChange={onImgPickerChange}
            />
            <View className='horizontal-line hl-two'>
              <View className='circle c-two'></View>
              <View className='text t-two'>养护中</View>
            </View>
            <AtImagePicker
              className='img-picker'
              count={3}
              files={images}
              onChange={onImgPickerChange}
            />
            <View className='horizontal-line hl-three'>
              <View className='circle c-three'></View>
              <View className='text t-three'>养护后</View>
            </View>
            <AtImagePicker
              className='img-picker'
              count={3}
              files={images}
              onChange={onImgPickerChange}
            />
          </View>
      }

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

    </View>
  )
}

export default Index