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

import yellowPng from '@/assets/yellow.png';
import Flex from "@/components/Flex";
import TitleView from "@/components/TitleView";
import FlipView from "@/components/FlipView";


const border = [require('@/assets/blueBorder.png'), require('@/assets/greenBorder.png'), require('@/assets/indigoBorder.png')]
const typeCount = [require('@/assets/shape/car.png'), require('@/assets/shape/electricCars.png'), require('@/assets/shape/other.png')]


const LeftPage = ({onCarIllegalClick, onUserIllegalClick}) => {

  const {bottom_box, title_box2} = style;

  const [carType, setCarType] = useState([])
  const [currentMonth, setCurrentMonth] = useState([])
  const [lastMonth, setLastMonth] = useState([])
  const [currentDay, setCurrentDay] = useState([])
  const [lastDay, setLastDay] = useState([])
  const [illegalList, setIllegalList] = useState([])
  //查询参数
  const [searchText, setSearchText] = useState('')

  useEffect(() => {
    getCountType()
    getMonthCount()
    getLastMonthCount()
    getDayCount()
    getLastCount()
    getIllegalList()
  }, [])

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

  const getCountType = () => {
    leftPageApi.countType().then(res => {
      if (res.code === 200) {
        res.data.forEach((it, index) => {
          it.icon = typeCount[index];
          it.border = border[index];
        });
        setCarType(res.data)
      }
    })
  }

  const getMonthCount = () => {
    leftPageApi.monthCount().then(res => {
      if (res.code == 200) {
        setCurrentMonth(res.data)
      }
    })
  }

  const getLastMonthCount = () => {
    leftPageApi.lastMonthCount().then(res => {
      if (res.code == 200) {
        setLastMonth(res.data)
      }
    })
  }

  const getDayCount = () => {
    leftPageApi.dayCount().then(res => {
      if (res.code == 200) {
        setCurrentDay(res.data)
      }
    })
  }

  const getLastCount = () => {
    leftPageApi.lastDay().then(res => {
      if (res.code == 200) {
        setLastDay(res.data)
      }
    })
  }

  const getIllegalList = () => {
    leftPageApi.illegalList().then(res => {
      if (res.code == 200) {
        // console.log(res.data)
        setIllegalList(res.data.map(it => {
          return [it.plateNo, it.ruleName, it.score,
            `<span style='display:none'>${it.userName}</span>`,
            `<span style='display:none'>${it.reportUserName}</span>`,
            `<span style='display:none'>${it.imgs}</span>`
          ]
        }))
      }
    })
  }

  ///////////////////////////////////////// 数据常量

  let config = {
    headerBGC: 'rgba(47, 253, 239, 0.1)',
    headerHeight: 36,
    oddRowBGC: 'rgba(0, 0, 0, 0)',
    evenRowBGC: 'rgba(47, 253, 239, 0.1)',
    columnWidth: [180, 85, 50],
    header: [
      "<span style='color: #BDFF79;'>车牌号</span>",
      "<span style='color: #BDFF79;'>违规</span>",
      "<span style='color: #BDFF79;'>扣分</span>",
    ],
    data: illegalList
  };

  let counts = [
    {
      title: '昨日',
      count: lastDay,
      imgSrc: yellowPng,
    },
    {
      title: '今日',
      count: currentDay,
      imgSrc: "./imgs/blue.png",
    },
    {
      title: '本月',
      count: currentMonth,
      imgSrc: require('@/assets/light.png'),
    },
    {
      title: '上月',
      count: lastMonth,
      imgSrc: require('@/assets/green.png'),
    },
  ];

  return <Flex
    direction={"column"} className={style.container} justify={"center"} alignItems={"center"}
  >

    <Flex className={style.carCount} direction={"column"}>

      <TitleView
        title={'车辆统计管理'} bgUrl={'./imgs/titleBorder.png'} bgStyle={{width: 176, height: 53}}
        extra={<Flex
          itemGrow={1} style={{width: 0}} alignItems={"center"} justify={"flex-end"}
          className={style.title_box}
        >
          <input
            className={style.text} placeholder="人员查询" type="search"
            onChange={e => setSearchText(e.target.value)}
          />
          <div className={style.search_btn} onClick={onUserIllegalClick}>
            <img
              alt={''} style={{position: "absolute", left: '25%', top: '25%', width: 25, height: 25}}
              src={require("@/assets/searchWhite.png")}
            />
          </div>
        </Flex>}
      />


      <Flex className={style.inoutCar} justify={"space-between"}>

        <Flex style={{width: 187, marginRight: 6}}>
          <Flex itemGrow={1} style={{width: 0}}>
            <img alt={''} style={{position: 'absolute'}} src={require("@/assets/countBorder.png")}/>
            <img alt={''} style={{position: 'absolute', top: 20, left: 26}}
                 src={require("@/assets/shape/inSchool.png")}/>
            <img alt={''} style={{position: 'absolute', top: 10, left: 10}} src={require("@/assets/show.png")}/>
          </Flex>
          <Flex direction={"column"} justify={"center"} alignItems={"center"} style={{marginRight: 12}}>
            <Flex style={{fontSize: 18, fontWeight: 500, color: '#E9CC7C'}}>156</Flex>
            <Flex style={{fontSize: 14}}>进校车辆</Flex>
          </Flex>
        </Flex>

        <Flex style={{width: 187, marginLeft: 6}}>
          <Flex itemGrow={1} style={{width: 0}}>
            <img alt={''} style={{position: 'absolute'}} src={require("@/assets/countBorder.png")}/>
            <img alt={''} style={{position: 'absolute', top: 20, left: 26}}
                 src={require("@/assets/shape/outSchool.png")}/>
            <img alt={''} style={{position: 'absolute', top: 10, left: 10}} src={require("@/assets/show.png")}/>
          </Flex>
          <Flex direction={"column"} justify={"center"} alignItems={"center"} style={{marginRight: 12}}>
            <Flex style={{fontSize: 18, fontWeight: 500, color: '#E9CC7C'}}>143</Flex>
            <Flex style={{fontSize: 14}}>出校车辆</Flex>
          </Flex>
        </Flex>

      </Flex>

      <Flex className={style.carType} justify={"space-between"}>
        {carType.map((it, index) => {
          return <Flex
            key={index} className={style.carBox} direction={"column"} justify={"center"} alignItems={"center"}
            onClick={() => onCarIllegalClick(it)}
          >
            <img alt={''} style={{position: 'absolute', zIndex: 0, left: 0}} src={it.border}/>
            <img alt='' style={{zIndex: 1}} src={it.icon}/>
            <Flex style={{zIndex: 1, fontSize: 18, fontWeight: 500, color: '#E9CC7C'}}>{it.count}</Flex>
            <Flex style={{zIndex: 1, fontSize: 14}}>{it.vehicleType}</Flex>
          </Flex>
        })}
      </Flex>

      <Flex className={style.carEvent} justify={"space-between"}>
        <Flex
          className={style.body_box_down} alignItems={"center"}
          onClick={() => onCarIllegalClick()}
        >
          <img alt={''} style={{position: 'absolute'}} src={require("@/assets/cardBorder.png")}/>
          <span style={{paddingLeft: 22}}>车辆违规</span>
          <img alt={''} className={style.img_search} src={require("@/assets/search.png")}/>
        </Flex>

        <Flex className={style.body_box_down} alignItems={"center"}>
          <img alt={''} style={{position: 'absolute'}} src={require("@/assets/greyBorder.png")}/>
          <span style={{paddingLeft: 28}}>事件上报</span>
        </Flex>

        <Flex className={style.body_box_down} alignItems={"center"}>
          <img alt={''} style={{position: 'absolute'}} src={require("@/assets/greyBorder.png")}/>
          <span style={{paddingLeft: 28}}>扣分记录</span>
        </Flex>
      </Flex>
    </Flex>

    {/*轮播表*/}
    <Flex itemGrow={1} style={{height: 0, marginBottom: 20}}>
      <ScrollBoard
        config={config} onClick={e => onCarIllegalClick({name: e, detail: true})}
      />
    </Flex>

    {/*底部盒子*/}
    <Flex className={style.bottom_box} direction={"column"}>

      <TitleView
        bgUrl={'./imgs/titleBorder2.png'} title={'违规总数统计'} bgStyle={{width: 176, height: 53}}
      />

      {/* 翻牌器 */}
      <Flex style={{margin: '10px 0', width: '100%'}} justify={"center"}>
        <FlipView number={'112'}/>
      </Flex>

      {/* 违规数统计 */}
      <Flex className={style.dayStat} wrap={"wrap"} justify={"space-around"}>
        {counts.map((it, index) => {
          return (
            <Flex
              key={index} className={style.down_body_box} alignItems={"center"} justify={"center"}
              onClick={(e) => onCarIllegalClick(it)}
            >
              <img alt={''} src={it.imgSrc} style={{position: "absolute", zIndex: 0}}/>
              <span style={{zIndex: 1, fontSize: 32, lineHeight: 1}}>{it.count}</span>
              <span style={{zIndex: 1, fontSize: 14}}>{it.title}</span>
            </Flex>
          )
        })}
      </Flex>

    </Flex>

  </Flex>
}

export default LeftPage
