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

import React, { useState, useEffect } from 'react';
import Taro, { useRouter } from '@tarojs/taro';
import {
  View,
  RadioGroup,
  Radio,
  Button,
  Image,
  Input,
  Picker
} from '@tarojs/components';
import { AtButton, AtTextarea, AtImagePicker, AtAvatar } from 'taro-ui';
import InputPicker from '../components/inputPicker';
import request from '@/services/request';
import { postReport, getReportDetail } from '@/services/api';
import './index.scss';
import arrowIcon from '../../static/img/patrol/arrow-down.svg';

const Index = () => {
  const router = useRouter()
  const { params: { type } } = router
  const isView = type === 'view' ? true : false


  const [reportType, setReportType] = useState('patrol') // 上报类型
  const [projectType, setProjectType] = useState('') // 工程类型
  const [road, setRoad] = useState('') // 所在道路
  const [roadSectionStart, setRoadSectionStart] = useState('') // 路段 Start
  const [roadSectionEnd, setRoadSectionEnd] = useState('') // 路段 End
  const [address, setAddress] = useState('') // 具体位置
  const [content, setContent] = useState('') // 巡查内容
  const [scenePic, setScenePic] = useState([]) // 现场图片
  const [conserveBeforePic, setConserveBeforePic] = useState([]) // 养护前图片
  const [conserveUnderwayPic, setConserveUnderwayPic] = useState([]) // 养护中图片
  const [conserveAfterPic, setConserveAfterPic] = useState([]) // 养护后图片

  const [roadStartSelector, setRoadStartSelector] = useState([])
  const [roadEndSelector, setRoadEndSelector] = useState([])

  const [canReport, setCanReport] = useState(true)

  const [typeList, setTypeList] = useState([
    {
      value: 'patrol',
      text: '巡查',
      checked: true
    },
    {
      value: 'conserve',
      text: '养护',
      checked: false
    }
  ])

  const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
  const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']

  const rRoadStartSelector = ['一段', '二段', '三段']
  const rRoadEndSelector = ['一段', '二段', '三段']

  useEffect(() => {
    if (isView) {
      Taro.showLoading({
        title: '加载中'
      })
      request.get(getReportDetail(router.params.id)).then(res => {
        Taro.hideLoading()
        if (res.statusCode == 200 || res.statusCode == 204) {
          const { data } = res
          setReportType(data.reportType)
          setProjectType(data.projectType)
          setRoad(data.road)
          setRoadSectionStart(data.roadSectionStart)
          setRoadSectionEnd(data.roadSectionEnd)
          setAddress(data.address)
          setContent(data.content)
          setScenePic(data.scenePic ? data.scenePic.map(item => ({ url: item })) : [])
          setConserveBeforePic(data.conserveBeforePic ? data.conserveBeforePic.map(item => ({ url: item })) : [])
          setConserveUnderwayPic(data.conserveUnderwayPic ? data.conserveUnderwayPic.map(item => ({ url: item })) : [])
          setConserveAfterPic(data.conserveAfterPic ? data.conserveAfterPic.map(item => ({ url: item })) : [])
        } else {
          Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
        }
      }, err => {
        Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
      })
    }
    setRoadStartSelector(rRoadStartSelector)
    setRoadEndSelector(rRoadEndSelector)
  }, [])

  useEffect(() => {
    setTypeList([
      {
        value: 'patrol',
        text: '巡查',
        checked: reportType === 'patrol' ? true : false
      },
      {
        value: 'conserve',
        text: '养护',
        checked: reportType === 'conserve' ? true : false
      }
    ])
  }, [reportType])

  function report() {
    if (!canReport) { return }
    if (!projectType || !road) {
      Taro.showToast({ title: '请完善必填信息', icon: 'none' })
      return
    }
    if (rPrjTypeSelector.indexOf(projectType) === -1) {
      Taro.showToast({ title: '工程类型错误', icon: 'none' })
      return
    }
    let data = {
      reportType,
      projectType,
      road,
      roadSectionStart,
      roadSectionEnd,
      address,
      content,
      // longitude: 37.000000000000,
      // latitude: 69.000000000000
    }
    if (reportType === 'patrol') {
      data['scenePic'] = scenePic.length > 0 ? scenePic.map(item => item.url) : null
    } else {
      data['conserveBeforePic'] = conserveBeforePic.length > 0 ? conserveBeforePic.map(item => item.url) : null
      data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 ? conserveUnderwayPic.map(item => item.url) : null
      data['conserveAfterPic'] = conserveAfterPic.length > 0 ? conserveAfterPic.map(item => item.url) : null
    }

    Taro.showModal({
      title: '提示',
      content: '您要进行信息上报么？',
      success: function (res) {
        if (res.confirm) {
          setCanReport(false)
          setTimeout(() => {
            setCanReport(true)
          }, 3000) // 3秒内不可以重复点击
          Taro.showLoading({
            title: '上报中'
          })
          request.post(postReport(), data).then(res => {
            Taro.hideLoading()
            if (res.statusCode == 200 || res.statusCode == 204) {
              Taro.showToast({ title: '上报成功', icon: 'none', duration: 1500 })
              setTimeout(() => {
                Taro.reLaunch({
                  url: '/pages/home/index'
                });
              }, 1500)
            } else {
              Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
            }
          }, err => {
            Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
          })
        }
      }
    })
  }

  function handleInput({ detail: { value } }, type) {
    switch (type) {
      case 'roadSectionStart':
        setRoadSectionStart(value)
        if (value) {
          setRoadStartSelector(rRoadStartSelector.filter(item => item.includes(value)))
        } else {
          setRoadStartSelector(rRoadStartSelector)
        }
        break;
      case 'roadSectionEnd':
        setRoadSectionEnd(value)
        if (value) {
          setRoadEndSelector(rRoadEndSelector.filter(item => item.includes(value)))
        } else {
          setRoadEndSelector(rRoadEndSelector)
        }
        break;
      case 'address':
        setAddress(value)
        break;
      case 'content':
        setContent(value)
      default:
        break;
    }
  }

  function handleTypeChange(e) {
    setReportType(e.detail.value)
  }

  function handleImgChange(files, type) {
    switch (type) {
      case 'scenePic':
        setScenePic(files)
        break;
      case 'conserveBeforePic':
        setConserveBeforePic(files)
        break;
      case 'conserveUnderwayPic':
        setConserveUnderwayPic(files)
        break;
      case 'conserveAfterPic':
        setConserveAfterPic(files)
        break;
      default:
        break;
    }
  }
  function handleImgClick(index, file) {
    Taro.previewImage({
      urls: [file.url] // 需要预览的图片http链接列表
    })
  }

  function renderAddImg() {
    return (
      reportType === 'patrol' ?
        <View className='patrol-img'>
          现场图片：
          <AtImagePicker
            className='img-picker'
            count={3 - scenePic.length}
            showAddBtn={scenePic.length >= 3 ? false : true}
            files={scenePic}
            onChange={files => handleImgChange(files, 'scenePic')}
            onImageClick={handleImgClick}
          />
        </View> :
        <View className='conserve-img'>
          养护图片:
          <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 - conserveBeforePic.length}
            showAddBtn={conserveBeforePic.length >= 3 ? false : true}
            files={conserveBeforePic}
            onChange={files => handleImgChange(files, 'conserveBeforePic')}
            onImageClick={handleImgClick}
          />
          <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 - conserveUnderwayPic.length}
            showAddBtn={conserveUnderwayPic.length >= 3 ? false : true}
            files={conserveUnderwayPic}
            onChange={files => handleImgChange(files, 'conserveUnderwayPic')}
            onImageClick={handleImgClick}
          />
          <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 - conserveAfterPic.length}
            showAddBtn={conserveAfterPic.length >= 3 ? false : true}
            files={conserveAfterPic}
            onChange={files => handleImgChange(files, 'conserveAfterPic')}
            onImageClick={handleImgClick}
          />
        </View>
    )
  }

  function renderViewImg() {
    return (
      reportType === 'patrol' ?
        <View className='patrol-img'>
          现场图片：
          <View className='img-box'>
            {scenePic.map(item => (
              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
            ))}
          </View>
        </View> :
        <View className='conserve-img'>
          养护图片:
          <View className='horizontal-line hl-one'>
            <View className='circle c-one'></View>
            <View className='text t-one'>养护前</View>
          </View>
          <View className='img-box'>
            {conserveBeforePic.map(item => (
              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
            ))}
          </View>
          <View className='horizontal-line hl-two'>
            <View className='circle c-two'></View>
            <View className='text t-two'>养护中</View>
          </View>
          <View className='img-box'>
            {conserveUnderwayPic.map(item => (
              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
            ))}
          </View>
          <View className='horizontal-line hl-three'>
            <View className='circle c-three'></View>
            <View className='text t-three'>养护后</View>
          </View>
          <View className='img-box'>
            {conserveAfterPic.map(item => (
              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
            ))}
          </View>
        </View>
    )
  }

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

      <InputPicker
        title='工程类型：'
        placeholder='请选择工程类型'
        value={projectType}
        onInput={setProjectType}
        selector={rPrjTypeSelector}
        isView={isView}
      />
      <InputPicker
        title='所在道路：'
        placeholder='请选择或输入您所在的道路'
        value={road}
        onInput={setRoad}
        selector={rRoadSelector}
        isView={isView}
      />

      <View className='road-section'>
        <View className='title'>所属路段：</View>
        <Input
          className='input'
          type='text'
          placeholder={isView ? '' : '路段名称'}
          border={false}
          value={roadSectionStart}
          onInput={e => handleInput(e, 'roadSectionStart')}
          disabled={isView}
        />
        {
          isView &&
          <Picker
            mode='selector'
            range={roadStartSelector}
            onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])}
          >
            <Image src={arrowIcon} className='img-l' />
          </Picker>
        }
        <View>至&nbsp;</View>
        <Input
          className='input'
          type='text'
          placeholder={isView ? '' : '路段名称'}
          border={false}
          value={roadSectionEnd}
          onInput={e => handleInput(e, 'roadSectionEnd')}
          disabled={isView}
        />
        {
          isView &&
          <Picker
            mode='selector'
            range={roadEndSelector}
            onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])}
          >
            <Image src={arrowIcon} className='img-r' />
          </Picker>
        }
      </View>

      <View className='address'>
        <View className='title'>具体位置：</View>
        <Input
          className='input'
          type='text'
          placeholder={isView ? '' : '根据定位自动获取，可手动修改'}
          value={address}
          onInput={e => handleInput(e, 'address')}
          disabled={isView}
        />
      </View>

      <AtTextarea
        count={false}
        title='巡查内容：'
        placeholder={isView ? '' : '请输入巡查内容'}
        value={content}
        onChange={(v, e) => handleInput(e, 'content')}
        disabled={isView}
      />
      {
        isView ?
          renderViewImg() :
          renderAddImg()
      }
      {
        !isView && <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
      }
    </View>
  )
}

export default Index