import style from "./index.less";
import {ScrollBoard} from "@jiaminghi/data-view-react";
import {forwardRef, useEffect, useImperativeHandle, useState} from "react";
import modalApi from "@/https/apis/modalApi";
import rightPageApi from "@/https/apis/rightPageApi";
import {ConfigProvider} from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import dayjs from "dayjs";
import DatePicker from "@/components/DatePicker/index";
const {RangePicker} = DatePicker;
const CarModalPage = ({}, ref) => {


  const [visible, setVisible] = useState(false);
  const [carVisible, setCarVisible] = useState(true)
  const [illegalTypeList, setIllegalTypeList] = useState([])
  //轮播表
  const [illegalList, setIllegalList] = useState([])
  const [illegalLists, setIllegalLists] = useState([])
  //图片列表
  const [imgList, setImgList] = useState([])
  //详情弹框的显示
  const [detailVisible, setDetailVisible] = useState(false);
  //查询参数
  const [illegalParams, setIllegalParams] = useState({
    vehicleTypeId: "", ruleId: ""
  })
  //违规的学院
  const [collegeList, setCollegeList] = useState([])
  const [searchText, setSearchText] = useState('')
  const [configDetails, setConfigDetails] = useState({})

  useEffect(() => {
    carTypeList()
    getCollegeList()
    whereClick()
  }, [])

  useEffect(() => {
    console.log(illegalParams)
    getIllegalList(illegalParams)
    getIllegalType(illegalParams.vehicleTypeId)
  }, [illegalParams])


  useImperativeHandle(ref, () => ({
    showModal
  }))

  ///////////////////////////////////// 逻辑方法

  /**
   * 显示弹窗
   */
  const showModal = (params, date) => {
    setVisible(true);
    whereClick(params, date);
  }

  /**
   * 判断从哪里点
   * @param params
   * @param date
   */
  const whereClick = (params, date) => {
    setCarVisible(true)
    date = dayjs()
    let tempDate = {
      startTime: dayjs(),
      endTime: dayjs()
    }
    //圆饼图
    if (params?.illegalType) {
      setIllegalParams({
        ...params,
        ruleId: params.id,
        startTime: tempDate.startTime.add(-7, 'day').format('YYYY-MM-DD'),
        endTime: tempDate.endTime.format('YYYY-MM-DD')
      })
      return
    }
    //柱状图
    if (params?.type) {
      setIllegalParams({...params, startTime: '2022-' + params.type, endTime: '2022-' + params.type})
    }
    //横向图
    if (params?.collegeNo) {
      setIllegalParams({
        ...params,
        no: params.collegeNo,
        startTime: date.format('YYYY-MM') + '-01',
        endTime: date.add(1, 'month').format('YYYY-MM') + '-01'
      })
    }
    if (params?.detail) {
      console.log(params)
      setDetailVisible(true)
      setCarVisible(false)
      let tempData = {
        headerHeight: 50,
        headerBGC: 'rgba(47, 253, 239, 0.1)',
        oddRowBGC: 'rgba(0,0,0,0)',
        evenRowBGC: 'rgba(47, 253, 239, 0.1)',
        columnWidth: [150, 145, 155, 155, 50],
        index: true,
        align: ["center"],
        rowNum: 1,
        header: [
          "<span style='color: #BDFF79;'>车牌号</span>",
          "<span style='color: #BDFF79;'>车主</span>",
          "<span style='color: #BDFF79;'>执行人</span>",
          "<span style='color: #BDFF79;'>扣分</span>",
        ],
        data: [
          [
            params.name.row[0],
            params.name.row[3]?.replace(/<[^>]*>/g, ""),
            params.name.row[4]?.replace(/<[^>]*>/g, ""),
            params.name.row[2],
          ],
        ],
      }
      setConfigDetails(tempData)
      setImgList([
        params.name.row[5]?.replace(/<[^>]*>/g, ""),
      ])
    }
    //车辆类型
    if (params?.vehicleTypeId) {
      setIllegalParams({...params})
    }
    //日期
    if (params?.title === '今日') {
      tempDate.startTime = tempDate.startTime.format('YYYY-MM-DD')
      tempDate.endTime = tempDate.startTime
      setIllegalParams({...params, startTime: tempDate.startTime, endTime: tempDate.endTime})
    } else if (params?.title === '昨日') {
      tempDate.startTime = tempDate.startTime.add(-1, 'day').format('YYYY-MM-DD')
      tempDate.endTime = tempDate.startTime
      setIllegalParams({...params, startTime: tempDate.startTime, endTime: tempDate.endTime})
    } else if (params?.title === '上月') {
      tempDate.startTime = tempDate.startTime.add(-1, 'month').format('YYYY-MM') + '-01'
      tempDate.endTime = tempDate.endTime.format('YYYY-MM') + '-01'
      setIllegalParams({...params, startTime: tempDate.startTime, endTime: tempDate.endTime})
    } else if (params?.title === '本月') {
      tempDate.startTime = tempDate.startTime.format('YYYY-MM') + '-01'
      tempDate.endTime = tempDate.endTime.add(1, 'month').format('YYYY-MM') + '-01'
      setIllegalParams({...params, startTime: tempDate.startTime, endTime: tempDate.endTime})
    }
  }

  const getIllegalList = () => {
    modalApi.illegalList({
      ...illegalParams,
      keyword: searchText,
      startTime: illegalParams?.startTime,
      endTime: illegalParams?.endTime
    }).then(res => {
      if (res.code === 200) {
        setIllegalList(res.data.map(it => {
          return [
            `<span>${it.vehicleType}</span>`,
            `<span style='margin-right:50px'>${it.plateNo}</span>`,
            `<span> &nbsp ${it.ruleName}</span>`,
            `<span> &nbsp ${"&nbsp&nbsp" + it.score}</span>`,
            `<span style='display:none'>${it.userName}</span>`,
            `<span style='display:none'>${it.reportUserName}</span>`,
            `<span style='display:none'>${it.imgs}</span>`,
          ]
        }))
      }
    })
  }
  /**
   * 点击获取详情
   * @param val
   */
  const detailClick = (val) => {
    console.log(val)
    setDetailVisible(true)
    let tempData = {
      ...config, data: [
        [
          val.row[2],
          val.row[5]?.replace(/<[^>]*>/g, ""),
          val.row[6]?.replace(/<[^>]*>/g, ""),
          val.row[4],
        ],
      ],
      rowNum: 1,
      header: [
        "<span style='color: #BDFF79;'>车牌号</span>",
        "<span style='color: #BDFF79;'>车主</span>",
        "<span style='color: #BDFF79;'>执行人</span>",
        "<span style='color: #BDFF79;'>扣分</span>",
      ],
    }
    setImgList([
      val.row[7]?.replace(/<[^>]*>/g, ""),
      val?.row[8]?.replace(/<[^>]*>/g, ""),
    ])
    setConfigDetails(tempData)
  }

  /**
   * 车辆类型列表
   * @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,
          }
        }))
      }
    })
  }

  /**
   * 违规类型列表
   * @param key
   */
  const getIllegalType = (key) => {
    modalApi.illegalTypeList(key).then(res => {
      if (res.code === 200) {
        setIllegalLists(res.data.map(it => {
          return {
            name: it.name,
            value: it.id,
          }
        }))
      }
    })
  }

  const getCollegeList = () => {
    rightPageApi.collegeCount('2022-03-01').then(res => {
      if (res.code == 200) {
        setCollegeList(res.data.map(it => {
          return {
            name: it.collegeName,
            value: it.collegeNo,
          }
        }))
      }
    })
  }

  //////////////////////////////// 页面渲染

  if (!visible) {
    return "";
  }


  let config = {
    rowNum: 6, //表格行数
    headerHeight: 50,
    headerBGC: 'rgba(47, 253, 239, 0.1)',
    oddRowBGC: 'rgba(0,0,0,0)',
    evenRowBGC: 'rgba(47, 253, 239, 0.1)',
    columnWidth: [150, 145, 155, 155, 50],
    index: true,
    align: ["center"],
    header: [
      "<span style='color: #BDFF79;'>车型</span>",
      "<span style='color: #BDFF79;'>车牌</span>",
      "<span style='color: #BDFF79;'>违规</span>",
      "<span style='color: #BDFF79;'>扣分</span>",
    ],
    data: illegalList,
  }
  //
  return (
    <div>
      {/*搜索弹框*/}
      {carVisible &&
      <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={() => {
                  setIllegalParams({})
                  setVisible(false)
                }}>×</span>
        </div>
        <div className={style.modal_body}>
          <select className={style.text} type="text" id="carType" value={illegalParams.vehicleTypeId}
                  onChange={(e) =>
                    setIllegalParams({...illegalParams, 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} value={illegalParams.ruleId}
                  onChange={(e) =>
                    setIllegalParams({...illegalParams, ruleId: e.target.value})}
          >
            <option value="" style={{display: 'none'}}>违规类型</option>
            {illegalLists.map(it => {
              return (<option key={it.value} value={it.value}>{it.name}</option>)
            })}
          </select>
          <img src={require("@/assets/chain.png")} alt=""/>

          <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={() => getIllegalList()}/>
          </div>
        </div>
        <div className={style.modal_body} style={{height: '5%', marginBottom: 20}}>
          <img src={require("@/assets/chain.png")} alt=""/>

          <ConfigProvider locale={zh_CN}>
            <RangePicker className={style.dataPicker} locale={zh_CN} allowClear={false} onChange={(e) => {
              setIllegalParams({
                ...illegalParams,
                startTime: e[0].format('YYYY-MM-DD'),
                endTime: e[1].format('YYYY-MM-DD'),
              })
            }}
                         value={[illegalParams.startTime ? dayjs(illegalParams.startTime) : '', illegalParams.endTime ? dayjs(illegalParams.endTime) : '']}
            />
          </ConfigProvider>
          <img src={require("@/assets/chain.png")} alt=""/>

          <select className={style.text} style={{width: '34%'}} id="carType" value={illegalParams.no}
                  onChange={(e) =>
                    setIllegalParams({...illegalParams, no: e.target.value})}>
            <option value="" style={{display: 'none'}}>违规学院</option>
            {collegeList.map(it => {
              return (<option key={it.value} value={it.value}>{it.name}</option>)
            })}
          </select>
          <img src={require("@/assets/chain.png")} alt=""/>

        </div>
        {/* 轮播表 */}
        {illegalList && <div style={{cursor: 'pointer'}}>
          <ScrollBoard onClick={(e) => detailClick(e)} config={config} style={{width: '100%', height: '300px'}}/>
        </div>
        }

      </div>
      }
      {/* 详情弹框 */}
      {
        detailVisible &&
        <div className={style.modal_box} style={{width: 769, height: 420}}>
          <div className={style.modal_title}>
            <span className={style.title_box}>车辆违规-详情</span>
            <span style={{position: 'absolute', right: 10, cursor: 'pointer'}}
                  onClick={() => setDetailVisible(false)}>×</span>
          </div>
          <div className={style.middleDetails}>
            {imgList[0] && <div className={style.pic}>
              <img src={imgList[0]} alt="" style={{width: '100%', height: '100%'}}/>
            </div>}
            {imgList[1] &&
            <div className={style.pic}>
              <img src={imgList[1]} alt="" style={{width: '100%', height: '100%'}}/>
            </div>}
          </div>
          <div>
            <ScrollBoard config={configDetails} style={{height: 100}}/>
          </div>
        </div>
      }
    </div>
  )
}

export default forwardRef(CarModalPage)
