import React, { useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Input, Picker, ScrollView } from '@tarojs/components'
import { AtButton, AtIcon } from 'taro-ui'
import { NoData } from '@/components/index'
import moment from 'moment'
import request from '@/services/request'
import { getRoadSpotList } from '@/services/api'
import './index.scss'

function Index() {
  // const pageSize = 10
  // const count = 0
  // const [page, setPage] = useState(1)
  const [startTime, setStartTime] = useState('')
  const [endTime, setEndTime] = useState('')
  const [roadSpotList, setRoadSpotList] = useState([])

  useDidShow(() => {
    getSpotList()
  })

  const getSpotList = () => {
    request.get(`${getRoadSpotList()}?startTime=${startTime}&endTime=${endTime}`)
      .then(res => {
        if (res.statusCode === 200) {
          setRoadSpotList(res.data)
        }
      })
  }

  const resetTime = () => {
    setStartTime('')
    setEndTime('')
  }

  const navigateTo = (url) => {
    Taro.navigateTo({ url })
  }

  const onScrollToLower = (e) => {
    console.log(e)
  }

  return (
    <View className='page'>
      <View className='flex spot-check-filter-box'>
        <Picker
          mode='date'
          onChange={e => setStartTime(e.detail.value)}
        >
          <View className='flex'>
            <AtIcon value='calendar' size='20' color='#999' />
            <Input className='input' placeholder='开始日期' disabled value={startTime} />
          </View>
        </Picker>
        <Picker
          mode='date'
          onChange={e => setEndTime(e.detail.value)}
        >
          <View className='flex'>
            <AtIcon value='calendar' size='20' color='#999' />
            <Input className='input' placeholder='结束日期' disabled value={endTime} />
          </View>
        </Picker>
        <AtButton
          type='primary'
          size='small'
          circle
          onClick={getSpotList}
        >查询</AtButton>
        <AtButton
          className='reset-bth'
          type='secondary'
          size='small'
          circle
          onClick={resetTime}
        >重置</AtButton>
      </View>

      <ScrollView
        className='scrollview'
        scrollY
        scrollWithAnimation
        scrollTop={0}
        onScrollToLower={onScrollToLower}
        enhanced
        pagingEnabled
      >
        {roadSpotList.length
          ? roadSpotList.map((item, index) => <View
            key={item.id}
            className='card'
            onClick={() => navigateTo(`/packages/maintenanceSpotCheck/spotCheckRoad/index?item=${encodeURIComponent(JSON.stringify(item))}&isOld=${index !== 0}`)}
          >
            <View className='item'>抽查县道比例（%）：{item.countyPercentage}</View>
            <View className='item'>抽查县道（公里）：{item.countryMil?.toFixed(3)}</View>
            <View className='item'>抽查乡道（公里）：{item.townMil?.toFixed(3)}</View>
            <View className='item'>抽查村道（公里）：{item.villageMil?.toFixed(3)}</View>
            <View className='item'>抽查日期：{moment(item.date).format('YYYY-MM-DD')}</View>
          </View>)
          : <View style={{ paddingTop: 100 }}><NoData /></View>}
      </ScrollView>
      {roadSpotList.length && !roadSpotList[0].abstractFinish
        ? <AtButton
          className='to-start-btn'
          type='primary'
          onClick={() => navigateTo(`/packages/maintenanceSpotCheck/startSpotCheck/index?item=${encodeURIComponent(JSON.stringify(roadSpotList[0]))}`)}
        >继续抽查</AtButton>
        : <AtButton
          className='to-start-btn'
          type='primary'
          onClick={() => navigateTo('/packages/maintenanceSpotCheck/startSpotCheck/index')}
        >发起抽查</AtButton>}
    </View>
  )
}

export default Index