import React, { Component } from "react";
import "../../recrulistcss/recrulistcss.scss";
import { Tabs, Input, Modal, Button } from "antd";
import axios from "axios";
const Search = Input.Search;
class Tabhead extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: "", //modal选择的高亮城市
      locationCity: "", //定位城市
      chosedCity: "", //已选择的城市
      modalVisible: false,
      hotCity: [],
    };
  }
  componentDidMount() {
    const { city, hotCity } = this.state;
    if (!city) {
      this.initUserCity();
    }
    if (!hotCity.length) {
      this.fetcHotCitys();
    }
  }
  fetcHotCitys = () => {
    const url = `/job_data/hot_city`;
    axios
      .get(url)
      .then((response) => {
        if (response.status === 200) {
          this.setState({
            hotCity: response.data.data,
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
  initUserCity = () => {
    //动态script获取用户城市 腾讯地图API  https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation
    let script = document.createElement("script");
    const url = `https://apis.map.qq.com/tools/geolocation/min?key=RPZBZ-CJE3D-YN24W-POI53-IAHPE-5HBB4&referer=educoder`;
    script.id = url;
    script.src = url;
    script.onload = script.onreadystatechange = () => {
      if (script.ready) {
        return false;
      }
      if (
        !script.readyState || //这是FF的判断语句，因为ff下没有readyState这个值，IE的readyState肯定有值
        script.readyState === "loaded" ||
        script.readyState === "complete" // 这是IE的判断语句
      ) {
        script.ready = true;
        const geolocation = new window.qq.maps.Geolocation();
        geolocation.getIpLocation(
          (position) => {
            const city = position.city.replace("市", "");
            this.props.cityCallback(city);
            this.setState({
              city,
              locationCity: city,
              chosedCity: city,
            });
          },
          (err) =>
            this.setState({
              city: "无法获取当前位置",
            })
        );
      }
    };
    document.body.appendChild(script);
  };
  setdatafunsval = (e) => {
    this.setState({
      keyword: e.target.value,
    });
    console.log("e.target.value" + e.target.value);
  };

  setdatafuns = (value) => {
    this.setState({
      keyword: value,
    });
    this.props.keywordCallback(value);
    console.log("value" + value);
  };
  handleCityChange = (city) => {
    this.setState({ city });
  };
  render() {
    const {
      city,
      locationCity,
      chosedCity,
      hotCity,
      modalVisible,
    } = this.state;
    return (
      <div className="educontent  tabone">
        <div className="edu-back-white pdtabs sortinxdirection pd30 ptabo">
          <div className="w17s  sortinxdirection iconcolor">
            <i className="iconfont icon-gongsidizhi font-22  mr7 lh40s"></i>
            <p className="lh48s font-16 mr7 titless100 ">{chosedCity}</p>
            <p
              className="font-14 color88 lh48s xiaoshou"
              onClick={() => this.setState({ modalVisible: true })}
            >
              [切换城市]
            </p>
          </div>
          <div className="w83s ">
            <Search
              className={"xaxisreverseorder searchwidth"}
              placeholder="请输入职位或单位"
              enterButton="搜索"
              size="large"
              maxLength={60}
              onInput={(e) => this.setdatafunsval(e)}
              onSearch={(value) => this.setdatafuns(value)}
            />
          </div>
        </div>
        <Modal
          getContainer={false}
          visible={modalVisible}
          title={<span style={{ fontSize: 18 }}>选择地区</span>}
          onCancel={() => this.setState({ modalVisible: false })}
          footer={
            <div style={{ textAlign: "center", padding: "10px 0px" }}>
              <Button
                onClick={() => {
                  this.setState({ modalVisible: false, city: chosedCity });
                }}
                style={{
                  backgroundColor: "#cccccc",
                  color: "#ffffff",
                }}
              >
                取消
              </Button>
              <Button
                type="primary"
                onClick={() => {
                  this.handleCityChange(city);
                  this.setState({ modalVisible: false, chosedCity: city });
                  this.props.cityCallback(city);
                }}
              >
                确定
              </Button>
            </div>
          }
        >
          <div>
            <span
              style={{ color: "#333333", fontFamily: "MicrosoftYaHeiSemibold" }}
            >
              当前定位城市：
            </span>
            <div style={{ marginTop: 21 }}>
              <Button
                type={city === locationCity ? "primary" : "default"}
                ghost={city === locationCity}
                onClick={() => this.handleCityChange(locationCity)}
              >
                <i className="iconfont icon-gongsidizhi font-14  mr10 "></i>
                {locationCity}
              </Button>
              <Button
                type={city === "全国" ? "primary" : "default"}
                ghost={city === "全国"}
                style={{ marginLeft: 25 }}
                onClick={() => this.handleCityChange("全国")}
              >
                全国
              </Button>
            </div>
          </div>
          <div style={{ marginTop: 32 }}>
            <span
              style={{
                color: "#333333",
                fontFamily: "MicrosoftYaHeiSemibold",
              }}
            >
              热门城市：
            </span>
            <div
              style={{
                marginTop: 21,
                display: "flex",
                flexWrap: "wrap",
              }}
            >
              {hotCity.map((item) => (
                <div style={{ paddingRight: 20, paddingBottom: 20 }} key={item}>
                  <Button
                    type={city === item ? "primary" : "default"}
                    ghost={city === item}
                    onClick={() => this.handleCityChange(item)}
                  >
                    {item}
                  </Button>
                </div>
              ))}
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default Tabhead;
