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

/**
 * 添加违章记录页面
 */
function Detail() {
  const {params} = useRouter();
  const [violation, setViolation] = useState<HjmViolation>({})

  // 初始化页面数据
  const initPageData = async () => {
    try {
      listHjmViolation({
        code: params.id
      }).then(data => {
        console.log(data[0],'00[]000')
        data.length > 0 && setViolation(data[0])
      })
    } catch (error) {
      console.error('初始化失败:', error)
      Taro.showToast({
        title: '初始化失败',
        icon: 'none'
      })
    }
  }

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

  return (
    <div style={{
      backgroundColor: '#f5f5f5',
      minHeight: '100vh',
      paddingBottom: '80px'
    }}>

      {/* 违章信息表单 */}
      <div style={{
        backgroundColor: '#fff',
        margin: '16px 16px 16px',
        borderRadius: '12px',
        overflow: 'hidden'
      }}>
        <Cell.Group>
          <Cell title="车辆编号" style={{padding: '12px 16px'}}>
            车辆编号：{violation.code}
          </Cell>
          <Cell title="违章标题" style={{padding: '12px 16px'}}>
            车辆编号：{violation.title}
          </Cell>
          <Cell title="违章描述" style={{padding: '12px 16px'}}>
            违章描述：{violation.comments}
          </Cell>
          <Cell title="处罚金额" style={{padding: '12px 16px'}}>
            违章金额：{violation.money}
          </Cell>
          <Cell title="扣分" style={{padding: '12px 16px'}}>
            扣分情况：{violation.score}
          </Cell>
        </Cell.Group>
      </div>

    </div>
  )
}

export default Detail
