import React, { useEffect, useState } from 'react'
import Taro, { useRouter, useDidShow } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtButton, AtSearchBar } from 'taro-ui'
import { NoData } from '@/components/index'
import Skeleton from '../components/skeleton'
import moment from 'moment'
import request from '@/services/request'
import { getRoadSpotDetail, roadSpotNextUrl, getRoadSpotList } from '@/services/api'
import './index.scss'

function Index() {
  const { item, isOld } = useRouter().params
  const spotItem = item ? JSON.parse(decodeURIComponent(item)) : null

  const [keyword, setKeyword] = useState('')
  const [roadDetailList, setRoadDetailList] = useState([])
  const [isNoData, setIsNoData] = useState(false)
  const [nextAbstract, setNextAbstract] = useState(spotItem.nextAbstract)

  useDidShow(() => {
    getDetail()
  })

  const getDetail = (showLoading = true) => {
    if (spotItem) {
      showLoading && Taro.showLoading({ title: '加载中' })
      request.get(`${getRoadSpotDetail()}?previewId=${spotItem.id}&keyword=${keyword}`).then(res => {
        showLoading && Taro.hideLoading()
        if (res.statusCode === 200) {
          setRoadDetailList(res.data)
        } else {
          Taro.showToast({ title: '获取详情失败', icon: 'error' })
        }
        if (res.data?.length) {
          setIsNoData(false)
        } else {
          setIsNoData(true)
        }
      })
    }
  }

  const getSpotList = () => {
    request.get(`${getRoadSpotList()}`)
      .then(res => {
        if (res.statusCode === 200) {
          setNextAbstract(res.data[0].nextAbstract)
        }
      })
  }

  const renderList = () => {
    return roadDetailList.length ? roadDetailList.map(item => <View key={item.id} className='card'>
      <View className='item'>道路类型：{item.road?.level ? (item.road?.level + '道') : '--'}</View>
      <View className='item'>路线名称：{item.road?.routeName || '--'}</View>
      <View className='item at-row'>
        <View className='at-col-6'>路线代码：{item.road?.routeCode || '--'}</View>
        <View className='at-col-6'>路段序号：{item.road?.sectionNo || '--'}</View>
      </View>
      <View className='item at-row'>
        <View className='at-col-6'>起点地名：{item.road?.startingPlaceName || '--'}</View>
        <View className='at-col-6'>止点地名：{item.road?.stopPlaceName || '--'}</View>
      </View>
      <View className='item at-row'>
        <View className='at-col-6'>里程：{item.road?.chainageMileage || '--'}</View>
        <View className='at-col-6'>养护次数（次）：{item.maintenanceCount}</View>
      </View>
      <View className='item at-row'>
        <View className='at-col-3'>
          <AtButton
            className='edit-btn'
            type='primary'
            size='small'
            onClick={() => Taro.navigateTo({ url: `/packages/maintenanceSpotCheck/spotCheckRoadDetail/index?detail=${encodeURIComponent(JSON.stringify(item))}` })}
          >详情</AtButton>
        </View>
        <View className='at-col-3'>
          <AtButton
            className='edit-btn'
            type='primary'
            size='small'
            onClick={() => Taro.navigateTo({ url: `/packages/maintenanceSpotCheck/spotChange/index?detail=${encodeURIComponent(JSON.stringify(item))}&spot=${encodeURIComponent(JSON.stringify(spotItem))}` })}
            disabled={
              isOld === 'true' ||
              item.roadSpotCheckPreview?.roadSpotCheckChangeLogs?.some(l => l.changeRoadId == item.roadId)
            }
          >调整</AtButton>
        </View>
        <View className='at-col-6'>
          <AtButton
            className='next-btn'
            type='primary'
            size='small'
            onClick={() => {
              Taro.showModal({
                title: '提示',
                content: '确认纳入下次抽查？',
                success: function (res) {
                  if (res.confirm) {
                    request.post(roadSpotNextUrl(), {
                      previewId: spotItem?.id,
                      level: item.road?.level,
                      roadId: item.roadId
                    }).then(res => {
                      Taro.showLoading()
                      if (res.statusCode === 200 || res.statusCode === 204) {
                        Taro.hideLoading()
                        Taro.showToast({ title: '纳入下次抽查成功', icon: 'success' })
                        getSpotList()
                        getDetail(false)
                      } else {
                        Taro.showToast({ title: '纳入下次抽查失败', icon: 'error' })
                      }
                    })
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                }
              })
            }}
            disabled={
              isOld === 'true' || (
                nextAbstract?.town?.includes(item.roadId)
                || nextAbstract?.village?.includes(item.roadId)
                || nextAbstract?.county?.includes(item.roadId)
              )
            }
          >纳入下次抽查</AtButton>
        </View>
      </View>
    </View>) : <Skeleton length={3} />
  }

  const renderNoData = () => {
    return <View style={{ marginTop: 100 }}><NoData /></View>
  }

  return (<View className='page'>
    <AtSearchBar
      placeholder='道路名称关键字'
      showActionButton
      value={keyword}
      onChange={v => setKeyword(v)}
      onActionClick={getDetail}
    />
    <View className='top flex'>抽查日期：{moment(spotItem.date).format('YYYY-MM-DD')}</View>
    {isNoData ? renderNoData() : renderList()}
  </View>)
}

export default Index