import React from "react"
import axios from "axios";
class CeshiContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            province: "",
            city: "",
            county: "",
            provinces: [],
            cities: [],
            counties: []
        }
    }

    handleChangeprovince(e) {
        e.preventDefault()
        const data = this.state.data
        for(var i in data) {
            if(data[i].name == e.target.value) {
                this.setState({
                    cities: data[i].city,
                    counties: data[i].city[0].area,
                    province: e.target.value,
                    city: "",
                    county: ""
                })
            }
        }
    }

    handleChangecity(e) {
        e.preventDefault()
        const cities = this.state.cities
        for(var i in cities) {
            if(cities[i].name == e.target.value) {
                this.setState({
                    counties: cities[i].area,
                    city: e.target.value,

                })
            }
        }
    }

    handleChangecounty(e) {
        e.preventDefault()
        this.setState({
            county: e.target.value
        })
    }
    render() {
        return(
            <div>
            {
             this.state.provinces.length!=0
             ?
               <p>
                    <select onChange={this.handleChangeprovince.bind(this)}>
                    <option>省</option>
                        {
                         this.state.provinces.map((i,index) => (
                                            <option value={i} key={index}>{i}</option>
                                        ))
                            }
                    </select>
                    <select onChange={this.handleChangecity.bind(this)}>
                    <option>市</option>
                        {
                         this.state.cities.map((i,index) => (
                                            <option value={i.name} key={index}>{i.name}</option>
                                        ))
                            }
                    </select>
                    <select onChange={this.handleChangecounty.bind(this)}>
                    <option>區(qū)</option>
                        {
                         this.state.counties.map((i,index) => (
                                            <option value={i} key={index}>{i}</option>
                                        ))
                            }
                    </select>
                 </p>   
                 :<p>11111111</p>
               }
            <div>{this.state.province+this.state.city+this.state.county}</div>
            </div>
        )
    }
    componentDidMount() {
        const provinces = []
        const data = []
        //請求API
        const url = "***********************";
        const resquest = axios.get(url);
        resquest.then(res => {
            Object.assign(res.data).map(i => {
                provinces.push(i.name)
                data.push(i)
            })
            this.setState({
                data: data,
                provinces: provinces,
                cities: data[0].city,
                counties: data[0].city[0].area
            })
        })

    }

}

export default CeshiContainer