import React, { Component } from "react";
import CardWrapper from "@/component/CardWrapper";
import InfoHeader from "@/component/InfoHeader";
import LabelInput from "@/ui-component/LabelInput";
import { Row, Col, DatePicker, Input, Select,Icon,Message } from "antd";
import ButtonAdd from "@/ui-component/ButtonAdd";
import { backgroundOptions } from "@/data";
import { getAntdFormVal } from "@/util";
import moment from "moment" 

const Option = Select.Option;

export default class EducationInfo extends Component {
    state = {
    };

    onButtonAdd() {
        let eduExperience = this.props.info.eduExperience
            eduExperience.push({
                education:0
            })

        this.props && this.props.transferMsg && this.props.transferMsg("eduExperience",eduExperience)
    }

    onButtonDel(index){
        return function(){
            let eduExperience = this.props.info.eduExperience
            if(eduExperience.length>1){
                eduExperience.splice(index,1)
                this.props && this.props.transferMsg && this.props.transferMsg("eduExperience",eduExperience)
            }else{
                Message.error("至少填写一段教育经历")
            }
        }
    }

    onExpChange(property, isEvent = false,expIndex = 0){
        return function(value,data){
            let val = getAntdFormVal(value, data,isEvent)

            let eduExperience = this.props.info.eduExperience
            eduExperience[expIndex][property] = val

            this.props && this.props.transferMsg && this.props.transferMsg("eduExperience",eduExperience)
        }
    }

    render() {
        return (
            <div className="education-info">
                <InfoHeader title="教育经历" tip="（按最近教育经历倒序填写）" />
                {
                    this.props.info.eduExperience.map((item, index)=> {
                    return (
                        <CardWrapper key={index}>
                            <Icon type="close-circle" theme="twoTone" style={{fontSize:"24px",position:"absolute",right: "10px",top: "10px"}} twoToneColor="#ff0000" 
                                  onClick={this.onButtonDel(index).bind(this)} />
                            <Row>
                                <Col span={10}>
                                    <LabelInput>起止日期</LabelInput>
                                    <Col span={11}>
                                        <DatePicker 
                                            placeholder="开始日期" 
                                            value = {item.startDate && moment(item.startDate, 'YYYY-MM-DD')} 
                                            onChange={this.onExpChange('startDate',true,index).bind(this)}
                                        />
                                    </Col>

                                    <Col
                                        span={2}
                                        style={{
                                            textAlign: "center",
                                            fontSize: "16px"
                                        }}
                                    >
                                        -
                                    </Col>

                                    <Col span={11}>
                                        <DatePicker 
                                            placeholder="结束日期" 
                                            value = {item.endDate && moment(item.endDate, 'YYYY-MM-DD')} 
                                            onChange={this.onExpChange('endDate',true,index).bind(this)}
                                        />
                                    </Col>
                                </Col>

                                <Col span={10} offset={4}>
                                    <LabelInput>毕业学校</LabelInput>
                                    <Input
                                        placeholder="请输入毕业学校"
                                        style={{ width: "100%" }}
                                        onChange={this.onExpChange('school',true,index).bind(this)}
                                        value={item.school}
                                    />
                                </Col>
                            </Row>

                            <Row>
                                <Col span={10}>
                                    <LabelInput>学历</LabelInput>
                                    <Select
                                        placeholder="请选择学历"
                                        style={{ width: "100%" }}
                                        onChange={this.onExpChange('education',true,index).bind(this)}
                                        value={backgroundOptions[item.education]}
                                    >
                                        {backgroundOptions.map(
                                            (item, index) => (
                                                <Option
                                                    value={item}
                                                    key={index}
                                                >
                                                    {item}
                                                </Option>
                                            )
                                        )}
                                    </Select>
                                </Col>

                                <Col span={10} offset={4}>
                                    <LabelInput>专业名称</LabelInput>
                                    <Input
                                        placeholder="请输入专业名称"
                                        style={{ width: "100%" }}
                                        onChange={this.onExpChange('major',true,index).bind(this)}
                                        value={item.major}
                                    />
                                </Col>
                            </Row>

                            <Row>
                                <Col span={10}>
                                    <LabelInput>毕业时间/学制</LabelInput>
                                    <Input
                                        placeholder="请输入专业名称"
                                        style={{ width: "100%" }}
                                        onChange={this.onExpChange('educationBg',true,index).bind(this)}
                                        value={item.educationBg}
                                    />
                                </Col>
                            </Row>
                        </CardWrapper>
                    );
                })}
                <Row>
                    <ButtonAdd
                        text="新增教育经历"
                        onClick={this.onButtonAdd.bind(this)}
                    />
                </Row>
            </div>
        );
    }
}
