import React, { useState, useEffect } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Picker, Input, Image } from '@tarojs/components'
import moment from 'moment'
import './index.scss'
import NoData from '@/components/no-data/noData'
import request from '@/services/request'
import { getReportList } from '@/services/api';
import chevronDown from '../../static/img/patrolView/chevron-down.png'
import searchIcon from '../../static/img/patrolView/search.png'
import cardImg from '../../static/img/patrolView/card-img.png'
import patrolIcon from '../../static/img/patrolView/patrol.svg'
import patrolActiveIcon from '../../static/img/patrolView/patrol-active.svg'
import conserveIcon from '../../static/img/patrolView/conserve.svg'
import conserveActiveIcon from '../../static/img/patrolView/conserve-active.svg'

function Index() {
  const [isPatrol, setIsPatrol] = useState(true)
  const [datePicker, setDatePicker] = useState(moment().format('YYYY-MM-DD'))
  const [listData, setListData] = useState([])
  const [showListData, setShowListData] = useState([])
  const [filterText, setFilterText] = useState('')
  const [systemInfo, setSystemInfo] = useState('')

  useEffect(() => {
    getList()
  }, [datePicker])

  useEffect(() => {
    setShowListData(listData.filter(item => isPatrol ? item.reportType === 'patrol' : item.reportType === 'conserve'))
  }, [isPatrol])

  function dealError(error) {
    Taro.showToast({
      title: error,
      icon: 'none',
      duration: 1500
    });
    throw new Error(error);
  }
  const getList = () => {
    Taro.showLoading({ title: '加载中' })
    request.get(
      getReportList(),
      { startTime: datePicker + ' 00:00:00', endTime: datePicker + ' 23:59:59' },
      { hideErrorToast: true, hideLoading: true }
    ).then(res => {
      Taro.hideLoading()
      if (res.statusCode == 200) {
        setListData(res.data)
        setShowListData(res.data.filter(item => isPatrol ? item.reportType === 'patrol' : item.reportType === 'conserve'))
        return res.data;
      } else {
        dealError(res.data.message || '请求出错');
      }
    }, err => {
      dealError(err.message || '请求出错');
    });
  }

  useDidShow(() => {
    let refresh = Taro.getStorageSync('refresh'); // 返回列表需要刷新
    if (refresh) {
      Taro.removeStorageSync('refresh'); // 返回列表需要刷新
    }
    Taro.getSystemInfo({
      success: (res) => {
        // windows | mac为pc端
        // android | ios为手机端
        setSystemInfo(res.platform);
      }
    });
  })

  const onTypeChange = bool => {
    setIsPatrol(bool)
  }

  const onDateChange = e => {
    setDatePicker(e.detail.value);
  }

  const handleConfirm = e => {
    let nextList = listData.filter(item => isPatrol ? item.reportType === 'patrol' : item.reportType === 'conserve')
    nextList = nextList.filter(item => item.road.includes(e.detail.value))
    setShowListData(nextList)
  }

  const handleInput = e => {
    setFilterText(e.detail.value);
    if (!e.detail.value) {
      setShowListData(listData.filter(item => isPatrol ? item.reportType === 'patrol' : item.reportType === 'conserve'));
    }
  }

  const handleDetail = index => {
    Taro.navigateTo({ url: `/packages/patrol/index?type=view&id=${showListData[index].id}` })
  }

  return (
    <View>
      <View className='type-box'>
        <View className='item' onClick={() => onTypeChange(true)}>
          <Image className='type-img' src={isPatrol ? patrolActiveIcon : patrolIcon} />
          <View style={{ color: isPatrol ? '#346FC2' : '#999999' }}>巡查</View>
        </View>
        <View className='line'></View>
        <View className='item' onClick={() => onTypeChange(false)}>
          <Image className='type-img' src={isPatrol ? conserveIcon : conserveActiveIcon} />
          <View style={{ color: isPatrol ? '#999999' : '#346FC2' }}>养护</View>
        </View>
      </View>
      <View className='filter-box'>
        <View className='filter-item'>
          <View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>日期：</View>
          <Picker
            className='picker'
            style={{ overflow: 'hidden', float: 'left' }}
            mode='date'
            end={(systemInfo == 'windows' || systemInfo == 'mac')
              ? moment().add(1, 'd').format('YYYY-MM-DD')
              : moment().format('YYYY-MM-DD')} onChange={onDateChange}
          >
            <View className='filter-name'>{datePicker || '请选择'}</View>
            <Image className='filter-img' src={chevronDown} />
          </Picker>
        </View>
        <View class='head-search'>
          <Image className='search-img' src={searchIcon} />
          <Input class='heard-search-input' value={filterText} placeholder='请输入道路名称' onConfirm={handleConfirm} onInput={handleInput} />
        </View>
      </View>

      <View style={{ marginTop: '110px' }}>
        {
          showListData && showListData.length > 0 ? showListData && showListData.map((e, index) => {
            return (
              <View className='cardBox' key={index} onClick={() => handleDetail(index)}>
                <View className='card-item' >
                  <Image className='card-bg' src={cardImg} />
                  <View className='card-position'>
                    <View className='card-title'>{e.road}</View>
                    <View style={{ float: 'left', width: '100%', fontSize: '28rpx', marginTop: '16rpx' }}>
                      <View style={{ float: 'left' }}>填报人：</View>
                      <View style={{ float: 'left' }}>{e.user && e.user.name}</View>
                    </View>
                    <View className='card-date'>{moment(e.time).format('YYYY-MM-DD HH:mm:ss')}</View>
                  </View>
                </View>
              </View>
            )
          }) : <NoData top='400rpx'></NoData>
        }
      </View>
    </View>
  )
}
export default Index