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 } 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)

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

  const getDetail = () => {
    if (spotItem) {
      Taro.showLoading({ title: '加载中' })
      request.get(`${getRoadSpotDetail()}?previewId=${spotItem.id}&keyword=${keyword}`).then(res => {
        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 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'>里程：{item.road?.chainageMileage || '--'}</View>
      <View className='item at-row'>
        <View className='at-col-6'>养护次数（次）：{item.maintenanceCount}</View>
        <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>
    </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