import React from 'react';
import './ablt.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import { Switch, Input, Button, Spin, message } from 'antd';
import { getProportion, saveProportion } from '../../../../tools.js';

const Base = React.createClass({
    getInitialState() {
        return {
            loading: false,
        };
    },
    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            url: globalConfig.context + "/api/admin/able",
            data: {
                uid: this.props.data.uid
            },
            success: function (data) {
                if (data.data) {
                    this.setState({
                        id: data.data.id,
                        intellectRight: data.data.intellectRight,
                        scienceAchievement: data.data.scienceAchievement,
                        researchInnovation: data.data.researchInnovation,
                        personnel: data.data.personnel
                    });
                } else if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
        let _me = this;
        getProportion(this.props.data.uid, function (data) { _me.setState({ proportion: data }); });
    },
    componentWillMount() {
        this.loadData()
    },
    submit() {
        this.setState({
            loading: true
        })
        $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/disposeAble",
            data: {
                uid: this.props.data.uid,
                id: this.state.id,
                intellectRight: this.state.intellectRight,
                scienceAchievement: this.state.scienceAchievement,
                researchInnovation: this.state.researchInnovation,
                personnel: this.state.personnel
            }
        }).done(function (data) {
            if (!data.error.length) {
                message.success('保存成功！');
                this.loadData();
            } else {
                message.warning(data.error[0].message);
            }
        }.bind(this)).always(function () {
            this.setState({
                loading: false
            })
        }.bind(this));
    },
    render() {
        return (
            <Spin spinning={this.state.loading} className='spin-box'>
                <div className="set-ablt">
                    <div className="acc-detail clearfix">
                        <p className="acc-title">
                            <span>能力标签</span>
                            <span className="proportion"> 是否已完成：</span>
                            <Switch
                                checked={this.state.proportion && this.state.proportion.ability == 1 ? true : false}
                                checkedChildren={'已完成'}
                                unCheckedChildren={'未完成'}
                                onChange={(e) => {
                                    e ? this.state.proportion.ability = 1 : this.state.proportion.ability = 0;
                                    saveProportion(this.state.proportion.id, this.props.data.uid, 'ability', this.state.proportion.ability);
                                    this.setState({ proportion: this.state.proportion });
                                }} />
                        </p>
                        <div className="acc-area">
                            <p>知识产权对企业竞争力的作用 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.intellectRight}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ intellectRight: e.target.value });
                                }} />
                        </div>
                        <div className="acc-area">
                            <p>科技成果转化情况 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.scienceAchievement}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ scienceAchievement: e.target.value })
                                }} />
                        </div>
                        <div className="acc-area">
                            <p>研究开发与技术创新组织管理情况 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.researchInnovation}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ researchInnovation: e.target.value })
                                }} />
                        </div>
                        <div className="acc-area">
                            <p>管理与科技人员情况 (限400字) </p>
                            <Input type="textarea" rows={6}
                                value={this.state.personnel}
                                onChange={(e) => {
                                    if (e.target.value.length > 400) {
                                        message.warning("长度超过400字！");
                                        return;
                                    };
                                    this.setState({ personnel: e.target.value })
                                }} />
                        </div>
                    </div>
                    <Button className="set-submit" type="primary" onClick={this.submit}>保存</Button>
                </div>
            </Spin>
        )
    }
});

export default Base;