import React, { useEffect, useRef, useState } from "react";
import "./index.less";
import { Empty, Picker, Popup, Search } from 'react-vant';
import api from "~/api";
import { Link } from "react-router-dom";
import { Toast } from 'react-vant';
export const ExamRoadVideo: React.FC = (props: any) => {

  const [keyWord, setKeyWord] = useState('');
  const [city, setCity] = useState({
    city: "",
    cityId: ""
  })
  const cityRef = useRef<{
    city: string;
    cityId: string;
  }>()
  cityRef.current = city
  const [province, setProvince] = useState({
    province: "",
    provinceId: ""
  })
  const provinceRef = useRef<{
    province: string;
    provinceId: string;
  }>()


  provinceRef.current = province

  const [county, setCounty] = useState({
    county: "",
    countyId: ""
  })
  const [provinceVisible, setProvinceVisible] = useState(false)
  const [cityVisible, setCityVisible] = useState(false)
  const [countyVisible, setCountyVisible] = useState(false)
  const [provinceList, setProvinceList] = useState<{
    province: string,
    provinceId: string
  }[]>([])
  const [cityList, setCityList] = useState<{
    city: string,
    cityId: string
  }[]>([])
  const [countyList, setCountyList] = useState<{
    county: string,
    countyId: string
  }[]>([])
  const getExamListByName = (name?: string) => {
    () => {
      setProvince({
        province: "",
        provinceId: ""
      })
      setCounty({
        county: "",
        countyId: ""
      })
      setCity({
        city: "",
        cityId: ""
      })
      api.studentExamInfoList({
        name: name
      }).then(res => {
        console.log(res)
        setExamList(res.data.rows)


      })
    }

  }

  const getCityByProvinceId = (provinceId: string) => {

    api.studentExamInfoCity(Number(provinceId)).then(res => {
      setCityList(res.data.data)
    })
  }
  const getCountyByCityId = (cityId: string) => {
    api.studentExamInfoCounty(Number(cityId)).then(res => {
      setCountyList(res.data.data)
    })
  }
  const [examList, setExamList] = useState<{
    "id": number,
    "name": string,
    "image": string,
    "provinceId": string,
    "province": string,
    "cityId": string,
    "city": string,
    "countyId": string,
    "county": string,
    "price": number,
    "videoCount": number,
    "expirationTime": null,
    "isVip": 0,
    "sign": null
  }[]>([])
  useEffect(() => {
    api.studentExamInfoList({
      ...province,
      ...city,
      ...county
    }).then(res => {
      setExamList(res.data.rows)

    })


  }, [province, city, county])
  useEffect(() => {


    api.studentExamInfoList({}).then(res => {
      setExamList(res.data.rows)

    })
    api.studentExamInfoGetProvice().then(res => {
      setProvinceList(res.data.data)
      //定位
      api.studentExamInfoIp().then(result => {
        if (res.data.data.every((item: {
          province: string
          provinceId: string
        }) => {
          item.province === result.data.data.province
        })) {
          setCity({
            city: result.data.data.cityName,
            cityId: result.data.data.city
          });
          setProvince({
            provinceId: result.data.data.province,
            province: result.data.data.provinceName
          })

        }
        else {
          setCity({
            city: "",
            cityId: ""
          });
          setProvince({
            provinceId: "",
            province: ""
          })

        }





        console.log(result.data)
      })
    })

  }, [])
  return (
    <div className="ExamRoadVideo">
      <div className="header">
        <div className="rect">
          <div className="search">
            {/* <SearchOutline className="icon1" color="#8A9099" fontSize={18} /> */}
            <Search onChange={val => {
              setKeyWord(val)
            }} onSearch={(val) => {
              getExamListByName(val)

            }} value={keyWord} shape="round" background="transparent" placeholder="请输入搜索关键词"></Search>
            {/* <input placeholder="输入系列课标题" className="bar" type="search"></input> */}
          </div>
          <div
            className="select"

          >
            <input
              value={province.province}
              readOnly
              onClick={() => { setProvinceVisible(true) }}
              placeholder="省份"
              className="header-province"
              type="text"
            />
            <input
              readOnly
              value={city.city}
              onClick={() => {
                province.provinceId ? setCityVisible(true) : Toast.fail({
                  message: "请先选择省份"
                })
              }}
              placeholder="地市"
              className="header-city"
              type="text"
            />

            <input
              readOnly
              onClick={() => {
                city.cityId ? setCountyVisible(true) : Toast.fail({
                  message: "请先选择城市"
                })
              }}

              value={county.county}

              placeholder="区"
              className="header-area"
              type="text"
            />

          </div>
          <Popup position="bottom" visible={provinceVisible}>
            <Picker columnsFieldNames={{
              text: 'province',
              value: 'provinceId'
            }} onCancel={() => setProvinceVisible(false)} onConfirm={(val: string, item: {
              province: string,
              provinceId: string
            }) => { setProvince(item || { province: '', provinceId: '' }); setProvinceVisible(false); getCityByProvinceId(item?.provinceId); }} columns={provinceList}></Picker>
          </Popup>
          <Popup position="bottom" visible={cityVisible}>
            <Picker columnsFieldNames={{
              text: 'city',
              value: 'cityId'
            }} columns={cityList} onConfirm={(val: string, item: {
              city: string,
              cityId: string
            }) => {

              setCity(item || { city: '', cityId: '' }); setCityVisible(false);
              getCountyByCityId(item.cityId || '0000');

            }} onCancel={() => { setCityVisible(false); }}></Picker>
          </Popup>
          <Popup position="bottom" visible={countyVisible}>
            <Picker onCancel={() => {
              setCountyVisible(false)
            }} onConfirm={(value: string, item: {
              county: string;
              countyId: string;
            }) => {
              setCounty(item || { county: '', countyId: '' })
              setCountyVisible(false)


            }} columns={countyList} columnsFieldNames={{
              text: "county",
              value: "countyId"
            }}></Picker>
          </Popup>
        </div>


      </div>
      <div className="content">
        <div className="list">
          {/* <van-empty
          v-if="examRoomList.length == 0"
          className="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="该城市无视频"
        /> */}
          {
            examList.length !== 0 ?
              examList.map(item => {
                return (<Link key={item.id} to={'/courseCatalog?id=' + item.id + '&price=' + (Number(item.price) / 100)}><div
                  key={item.id}
                  className="list-item"

                >


                  <img src={item.image} className="list-item-image">
                  </img>
                  <div
                    className="list-item-textbody"

                  >
                    <div className="list-item-text1">{item.name}</div>
                    <div className="list-item-text2">共{item.videoCount}节</div>
                  </div>
                  <div className="list-item-border"></div>
                </div>   </Link>)

              }) : <Empty

                className="custom-image"
                image="https://img.yzcdn.cn/vant/custom-empty-image.png"
                description="无视频"

              />
          }

        </div>
      </div>
    </div>

  );
};