import {Form, InputGroup} from "react-bootstrap";
import {AddressProps, OnChangeAddress} from "../entity";
import React from "react";

/**
 * 加载服务地点信息
 */
export class Address extends React.Component<OnChangeAddress, { addressList:Array<{ address:string }> }>{


    constructor(props: Readonly<OnChangeAddress>) {
        super(props);

        this.state={
            addressList:[],

        }
    }

    componentDidMount() {
        this.loadAddress()
    }

    /**
     * 加载服务地点
     */
    loadAddress(){
        this.setState({
            addressList:[{
                address:"北京",
            },
                {
                    address:"广州",
                },
                {
                    address:"上海",
                },
                {
                    address:"安徽",
                }]
        })
    }

    render() {
        return (
            <InputGroup className={this.props.className?this.props.className:"col-"+(this.props.col?this.props.col:3)+" ml-auto mr-auto"}>
                <InputGroup.Prepend>
                    <InputGroup.Text>服务地点</InputGroup.Text>
                </InputGroup.Prepend>
                <Form.Control as="select" value={this.props.value} custom onChange={(e)=>this.props.onChange(e.target.value)}>
                    <option value="">请选择服务地点</option>
                    {this.state.addressList.map((address:AddressProps, index:number)=>
                        <option key={"option"+index} value={address.address} >{address.address}</option>
                    )}
                </Form.Control>
            </InputGroup>
        )
    }
}