import React, { useState, useEffect } from "react"
import Taro from "@tarojs/taro";
import { View, Input, Swiper, Image, SwiperItem, Text, ScrollView, Button } from "@tarojs/components"
import { Popup } from "@antmjs/vantui";
import Footer from "@/components/Footer";
import MyCard from "@/components/MyCard";
import NullCard from "@/components/NullCard";
import { useModel } from "@/store";
import { getBannerList } from "@/services/banner";
import { getJobList, toggleJob, overJob } from '@/services/job'
import positionImg from '@/assets/comm/position.png'
import searchImg from '@/assets/comm/search.png'
import orderImg from '@/assets/comm/orderList.png'
import PositionImg from '@/assets/job/positionImg.png'
import OverPop from '../OverPop'
import './style.less'


export default (props) => {
  const [imgList, setImgList] = useState([])
  const [jobList, setJobList] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const [isMore, setIsMore] = useState(false)
  const { address } = useModel('location')
  const [show, setShow] = useState(false)
  const [area, setArea] = useState()
  const [showOver, setShowOver] = useState(false)
  const [job, setJob] = useState()

  const handleSearch = (e) => {
    Taro.navigateTo({ url: `/pages/index/index?tab=1` });
  }
  const handleDetail = (val) => {
    Taro.navigateTo({ url: `/pages/orderDetail/index?id=${val}&job=1` });
  }
  // 上拉加载
  const handleScrollToLower = () => {
    setCurrentPage(currentPage + 1)
  }
  const handleWork = (val) => {
    setJob(val)
    if (val.status == 0) {
      setShow(true)
    } else {
      setShowOver(true)
    }
  }
  const onClose = () => {
    setShow(false)
    setJob()
  }
  const handleOk = () => {
    toggleJob(job.jobId, { mode: true }).then(() => {
      //目测有bug
      getJobList({ pageNum: currentPage }).then(res => {
        const lst = currentPage === 1 ? res.records || [] : jobList.concat(res.records || [])
        //长列表加载当下一页没有数据时
        if (res.records.length == 0 && currentPage != 1) {
          setIsMore(true)
          return
        }
        setJobList(lst)
        onClose()
      })
    })
  }
  const onOverClose = () => {
    setShowOver(false)
    setArea()
  }
  const handleOverOk = () => {
    //正整数或两位小数
    if (!isNaN(area)) {
      overJob(job.jobId, { ...job, area: area }).then(res => {
        Taro.showToast({
          title: '恭喜完成作业',
          icon: 'none',
        })
        getJobList({ pageNum: currentPage }).then(res2 => {
          const lst = currentPage === 1 ? res2.records || [] : jobList.concat(res2.records || [])
          //长列表加载当下一页没有数据时
          if (res2.records.length == 0 && currentPage != 1) {
            setIsMore(true)
            return
          }
          setJobList(lst)
          onOverClose()
        })
      })
    }
    else {
      Taro.showToast({
        title: '请输入正确的面积整数或最多两位小数',
        icon: 'none',
      })
    }
  }
  useEffect(() => {
    getJobList({ pageNum: currentPage }).then(res => {
      const lst = currentPage === 1 ? res.records || [] : jobList.concat(res.records || [])
      //长列表加载当下一页没有数据时
      if (res.records.length == 0 && currentPage != 1) {
        setIsMore(true)
        return
      }
      setJobList(lst)
    })
  }, [currentPage])
  useEffect(() => {
    getBannerList({ position: 'bannerWorker' })
      .then(res => {
        setImgList(res)
      }).catch(err => {
        Taro.showToast({
          title: '网络异常, 请刷新小程序重试',
          icon: 'none',
        })
      })
  }, [])
  return (
    <View className='orderIndex'>
      <View className='top'>
        <View className='left'>
          <Image src={positionImg} className='pImg' />
          <Text>邓州市</Text>
          <View className='icon' />
        </View>
        <View className='searchClass' onClick={handleSearch}>
          <Input type='text' disabled className='searchInput' placeholder='搜索关键字查询订单' />
          <Image src={searchImg} className='searchImg' />
        </View>
      </View>
      <ScrollView
        scrollY
        enhanced
        onScrollToLower={isMore ? '' : handleScrollToLower}
        style={{ height: 'calc(100% - 68px)' }}
      >
        <Swiper
          circular
          autoplay
          className='swiper'
        >
          {imgList.map((item, inx) => (
            <SwiperItem key={inx}>
              <Image src={item.thumb} mode='widthFix' className='storeImage' />
            </SwiperItem>
          ))}
        </Swiper>
        <View className='orderList'>
          <View className='head'>
            <Image className='headIcon' src={orderImg} />
            <Text className='title'>作业列表</Text>
          </View>
          {
            jobList.length === 0 ? <NullCard value='您还没有新的作业订单！' /> :
              jobList.map((item) => {
                return <MyCard job value={item} key={item.JobId} onClick={() => handleWork(item)} goDetail={() => handleDetail(item.jobId)} />
              })
          }
          {
            isMore && <Footer />
          }
        </View>
        <Popup
          show={show}
          onClose={onClose}
          className='tanchuang'
        >
          <Image src={PositionImg} className='pImg' />
          <View>当前位置在</View>
          <View>{address}</View>
          <Button className='btn' onClick={handleOk}>确认</Button>
        </Popup>
        
        <OverPop showOver={showOver} onOverClose={onOverClose} area={area} setArea={setArea} handleOverOk={handleOverOk} />
      </ScrollView>
    </View>
  )
}