/**
 * 收货地址
 */

import React, { Component } from 'react';
import { Input, Form, Select, Modal, Button, Card, Row, Col, message, DatePicker, Checkbox, TimePicker } from 'antd';
import { Util, dayFormat, hourFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import '../courierStyle/index.less';
import moment from 'moment';

const Option = Select.Option;
const { TextArea } = Input;

class ShowUpdateAddressModal extends Component {

    constructor(props) {
        var date = new Date()
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        super(props);
        this.state = {
            userData: userData,
            startDate: moment(date).format(dayFormat),
            startTime: moment(date).format(hourFormat),
            endTime: moment(date).format(hourFormat),
            params: {}
        }
    }

    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            this.setState({
                adressMsg: nextProp.adressMsg
            }, () => {
                // this.getProviceOther()
                // this.loadLocalMessage()
            })
        } else if (this.props.isShow === false) {
            this.cleanInput();
        }
    }

    componentDidMount(){
        this.getProviceOther()
        this.loadLocalMessage()
    }

    loadLocalMessage() {
        let data = {
            params: [{
                // compontName: "QueryCourierOrderPage",
                type: "C",
                reactCode: ['ShowPrintListModal']
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: (res) => {
                if (res.errorCode == '0') {
                    this.setState({
                        localeProvider: this.state.userData.language == 'EN' ? res.result.language.EN : res.result.language.CN
                    })
                }
            }
        })

    }

    //国际化
    setMessage(name, message) {
        return this.state.localeProvider && this.state.localeProvider[name] ? this.state.localeProvider[name][message] : ''
    }

    getProviceOther(value) {
        let data = {}
        data = {
            params: [{
                provinceFlag: 1,	//省
                cityFlag: 1,  //市
                countryFlag: 1,	//国家
            }]
        }
        $http.post('urlS', this, {
            code: '03030005',
            data: data,
            success: function (res) {
                if (res.errorCode == '0') {
                    if (value) {
                        let city = []
                        city = res.city.filter((item) => item.province == value);
                        this.setState({
                            localCity: city,
                            localProvince: res.province,
                            receiveCityID: undefined,
                            receiveAreaID: undefined,
                            receiveVillageID: undefined,
                        })
                    } else {
                        this.setState({
                            localProvince: res.province,
                            localCity: [],
                            receiveCityID: undefined,
                            receiveAreaID: undefined,
                            receiveVillageID: undefined,
                        })
                    }
                }
            }
        })
    }

    //选择或清除省
    onProvinceChange(name, value) {
        this.setState({
            [name]: value,
            areaData: []
        }, () => {
            this.getProviceOther(value)
        })

    }
    //选择市
    changeReceiveCity(name, value) {
        this.setState({
            [name]: value,
            receiveAreaID: undefined,
            receiveVillageID: undefined,
        }, () => {
            this.getAreas(value)
        })
    }
    //选择县
    changeAreaCity(name, value) {
        this.setState({
            [name]: value,
            receiveVillageID: undefined
        }, () => {
            this.getVillages(value)
        })
    }
    //选择乡
    changeVillageCity(name, value) {
        this.setState({
            [name]: value
        })
    }

    getVillages() {
        let data = {
            params: [{
                areaId: this.state.receiveAreaID
            }],
        }
        $http.post('urlS', this, {
            code: '03030007',
            data: data,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        villageData: res.result
                    })
                }
            }
        })
    }

    getAreas() {
        let data = {
            params: [{
                cityId: this.state.receiveCityID
            }],
        }
        $http.post('urlS', this, {
            code: '03030006',
            data: data,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        areaData: res.result
                    })
                }
            }
        })
    }

    //首字母大写
    firstToUp = (str) => {
        return str.substring(0, 1).toUpperCase() + str.substring(1);
    }

    closeModal() {
        let { onHide } = this.props;
        onHide && onHide();
        this.cleanInput();
    }

    //清空输入框
    cleanInput() {
        this.setState({
            receiveCityID: undefined,
            receiveAreaID: undefined,
            receiveVillageID: undefined,
            receiveProvinceID: undefined,
            receiveAddress: undefined,
            receiveMobile: undefined,
            receiveName: undefined
        })
    }

    onSubmit() {
        var data = {
            receiveCityID: this.state.receiveCityID,
            receiveAreaID: this.state.receiveAreaID,
            receiveVillageID: this.state.receiveVillageID,
            receiveProvinceID: this.state.receiveProvinceID,
            receiveAddress: this.state.receiveAddress,
            receiveMobile: this.state.receiveMobile,
            receiveName: this.state.receiveName
        }
        var { onSubmit } = this.props;
        onSubmit && onSubmit(data)
    }

    render() {
        var date = new Date()
        //省
        let localProvinceOption = []
        this.state.localProvince && this.state.localProvince.map((item, index) => {
            localProvinceOption.push(<Option key={index} value={item.id} name={item.descripts}
                code={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        //市
        let localCityOption = []
        this.state.localCity && this.state.localCity.map((item, index) => {
            localCityOption.push(<Option key={index} value={item.id} name={item.descripts}
                code={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //县
        let areaDataOption = []
        this.state.areaData && this.state.areaData.map((item, index) => {
            areaDataOption.push(<Option key={index} value={item.id} name={item.descripts}
                code={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //乡
        let villageDataOption = []
        this.state.villageData && this.state.villageData.map((item, index) => {
            villageDataOption.push(<Option key={index} value={item.id} name={item.descripts}
                code={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        return <div>
            <Modal className='address-modal'
                title={this.setMessage('ShowPrintListModalModify', 'descripts')}
                maskClosable={false}
                visible={this.props.isShow}
                onOk={this.onSubmit.bind(this)}
                onCancel={this.closeModal.bind(this)}>
                <Card style={{ height: '5vh', lineHeight: '4vh' }}>
                    {this.setMessage('ShowPrintListModalinformation', 'descripts')}<span>
                        <span>{!Util.isEmpty(this.state.adressMsg) ? this.state.adressMsg.receiveName : '--'}</span>&nbsp;&nbsp;
                            <span>{!Util.isEmpty(this.state.adressMsg) ? this.state.adressMsg.receiveMobile : '--'}</span>&nbsp;&nbsp;
                            <span>{!Util.isEmpty(this.state.adressMsg) ? this.state.adressMsg.receiveAddress : '--'}</span>
                    </span>
                </Card>
                <Card style={{ marginTop: 10 }}>
                    <Row style={{ marginLeft: 15 }}>
                        {this.setMessage('ShowPrintListModalLocation', 'descripts')}
                        <Select style={{ width: 180 }} placeholder={this.setMessage('ShowPrintListModalprovince', 'descripts')} allowClear showSearch
                            onChange={this.onProvinceChange.bind(this, "receiveProvinceID")}
                            value={this.state.receiveProvinceID}
                            filterOption={(input, option) =>
                                option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                            {localProvinceOption}
                        </Select>
                        <Select style={{ width: 180, marginLeft: 10 }} placeholder={this.setMessage('ShowPrintListModalcity', 'descripts')} allowClear showSearch
                            value={this.state.receiveCityID}
                            onChange={this.changeReceiveCity.bind(this, 'receiveCityID')}
                            filterOption={(input, option) =>
                                option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                            {localCityOption}
                        </Select>
                        <Select style={{ width: 180, marginLeft: 10 }} placeholder={this.setMessage('ShowPrintListModalcounty', 'descripts')} allowClear showSearch
                            value={this.state.receiveAreaID}
                            onChange={this.changeAreaCity.bind(this, 'receiveAreaID')}
                            filterOption={(input, option) =>
                                option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                            {areaDataOption}
                        </Select>
                        <Select style={{ width: 180, marginLeft: 10 }} placeholder={this.setMessage('ShowPrintListModalTownship', 'descripts')} allowClear showSearch
                            value={this.state.receiveVillageID}
                            onChange={this.changeVillageCity.bind(this, 'receiveVillageID')}
                            filterOption={(input, option) =>
                                option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                            {villageDataOption}
                        </Select>
                    </Row>
                    <Row style={{ marginTop: 10, marginLeft: 11 }}>
                        <div style={{ float: 'left' }}>{this.setMessage('ShowPrintListModalStreet', 'descripts')}</div>
                        <div style={{ float: 'right', width: '91%', marginRight: 8 }}><TextArea placeholder={this.setMessage('ShowPrintListModalneed', 'descripts')}
                            value={this.state.receiveAddress} onChange={Util.commonInputChange.bind(this, 'receiveAddress')}
                            rows={4} /></div>
                    </Row>
                    <Row style={{ marginTop: 10 }}>
                        {this.setMessage('ShowPrintListModalname', 'descripts')}
                        <Input style={{ width: 180 }} placeholder={this.setMessage('ShowPrintListModalconsignee', 'descripts')} value={this.state.receiveName}
                            onChange={Util.commonInputChange.bind(this, 'receiveName')} />
                    </Row>
                    <Row style={{ marginTop: 10, marginLeft: 15 }}>
                        {this.setMessage('ShowPrintListModalphone', 'descripts')}<Input placeholder={this.setMessage('ShowPrintListModalmobile', 'descripts')} style={{ width: 180 }} value={this.state.receiveMobile}
                            onChange={Util.commonInputChange.bind(this, 'receiveMobile')} />
                    </Row>

                </Card>
            </Modal></div>
    }
}

export default Form.create()(ShowUpdateAddressModal);