import React, {useEffect, useState} from "react";
import {
  Loading,
  Empty,
  Button,
  Input,
  Tag,
  Image,
  Space
} from '@nutui/nutui-react-taro'
import {Search, Calendar, Truck, File} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {pageHjmBxLog} from "@/api/hjm/hjmBxLog";
import {HjmBxLog} from "@/api/hjm/hjmBxLog/model";


/**
 * 报险记录列表页面
 */
const Bx: React.FC = () => {
  const [list, setList] = useState<HjmBxLog[]>([])
  const [loading, setLoading] = useState<boolean>(false)
  const [keywords, setKeywords] = useState<string>('')
  const [refreshing, setRefreshing] = useState<boolean>(false)
  console.log(refreshing)
  // 获取状态显示
  const getStatusDisplay = (status?: number) => {
    switch (status) {
      case 0:
        return {text: '待审核', color: '#faad14', bgColor: '#fffbe6'}
      case 1:
        return {text: '已通过', color: '#52c41a', bgColor: '#f6ffed'}
      case 2:
        return {text: '已驳回', color: '#ff4d4f', bgColor: '#fff2f0'}
      default:
        return {text: '未知', color: '#8c8c8c', bgColor: '#f5f5f5'}
    }
  }

  const reload = async (showLoading = true) => {
    try {
      if (showLoading) setLoading(true)
      setRefreshing(true)

      const res = await pageHjmBxLog({
        keywords: keywords.trim(),
        userId: Taro.getStorageSync('UserId')
      })

      setList(res?.list.map(d => {
        console.log(d,'ddd')
        d.image = JSON.parse(d.image);
        console.log(d)
        return d;
      }) || [])
    } catch (error) {
      console.error('获取报险记录失败:', error)
      Taro.showToast({
        title: '获取报险记录失败',
        icon: 'error'
      })
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }

  const onSearch = () => {
    reload()
  }

  const onKeywordsChange = (value: string) => {
    setKeywords(value)
  }

  const onAddInsurance = () => {
    Taro.navigateTo({
      url: '/hjm/bx/bx-add'
    })
  }

  const viewDetail = (item: HjmBxLog) => {
    Taro.navigateTo({
      url: `/hjm/bx/bx-detail?id=${item.id}`
    })
  }

  useEffect(() => {
    reload().then()
  }, [])

  return (
    <>
      {/* 搜索栏 */}
      <div style={{
        position: 'fixed',
        top: '20px',
        left: 0,
        right: 0,
        display: "none",
        zIndex: 20,
        padding: '0 16px',
        backgroundColor: '#f5f5f5'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          backgroundColor: '#fff',
          padding: '8px 12px',
          borderRadius: '20px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          <Search size={16} color="#999"/>
          <Input
            placeholder="搜索报险记录"
            value={keywords}
            onChange={onKeywordsChange}
            onConfirm={onSearch}
            style={{
              border: 'none',
              backgroundColor: 'transparent',
              flex: 1,
              marginLeft: '8px'
            }}
          />
          <Button
            type="primary"
            size="small"
            onClick={onSearch}
            loading={loading}
          >
            搜索
          </Button>
        </div>
      </div>

      {/* 报险记录列表 */}
      <div style={{
        marginTop: '10px',
        paddingBottom: '80px'
      }}>
        {loading && list.length === 0 ? (
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '200px'
          }}>
            <Loading type="spinner">加载中...</Loading>
          </div>
        ) : list.length === 0 ? (
          <Empty description="暂无报险记录">
            <Button type="primary" onClick={onAddInsurance}>
              立即报险
            </Button>
          </Empty>
        ) : (
          <div style={{padding: '0 16px'}}>
            {list.map((item, index) => {
              const statusDisplay = getStatusDisplay(item.status)

              return (
                <div
                  key={index}
                  style={{
                    backgroundColor: '#fff',
                    borderRadius: '12px',
                    padding: '16px',
                    marginBottom: '12px',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                    border: '1px solid #f0f0f0'
                  }}
                  onClick={() => viewDetail(item)}
                >
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'flex-start',
                    marginBottom: '12px'
                  }}>
                    <div style={{flex: 1}}>
                      <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '8px',
                        marginBottom: '8px'
                      }}>
                        <File size={16} color="#1890ff"/>
                        <span style={{
                          fontSize: '16px',
                          fontWeight: 'bold',
                          color: '#262626'
                        }}>
                          报险记录 #{item.id}
                        </span>
                      </div>

                      <Space direction="vertical">
                        <div style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '8px'
                        }}>
                          <Truck size={14} color="#8c8c8c"/>
                          <span style={{fontSize: '13px', color: '#8c8c8c'}}>
                            车辆编号：{item.carNo}
                          </span>
                        </div>

                        <div style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '8px'
                        }}>
                          <Calendar size={14} color="#8c8c8c"/>
                          <span style={{fontSize: '13px', color: '#8c8c8c'}}>
                            提交时间：{item.createTime}
                          </span>
                        </div>
                      </Space>
                    </div>

                    <Tag
                      color={statusDisplay.color}
                      style={{
                        backgroundColor: statusDisplay.bgColor,
                        border: `1px solid ${statusDisplay.color}`,
                        fontSize: '12px'
                      }}
                    >
                      {statusDisplay.text}
                    </Tag>
                  </div>

                  {/* 事故照片预览 */}
                  {item.image && (
                    <div style={{marginBottom: '12px'}} className={'flex gap-2'}>
                      {item.image.map((image) => (
                          <Image
                            src={image.url}
                            width="60"
                            height="60"
                            radius="6px"
                            mode="aspectFill"
                          />
                      ))}
                    </div>
                  )}

                  {/* 备注信息 */}
                  {item.comments && (
                    <div style={{
                      backgroundColor: '#f8f9fa',
                      padding: '8px 12px',
                      borderRadius: '6px',
                      fontSize: '13px',
                      color: '#595959',
                      lineHeight: '1.4'
                    }}>
                      {item.comments.length > 50
                        ? `${item.comments.substring(0, 50)}...`
                        : item.comments
                      }
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        )}
      </div>

      {/* 浮动添加按钮 */}
      {/*<div style={{*/}
      {/*  position: 'fixed',*/}
      {/*  bottom: '20px',*/}
      {/*  right: '20px',*/}
      {/*  zIndex: 30*/}
      {/*}}>*/}
      {/*  <Button*/}
      {/*    type="primary"*/}
      {/*    size="large"*/}
      {/*    onClick={onAddInsurance}*/}
      {/*  >*/}
      {/*    一键报险*/}
      {/*  </Button>*/}
      {/*</div>*/}
    </>
  )
}

export default Bx