import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'
import {
  Button,
  TextArea,
  Cell,
  Input,
} from '@nutui/nutui-react-taro'
import {addHjmViolation} from "@/api/hjm/hjmViolation";
import {HjmViolation} from "@/api/hjm/hjmViolation/model";

/**
 * 添加违章记录页面
 */
function Add() {
  const [loading, setLoading] = useState<boolean>(false)
  const [lastSubmitTime, setLastSubmitTime] = useState<number>(0) // 最后提交时间
  const [formData, setFormData] = useState<HjmViolation>({
    code: '',
    title: '',
    money: '',
    score: '',
    comments: ''
  })

  // 初始化页面数据
  const initPageData = async () => {
    try {
      setLoading(false)
    } catch (error) {
      console.error('初始化失败:', error)
      Taro.showToast({
        title: '初始化失败',
        icon: 'none'
      })
    }
  }


// 提交表单
  const handleSubmit = async () => {
    // 防止重复提交 - 检查loading状态
    if (loading) {
      Taro.showToast({
        title: '正在提交中，请稍候...',
        icon: 'loading'
      })
      return
    }

    // 防止快速连续点击 - 2秒内不允许重复提交
    const now = Date.now()
    if (now - lastSubmitTime < 2000) {
      Taro.showToast({
        title: '请勿频繁提交',
        icon: 'none'
      })
      return
    }
    setLastSubmitTime(now)

    // 表单验证
    if (!formData.code?.trim()) {
      Taro.showToast({
        title: '请输入车辆编号',
        icon: 'none'
      })
      return
    }

    if (!formData.title?.trim()) {
      Taro.showToast({
        title: '请输入违章标题',
        icon: 'none'
      })
      return
    }

    // if (!formData.money?.trim()) {
    //   Taro.showToast({
    //     title: '请输入处罚金额',
    //     icon: 'none'
    //   })
    //   return
    // }
    //
    // if (!formData.score?.trim()) {
    //   Taro.showToast({
    //     title: '请输入扣分',
    //     icon: 'none'
    //   })
    //   return
    // }

    setLoading(true)

    // 构建提交数据
    const submitData: HjmViolation = {
      ...formData,
      status: 0 // 0未处理, 1已处理
    }

    addHjmViolation(submitData).then((res) => {
      console.log(res)
      Taro.showToast({
        title: '提交成功',
        icon: 'success'
      })
      // 清空表单
      setFormData({
        code: '',
        title: '',
        money: '',
        score: '',
        comments: ''
      })

      setTimeout(() => {
        Taro.navigateBack()
      }, 2000)
    }).finally(() => {
      setLoading(false)
    })

  }

  useEffect(() => {
    initPageData().then(r => {
      console.log(r, 'rr')
    })
  }, [])

  return (
    <div style={{
      backgroundColor: '#f5f5f5',
      minHeight: '100vh',
      paddingBottom: '80px'
    }}>
      {/* 页面标题 */}
      {/*<div style={{*/}
      {/*  backgroundColor: '#fff',*/}
      {/*  margin: '16px',*/}
      {/*  borderRadius: '12px',*/}
      {/*  padding: '16px',*/}
      {/*  boxShadow: '0 2px 8px rgba(0,0,0,0.06)'*/}
      {/*}}>*/}
      {/*  <div style={{*/}
      {/*    display: 'flex',*/}
      {/*    alignItems: 'center',*/}
      {/*    gap: '8px',*/}
      {/*    marginBottom: '12px'*/}
      {/*  }}>*/}
      {/*    <Truck size={18} color="#1890ff"/>*/}
      {/*    <span style={{fontSize: '16px', fontWeight: 'bold'}}>添加违章记录</span>*/}
      {/*  </div>*/}
      {/*</div>*/}


      {/* 违章信息表单 */}
      <div style={{
        backgroundColor: '#fff',
        margin: '16px 16px 16px',
        borderRadius: '12px',
        overflow: 'hidden'
      }}>
        <div style={{
          padding: '16px',
          borderBottom: '1px solid #f0f0f0'
        }}>
          <span style={{fontSize: '16px', fontWeight: 'bold'}}>违章信息</span>
        </div>
        <Cell.Group>
          <Cell title="车辆编号" style={{padding: '12px 16px'}}>
            <Input
              placeholder="YT000001"
              value={formData.code}
              onChange={(value) => setFormData({...formData, code: value})}
              style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
            />
          </Cell>
          <Cell title="违章标题" style={{padding: '12px 16px'}}>
            <Input
              placeholder="不按规定停车"
              value={formData.title}
              onChange={(value) => setFormData({...formData, title: value})}
              style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
            />
          </Cell>
          <Cell title="违章描述" style={{padding: '12px 16px'}}>
            <TextArea
              placeholder={'XX路1号...'}
              value={formData.comments}
              onChange={(value) => setFormData({...formData, comments: value})}
              style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
            />
          </Cell>
          <Cell title="处罚金额" style={{padding: '12px 16px'}}>
            <Input
              type="number"
              placeholder="200(元)"
              maxLength={3}
              value={formData.money}
              onChange={(value) => setFormData({...formData, money: value})}
              style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
            />
          </Cell>
          <Cell title="扣分" style={{padding: '12px 16px'}}>
            <Input
              type="number"
              maxLength={2}
              placeholder="2(分)"
              value={formData.score}
              onChange={(value) => setFormData({...formData, score: value})}
              style={{backgroundColor: '#ffffff', borderRadius: '8px'}}
            />
          </Cell>
        </Cell.Group>
      </div>

      {/* 提交按钮 */}
      <div style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        padding: '16px',
        borderTop: '1px solid #f0f0f0'
      }}>
        <Button
          type="primary"
          block
          loading={loading}
          disabled={loading}
          onClick={handleSubmit}
        >
          {loading ? '提交中...' : '提交违章记录'}
        </Button>
      </div>
    </div>
  )
}

export default Add
