import style from "./index.less";
import {ScrollBoard} from "@jiaminghi/data-view-react";
import {useEffect, useRef, useState} from "react";
import leftPageApi from "@/https/apis/leftPageApi";
import modalApi from "@/https/apis/modalApi";


const modalPage = ({onCloseUser}) => {
  //用户弹框的轮播表
  const [userVehicleList, setUserVehicleList] = useState([])

  const [imgUrl, setImgUrl] = useState('')

  const [detailVisible, setDetailVisible] = useState(false);
  //获取车辆类型
  const [illegalTypeList, setIllegalTypeList] = useState([])

  //获取身份列表
  const [idTypeList, setIdTypeList] = useState([])
  //人员详情
  const [configDetails, setConfigDetails] = useState({})

  const [searchText, setSearchText] = useState('')
  const [userListParams, setUserListParams] = useState({
    vehicleTypeId: "", userType: ""
  })

  const scrollTable = useRef()

  useEffect(() => {
    getUserVehicleList()
  }, [userListParams])

  useEffect(() => {
    getUserVehicleList()
    carTypeList()
    getIdTypeList()
  }, [])

  /**
   * 获取人员车辆列表
   */
  const getUserVehicleList = () => {
    leftPageApi.userVehicleList({...userListParams, keyword: searchText}).then(res => {
      if (res.code == 200) {
        setUserVehicleList(res.data.map(it => {
          return [it.name, it.no, it.sex == '1' ? '男' : '女', it.organName, it.vehicleCount, `<span style='display: none'>${it.id}</span>`]
        }))
      }
    })
  }
  /**
   * 获取车辆类型
   * @param key
   */
  const carTypeList = (key) => {
    modalApi.carTypeList(key).then(res => {
      if (res.code === 200) {
        setIllegalTypeList(res.data.map(it => {
          return {
            name: it.name,
            value: it.id,
          }
        }))
      }
    })
  }
  const getIdTypeList = () => {
    leftPageApi.idTypeList().then(res => {
      if (res.code == 200) {
        setIdTypeList(res.data.map(it => {
          return {
            name: it.name,
            value: it.id
          }
        }))
      }
    })
  }

  /**
   * 点击轮播表获取详情事件
   * @param userId
   * @param vehicleTypeId
   */
  const detailClick = (userId, vehicleTypeId) => {
    leftPageApi.userVehicleDetails(vehicleTypeId, userId).then(res => {
      if (res.code == 200) {
        setImgUrl(res.data[0].imgs)
        console.log(res.data)
        setConfigDetails(res.data.map(it => {
          return [it.name, it.type, it.plateNo, it.status, `<span style="display: none">${it.imgs}</span>`]
        }))
      }
    })
    setDetailVisible(true)
  }

  //用户轮播图
  let userConfig = {
    index: true,
    headerBGC: 'rgba(47, 253, 239, 0.1)',
    headerHeight: 65,
    oddRowBGC: 'rgba(0, 0, 0, 0)',
    evenRowBGC: 'rgba(47, 253, 239, 0.1)',
    columnWidth: [60, 120, 140, 120, 200],
    rowNum: 5,
    header: [
      "<span style='color: #BDFF79;'>姓名</span>",
      "<span style='color: #BDFF79;'>ID</span>",
      "<span style='color: #BDFF79;'>性别</span>",
      "<span style='color: #BDFF79;'>部门</span>",
      "<span style='color: #BDFF79;'>车辆</span>",
    ],
    data: userVehicleList
  }
  //用户详情
  let userDetailConfig = {
    index: true,
    headerBGC: 'rgba(47, 253, 239, 0.1)',
    headerHeight: 60,
    oddRowBGC: 'rgba(0, 0, 0, 0)',
    evenRowBGC: 'rgba(47, 253, 239, 0.1)',
    columnWidth: [150, 150, 150, 150],
    rowNum: configDetails.length,
    header: [
      "<span style='color: #BDFF79;'>姓名</span>",
      "<span style='color: #BDFF79;'>车辆类型</span>",
      "<span style='color: #BDFF79;'>车牌号</span>",
      "<span style='color: #BDFF79;'>车辆状态</span>",
    ],
    data: configDetails
  }

  return (
    <div>
      {/*  人员列表弹框*/}
      {
        <div className={style.modal_box}>
          <div className={style.modal_title}>
            <span className={style.title_box}>人员车辆-查询</span>
            <span style={{position: 'absolute', right: 10, cursor: 'pointer'}}
                  onClick={onCloseUser}>×</span>
          </div>
          <div className={style.modal_body}>
            <select className={style.text} type="text" id="carType"
                    onChange={(e) => setUserListParams({...userListParams, vehicleTypeId: e.target.value})}
            >
              <option value="" style={{display: 'none'}}>车辆类型</option>
              {illegalTypeList.map(it => {
                return (
                  <option key={it.value} value={it.value}>{it.name}</option>
                )
              })}
            </select>
            <img src={require("@/assets/chain.png")} alt=""/>
            <select className={style.text}
                    onChange={(e) => setUserListParams({...userListParams, userType: e.target.value})}>
              <option value="" style={{display: 'none'}}>身份筛选</option>
              <option key={''} value={''}>全部</option>
              {idTypeList.map(it => {
                return (<option key={it.value} value={it.value}>{it.name}</option>)
              })}
            </select>
            <input className={style.text} placeholder="搜索" type="search"
                   onChange={e => setSearchText(e.target.value)}/>
            <div className={style.search_btn}>
              <img style={{position: "absolute", left: '25%', top: '25%', width: 25, height: 25}}
                   src={require("@/assets/searchWhite.png")} onClick={() => getUserVehicleList()}/>
            </div>
          </div>
          <div style={{cursor: 'pointer', width: '100%',height:'100%',overflow:'auto'}}>
            <ScrollBoard config={userConfig} style={{width: '100%', height: '300px'}}
                         onClick={(e) => detailClick(e.row[6]?.replace(/<[^>]*>/g, ""), userListParams.vehicleTypeId)}
            />
          </div>
        </div>}
      {/*  详情弹框*/}
      {
        detailVisible &&
        <div className={style.modal_box} style={{width: 769, height: 458}}>
          <div className={style.modal_title}>
            <span className={style.title_box}>人员车辆-详情</span>
            <span style={{position: 'absolute', right: 10, cursor: 'pointer'}}
                  onClick={() => {
                    setDetailVisible(false)
                    setImgUrl('')
                  }}>×</span>
          </div>
          <div className={style.middleDetails}>
            {imgUrl && <div className={style.pic}>
              <img src={imgUrl} alt="" style={{width: '100%', height: '100%'}}/>
            </div>}
          </div>
          <div className={style.board_box}>
            <ScrollBoard config={userDetailConfig} style={{height: 170}} ref={scrollTable}
                         onClick={(e) => setImgUrl(e.row[5].replace(/<[^>]*>/g, ""))}/>
          </div>
        </div>
      }
    </div>
  )

}

export default modalPage
