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

const Index = () => {
  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 rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
  const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']

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

  useEffect(() => {
    setRoadStartSelector(rRoadStartSelector)
    setRoadEndSelector(rRoadEndSelector)
  }, [])

  function report() {
    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)
    } else {
      data['conserveBeforePic'] = conserveBeforePic.length > 0 && conserveBeforePic.map(item => item.url)
      data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 && conserveUnderwayPic.map(item => item.url)
      data['conserveAfterPic'] = conserveAfterPic.length > 0 && conserveAfterPic.map(item => item.url)
    }
    for (var key in data) {
      if (!data[key]) {
        Taro.showToast({ title: '请完善信息', icon: 'none' })
        return
      }
    }
    if (rPrjTypeSelector.indexOf(data.projectType) === -1) {
      Taro.showToast({ title: '工程类型错误', icon: 'none' })
      return
    }
    request.post(postReport(), data).then(res => {
      if (res.statusCode == 200 || res.statusCode == 204) {
        Taro.showToast({ title: '上报成功', icon: 'none' })
      } 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链接列表
    })
  }

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

  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'
                >
                  {item.text}
                </Radio>
              )
            })
          }
        </RadioGroup>
      </View>

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

      <View className='road-section'>
        <View className='title'>所属路段：</View>
        <Input
          className='input'
          type='text'
          placeholder='路段名称'
          border={false}
          value={roadSectionStart}
          onInput={e => handleInput(e, 'roadSectionStart')}
        />
        <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='路段名称'
          border={false}
          value={roadSectionEnd}
          onInput={e => handleInput(e, 'roadSectionEnd')}
        />
        <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='根据定位自动获取，可手动修改'
          value={address}
          onInput={e => handleInput(e, 'address')}
        />
      </View>

      <AtTextarea
        count={false}
        title='巡查内容：'
        placeholder='请输入巡查内容'
        value={content}
        onChange={(v, e) => handleInput(e, 'content')}
      />
      {
        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>
      }
      <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
    </View>
  )
}

export default Index