import React, { useState } 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 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 [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 data = [
    {
      place: {
        name: '飞尚'
      },
      user: {
        name: '用户1'
      },
      time: '2022-7-1'
    }
  ]

  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 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 left'>
          <Image className='type-img' src={patrolIcon} />
          <View>巡查</View>
        </View>
        <View className='line'></View>
        <View className='item'>
          <Image className='type-img' src={conserveIcon} />
          <View>养护</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: '70px' }}>
        {
          data && data.length > 0 ? data && data.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.place.name}</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