import React, { useState, useEffect } from 'react';
import Taro, { useRouter } from '@tarojs/taro';
import { View, RadioGroup, Radio, Image, Input, Picker, Video } from '@tarojs/components';
import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
import InputPicker from '../components/inputPicker';
import InputPickers from '../components/inputPickers';
import VideoUpload from '../../components/uploads'
import request from '@/services/request';
import environment from '../../config';
import { getState } from '../../store/globalState';
import { postReport, getReportDetail, delReport, getRoadSection, postImage, getProject, postHandle } from '@/services/api';
import './index.scss';
import arrowIcon from '../../static/img/patrol/arrow-down.svg';

const { baseUrl, imgUrl } = environment;

const Index = () => {
  const userInfo = Taro.getStorageSync('userInfo') || {};
  const isSuperAdmin = userInfo && userInfo.username === 'SuperAdmin' ? true : false

  const router = useRouter()
  const { params: { type, kind, wait } } = router
  const isView = type === 'view' ? true : false

  const isPatrol = kind === 'patrol' || kind == 'conserve' ? true : false
  const isRoad = kind === 'road' ? true : false
  const isAnomaly = kind === 'anomaly' ? true : false

  const [reportType, setReportType] = useState(kind || 'patrol') // 上报类型
  const [projectType, setProjectType] = useState('') // 工程类型
  const [projectName, setProjectName] = 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 [longitude, setLongitude] = useState(0) // 经度
  const [latitude, setLatitude] = useState(0) // 纬度

  const [sceneImg, setSceneImg] = useState([]) // 现场图片七牛云url
  const [conserveBeforeImg, setConserveBeforeImg] = useState([]) // 养护前图片
  const [conserveUnderwayImg, setConserveUnderwayImg] = useState([]) // 养护中图片
  const [conserveAfterImg, setConserveAfterImg] = useState([]) // 养护后图片

  const [sourceRoadSel, setSourceRoadSel] = useState([])
  const [sourceRoadStartSel, setSourceRoadStartSel] = useState([])
  const [sourceRoadEndSel, setSourceRoadEndSel] = useState([])

  const [codeRoadSel, setCodeRoadSel] = useState([])
  const [roadList, setRoadList] = useState([])
  const [codeRoad, setCodeRoad] = useState('')
  const [projectList, setProjdetList] = useState([])
  const [handleCenter, setHandleCenter] = useState('')
  const [handlePic, setHandlePic] = useState([])
  const [handlePicPn, setHandlePicPn] = useState([])

  const prjType =
    isAnomaly ?
      [
        { text: '养护', value: 'conserve' },
        { text: '巡查', value: 'patrol' },
        { text: '在建', value: 'construction' },
      ]
      :
      [
        { text: '道路', value: 'road', onlyView: true },
        { text: '县道', value: 'countyRoad' },
        { text: '乡道', value: 'villageRoad' },
        { text: '村道', value: 'rusticRoad' },
        { text: '桥梁', value: 'bridge' },
        { text: '涵洞', value: 'culvert' },
        { text: '其他', value: 'other' },
      ]
  const prjTypeSelector = prjType.map(item => {
    return item.onlyView ? '' : item.text
  }).filter(item => item)
  // [
  //   // '道路',
  //   '县道', '乡道', '村道',
  //   '桥梁', '涵洞', '其他'
  // ]

  const [roadStartSel, setRoadStartSel] = useState([])
  const [roadEndSel, setRoadEndSel] = useState([])

  const [canReport, setCanReport] = useState(true)

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

  useEffect(() => {
    if (isRoad) {
      Taro.setNavigationBarTitle({ title: '在建项目' })
    } else if (wait == 'wait') {
      Taro.setNavigationBarTitle({ title: '待办事项' })
    } else if (isAnomaly) {
      Taro.setNavigationBarTitle({ title: '异常反馈' })
    } else if (kind == 'conserve') {
      Taro.setNavigationBarTitle({ title: '养护上报' })
    } else {
      Taro.setNavigationBarTitle({ title: '巡查上报' })
    }

    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
          let showPrjType = ''
          for (const item of prjType) {
            if (item.value === data.projectType) {
              showPrjType = item.text
              break
            }
          }
          setReportType(data.reportType)
          setProjectType(showPrjType || data.projectType)
          setProjectName(data.projectName)
          setRoad(data.road)
          setCodeRoad(data.codeRoad)
          setRoadSectionStart(data.roadSectionStart)
          setRoadSectionEnd(data.roadSectionEnd)
          setAddress(data.address)
          setContent(data.content)
          setScenePic(data.scenePic ? data.scenePic.map(item => ({ url: imgUrl + item })) : [])
          setConserveBeforePic(data.conserveBeforePic ? data.conserveBeforePic.map(item => ({ url: imgUrl + item })) : [])
          setConserveUnderwayPic(data.conserveUnderwayPic ? data.conserveUnderwayPic.map(item => ({ url: imgUrl + item })) : [])
          setConserveAfterPic(data.conserveAfterPic ? data.conserveAfterPic.map(item => ({ url: imgUrl + item })) : [])
        } else {
          Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
        }
      }, err => {
        Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
      })
    } else { // 填报
      Taro.showLoading({ title: '加载中' })
      let key = 'ODQBZ-3FZAU-6VIVL-2XXNM-F7CP7-WVFCY' // 写自己申请的key
      Taro.getLocation({
        type: 'wgs84',
        isHighAccuracy: true,
        highAccuracyExpireTime: 1000 * 6,
        success: function (res) {
          setLongitude(res.longitude)
          setLatitude(res.latitude)
          Taro.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${key}`,
            success: function (res) {
              // 根据自己项目需求获取res内容
              let addresscity = ''
              addresscity =
                res.data.result.address_component.province
                + res.data.result.address_component.city
                + res.data.result.address_component.district
                // + res.data.result.address_component.street_number
                + res.data.result.address_component.street
              // addresscity = res.data.result.formatted_addresses.standard_address
              let street = res.data.result.address_component.street
              setRoad(street)
              setAddress(addresscity)
            }
          })
        }
      })
      request.get(getRoadSection()).then(res => {
        Taro.hideLoading()
        if (res.statusCode == 200 || res.statusCode == 204) {
          const { data } = res
          let nextSourceRoadSel = []
          let nextSourceRoadStartSel = []
          let nextSourceRoadEndSel = []
          let nextCodeRoadSel = []
          data.map(item => {
            nextSourceRoadSel.push(item.routeName)
            nextSourceRoadStartSel.push(item.startingPlaceName)
            nextSourceRoadEndSel.push(item.stopPlaceName)
            nextCodeRoadSel.push(item.routeCode)
          })
          setSourceRoadSel(nextSourceRoadSel)
          setSourceRoadStartSel(nextSourceRoadStartSel)
          setSourceRoadEndSel(nextSourceRoadEndSel)
          setCodeRoadSel(nextCodeRoadSel)
          setRoadList(data)
        } else {
          Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
        }
      }, err => {
        Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
      })
      request.get(getProject()).then(res => {
        if (res.statusCode == 200 || res.statusCode == 204) {
          const { data } = res
          let projectList = []
          if (data.length) {
            data.forEach(e => {
              projectList.push(e.entryName)
            })
          }
          setProjdetList(projectList)
        }
      })
    }
  }, [])

  useEffect(() => {
    setRoadStartSel(sourceRoadStartSel)
    setRoadEndSel(sourceRoadEndSel)
  }, [sourceRoadStartSel, sourceRoadEndSel])
  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 (
      (isPatrol && (!projectType || !road))
      || (isAnomaly && !road)
    ) {
      Taro.showToast({ title: '请完善必填信息', icon: 'none' })
      return
    }

    if ((isPatrol || isAnomaly) && prjTypeSelector.indexOf(projectType) === -1) {
      Taro.showToast({ title: isAnomaly ? '反馈类型错误' : '工程类型错误', icon: 'none' })
      return
    }
    if (content.length > 50) {
      Taro.showToast({ title: '内容字数不能超过50', icon: 'none' })
      return
    }
    if (isRoad && !projectName) {
      Taro.showToast({ title: '请完善项目名称', icon: 'none' })
      return
    }
    const reportProjectType = prjType.find(p => p.text == projectType)?.value || ''


    let data = {
      reportType: isPatrol ? reportType : kind,
      projectType: reportProjectType,
      road,
      roadSectionStart,
      roadSectionEnd,
      address,
      content,
      longitude,
      latitude,
      codeRoad,
      projectName,
      handleState: isAnomaly ? '待处理' : undefined,
    }
    if (reportType === 'patrol' || isAnomaly || isRoad) {
      data['scenePic'] = sceneImg
    } else {
      data['conserveBeforePic'] = conserveBeforeImg
      data['conserveUnderwayPic'] = conserveUnderwayImg
      data['conserveAfterPic'] = conserveAfterImg
    }
    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.navigateBack()
              }, 1500)
            } else {
              Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
            }
          }, err => {
            Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
          })
        }
      }
    })
  }

  function deleteReport() {
    Taro.showModal({
      title: '提示',
      content: '确定删除吗？',
      success: function (res) {
        if (res.confirm) {
          Taro.showLoading({
            title: '删除中'
          })
          request.del(delReport(router.params.id)).then(res => {
            Taro.hideLoading()
            if (res.statusCode == 200 || res.statusCode == 204) {
              Taro.showToast({ title: '删除成功', icon: 'none', duration: 1500 })
              setTimeout(() => {
                Taro.navigateBack()
              }, 1000)
            } 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) {
          setRoadStartSel(sourceRoadStartSel.filter(item => item && item.includes(value)))
        } else {
          setRoadStartSel(sourceRoadStartSel)
        }
        break;
      case 'roadSectionEnd':
        setRoadSectionEnd(value)
        if (value) {
          setRoadEndSel(sourceRoadEndSel.filter(item => item && item.includes(value)))
        } else {
          setRoadEndSel(sourceRoadEndSel)
        }
        break;
      case 'address':
        setAddress(value)
        break;
      case 'content':
        setContent(value)
        break;
      case "projectName":
        setProjectName(value)
        break;
      case "wait":
        setHandleCenter(value)
        break;
      default:
        break;
    }
  }

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

  function handleImgChange(files, operationType, index, type) {
    if (operationType === 'remove') {
      setImg(false)
    }
    function setImg(isAdd, url) {
      switch (type) {
        case 'scenePic':
          let nextImg = sceneImg
          if (isAdd) {
            nextImg.push(url)
          } else {
            nextImg.splice(index, 1)
          }
          setSceneImg(nextImg)
          setScenePic(files)
          break;
        case 'wait':
          let handlPicImg = handlePicPn
          if (isAdd) {
            handlPicImg.push(url)
          } else {
            handlPicImg.splice(index, 1)
          }
          setHandlePicPn(handlPicImg)
          setHandlePic(files)
          break;
        case 'conserveBeforePic':
          let nextConserveBeforeImg = conserveBeforeImg
          if (isAdd) {
            nextConserveBeforeImg.push(url)
          } else {
            nextConserveBeforeImg.splice(index, 1)
          }
          setConserveBeforeImg(nextConserveBeforeImg)
          setConserveBeforePic(files)
          break;
        case 'conserveUnderwayPic':
          let nextConserveUnderwayImg = conserveUnderwayImg
          if (isAdd) {
            nextConserveUnderwayImg.push(url)
          } else {
            nextConserveUnderwayImg.splice(index, 1)
          }
          setConserveUnderwayImg(nextConserveUnderwayImg)
          setConserveUnderwayPic(files)
          break;
        case 'conserveAfterPic':
          let nextConserveAfterImg = conserveAfterImg
          if (isAdd) {
            nextConserveAfterImg.push(url)
          } else {
            nextConserveAfterImg.splice(index, 1)
          }
          setConserveAfterImg(nextConserveAfterImg)
          setConserveAfterPic(files)
          break;
        default:
          break;
      }
    }
    if (operationType === 'add' && files.length > 0) {
      Taro.showLoading({ title: '上传中' })
      let i = 0
      switch (type) {
        case 'scenePic':
          i = scenePic.length
          break;
        case 'conserveBeforePic':
          i = conserveBeforePic.length
          break;
        case 'conserveUnderwayPic':
          i = conserveUnderwayPic.length
          break;
        case 'conserveAfterPic':
          i = conserveAfterPic.length
          break;
        default:
          break;
      }
      for (i; i < files.length; i++) {
        const tempFilePaths = files[i].url
        let token = getState('token') || Taro.getStorageSync('token')
        Taro.uploadFile({
          url: `${baseUrl}${postImage()}?token=${token}`,
          filePath: tempFilePaths,
          name: 'file',
          success: (res) => {
            if (i === files.length) {
              Taro.hideLoading();
            }
            if (res.statusCode == 200) {
              setImg(true, JSON.parse(res.data).key)
            } else {
              Taro.showToast({ title: '上传失败，请重试', icon: 'error' })
            }
          }
        });
      }
    }
  }

  function handleImgClick(index, file) {
    Taro.previewImage({
      urls: [file.url] // 需要预览的图片http链接列表
    })
  }
  useEffect(() => {
    if (!isView) {
      let newRoadList = roadList.filter(e => e.routeName.match(road))
      let codeRoadSel = []
      if (newRoadList.length && road != '') {
        newRoadList.forEach((e, index) => {
          codeRoadSel.push(e.routeCode)
        })
      }
      setCodeRoadSel(codeRoadSel)
      if (codeRoadSel.length) {
        setCodeRoad(codeRoadSel[0])
      } else {
        setCodeRoad('')
      }
    }
  }, [road])
  function handleOk() {
    if (!canReport) { return }
    let str = handleCenter.trim()
    if (!str) {
      Taro.showToast({ title: '请完善处理内容', icon: 'none' })
      return
    }
    if (str.length > 50) {
      Taro.showToast({ title: '内容字数不能超过50', icon: 'none' })
      return
    }
    let handlePicList = []
    if(handlePic.length){
      handlePic.forEach(e=>{
        handlePicList.push(e.url)
      })
    }
    let data = {
      handleContent: str,
      handlePic: handlePicList,
      handleState:'已处理'
    }
    Taro.showModal({
      title: '提示',
      content: '您要进行处理提交吗？',
      success: function (res) {
        if (res.confirm) {
          setCanReport(false)
          setTimeout(() => {
            setCanReport(true)
          }, 3000) // 3秒内不可以重复点击
          Taro.showLoading({
            title: '提交中'
          })
          request.post(postHandle(userInfo.id), data).then(res => {
            Taro.hideLoading()
            if (res.statusCode == 200 || res.statusCode == 204) {
              Taro.showToast({ title: '提交成功', icon: 'none', duration: 1500 })
              setTimeout(() => {
                Taro.navigateBack()
              }, 1500)
            } else {
              Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
            }
          }, err => {
            console.log(err);
            Taro.showToast({ title: err.message || '请求出错123', icon: 'none' })
          })
        }
      }
    })
  }
  return (
    <View className='patrol'>
      {/* {
        (!isSuperAdmin || isView)
        && !isRoad && !isAnomaly
        &&
        <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>
      } */}

      {
        isPatrol ?
          <InputPicker
            title='道路类型：'
            placeholder='请选择道路类型'
            value={projectType}
            onInput={setProjectType}
            selector={prjTypeSelector}
            isView={isView}
          /> : ''
      }

      {
        isAnomaly ?
          <InputPicker
            title='反馈类型：'
            placeholder='请选择反馈类型'
            value={projectType}
            onInput={setProjectType}
            selector={prjTypeSelector}
            isView={isView}
            onlySelect={true}
          /> : ''
      }

      {/* {
        isRoad ?
          <View className='address'>
            <View className='title'>项目名称：</View>
            <Input
              className='input'
              type='text'
              placeholder={isView ? '' : '请输入项目名称'}
              value={projectName}
              onInput={e => handleInput(e, 'projectName')}
              disabled={isView}
            />
          </View> : ''
      } */}
      {
        isRoad ?
          <InputPickers
            key={789} // 添加key保证selector更新重新渲染
            title='项目名称：'
            value={projectName}
            placeholder='请选择或输入项目名称'
            onInput={setProjectName}
            selector={projectList}
            isView={isView}
          /> : ''
      }

      {
        isPatrol || isAnomaly ?
          <InputPicker
            key={123} // 添加key保证selector更新重新渲染
            title='所在道路：'
            placeholder='请选择或输入您所在的道路'
            value={road}
            onInput={setRoad}
            selector={sourceRoadSel}
            isView={isView}
          /> : ''
      }
      {
        isPatrol || isAnomaly ?
          <InputPickers
            key={456} // 添加key保证selector更新重新渲染
            title='线路编码：'
            value={codeRoad}
            onInput={setCodeRoad}
            selector={codeRoadSel}
            isView={isView}
          /> : ''
      }

      {
        isPatrol || isAnomaly ?
          <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={roadStartSel}
                onChange={e => setRoadSectionStart(roadStartSel[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={roadEndSel}
                onChange={e => setRoadSectionEnd(roadEndSel[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
        title='巡查内容：'
        placeholder={isView ? '' : '请输入具体内容'}
        value={content}
        onChange={(v, e) => handleInput(e, 'content')}
        disabled={isView}
        maxLength={50}
      />
      {
        reportType === 'patrol' || isRoad || isAnomaly ?
          <View className='patrol-img'>
            现场图片：
            {
              isView ?
                <View className='img-box'>
                  {scenePic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </View> :
                <AtImagePicker
                  className='img-picker'
                  count={3 - scenePic.length}
                  showAddBtn={scenePic.length >= 3 ? false : true}
                  files={scenePic}
                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'scenePic')}
                  onImageClick={handleImgClick}
                />
            }

            {/* <Video
              id='video'
              src='https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
              poster='../../static/img/date.png'
              initialTime={0}
              controls={true}
              autoplay={false}
              loop={false}
              muted={false}
            /> */}

            {/* <AtButton onClick={() => {
              Taro.chooseMedia({
                sourceType: ['album', 'camera'], mediaType: ['image', 'video'],
                camera: 'back',
                success: function (res) {
                  Taro.showLoading({ title: '上传中' })
                  const tempFilePaths = res.tempFilePath
                  let token = getState('token') || Taro.getStorageSync('token')
                  Taro.uploadFile({
                    url: `${baseUrl}${postImage()}?token=${token}`,
                    filePath: tempFilePaths,
                    name: 'file',
                    success: (res) => {
                      Taro.hideLoading();
                      if (res.statusCode == 200) {
                        // setImg(true, JSON.parse(res.data).key)
                      } else {
                        Taro.showToast({ title: '上传失败，请重试', icon: 'error' })
                      }
                    }
                  });
                }
              })
            }}>
              添加视频
            </AtButton> */}
          </View> :
          <View className='conserve-img'>
            养护图片:
            <View className='horizontal-line hl-one'>
              <View className='circle c-one'></View>
              <View className='text t-one'>养护前</View>
            </View>
            {
              isView ?
                <View className='img-box'>
                  {conserveBeforePic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </View> :
                <AtImagePicker
                  className='img-picker'
                  count={3 - conserveBeforePic.length}
                  showAddBtn={conserveBeforePic.length >= 3 ? false : true}
                  files={conserveBeforePic}
                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'conserveBeforePic')}
                  onImageClick={handleImgClick}
                />
            }

            <View className='horizontal-line hl-two'>
              <View className='circle c-two'></View>
              <View className='text t-two'>养护中</View>
            </View>
            {
              isView ?
                <View className='img-box'>
                  {conserveUnderwayPic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </View> :
                <AtImagePicker
                  className='img-picker'
                  count={3 - conserveUnderwayPic.length}
                  showAddBtn={conserveUnderwayPic.length >= 3 ? false : true}
                  files={conserveUnderwayPic}
                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'conserveUnderwayPic')}
                  onImageClick={handleImgClick}
                />
            }

            <View className='horizontal-line hl-three'>
              <View className='circle c-three'></View>
              <View className='text t-three'>养护后</View>
            </View>
            {
              isView ?
                <View className='img-box'>
                  {conserveAfterPic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </View> :
                <AtImagePicker
                  className='img-picker'
                  count={3 - conserveAfterPic.length}
                  showAddBtn={conserveAfterPic.length >= 3 ? false : true}
                  files={conserveAfterPic}
                  onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'conserveAfterPic')}
                  onImageClick={handleImgClick}
                />
            }
          </View>
      }
      {
        isView ?
          isSuperAdmin &&
          <AtButton type='primary' className='del-btn' onClick={deleteReport}>删除</AtButton>
          :
          <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
      }
      {
        wait == 'wait' ? <view>
          <view className='patrol-img'><text style={{ color: 'red' }}>*</text>处理内容：</view>
          <AtTextarea
            title='处理内容：'
            // placeholder={isView ? '' : '请输入具体内容'}
            placeholder='请输入处理内容'
            value={handleCenter}
            onChange={(v, e) => handleInput(e, 'wait')}
            // disabled={isView}
            maxLength={50}
          />
          <View className='patrol-img'>
            处理图片：
            {
              // isView ?
              //   <View className='img-box'>
              //     {scenePic.map(item => (
              //       <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
              //     ))}
              //   </View> :
              <AtImagePicker
                className='img-picker'
                count={3 - handlePic.length}
                showAddBtn={handlePic.length >= 3 ? false : true}
                files={handlePic}
                onChange={(files, operationType, index) => handleImgChange(files, operationType, index, 'wait')}
                onImageClick={handleImgClick}
              />
            }
            <AtButton type='primary' className='sub-btn' onClick={handleOk}>提交</AtButton>
          </View>
        </view> : ''
      }
    </View>
  )
}

export default Index