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 [inputSite, setInputSite] = useState('')
  const [page, setPage] = useState(0)
  const [total, setTotal] = useState(0)
  const [num, setNum] = useState(Math.random())
  const [systemInfo, setSystemInfo] = useState('')

  const userInfo = Taro.getStorageSync('userInfo') || {};

  function dealError(error) {
    Taro.showToast({
      title: error,
      icon: 'none',
      duration: 1500
    });
    throw new Error(error);
  }
  useEffect(() => {
    request.get(getReportList(), {}, { hideErrorToast: true, hideLoading: true }).then(res => {
      if (res.statusCode == 200) {
        console.log(res);
        setListData(res.data)
        return res.data;
      } else {
        dealError(res.data.message || '请求出错');
      }
    }, err => {
      dealError(err.message || '请求出错');
    });
  }, [])

  useDidShow(() => {
    let refresh = Taro.getStorageSync('refresh'); // 返回列表需要刷新
    if (refresh) {
      setPage(0)
      setNum(Math.random())
      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 = () => {
    setPage(0)
    setListData([]);
    setTotal(0);
    setNum(Math.random())
  }

  const handleInput = e => {
    setInputSite(e.detail.value);
    if (!e.detail.value) {
      setPage(0)
      setListData([]);
      setTotal(0);
      setNum(Math.random())
    }
  }

  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={inputSite} placeholder='请输入场所名称' onConfirm={handleConfirm} onInput={handleInput} />
        </View>
      </View>

      <View style={{ marginTop: '110px' }}>
        {
          listData && listData.length > 0 ? listData && listData.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.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