// yxy 签单客户
import React,{Component} from 'react';
import {AutoComplete, Button, Input, message, Modal, Select, Spin, Table} from "antd";
import $ from "jquery/src/ajax";

class LockBusiness extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: false,
            dataSource: [],
            customerArr: [],
            columns: [
                {
                    title: '业务名称',
                    dataIndex: 'businessProjectName',
                    key: 'businessProjectName',
                },
                {
                    title: '签单时间',
                    dataIndex: 'lockTime',
                    key: 'lockTime',
                },
                {
                    title: '客户所属人',
                    dataIndex: 'salesmanName',
                    key: 'salesmanName',
                },
                {
                    title: "操作",
                    dataIndex: "ooo",
                    key: "ooo",
                    render: (text, record) => {
                        const dataSources = this.state.customerArr || [];
                        const options = dataSources.map((group) => (
                            <Select.Option key={group.id} value={group.name}>
                                {group.name}
                            </Select.Option>
                        ));
                        return (
                            <div>{record.mySign === 1 ?<div className="control">
                                <AutoComplete
                                    className="certain-category-search"
                                    dropdownClassName="certain-category-search-dropdown"
                                    dropdownMatchSelectWidth={false}
                                    style={{
                                        width: "120px",
                                        marginLeft: 10,
                                        transition: "all .5s",
                                    }}
                                    value={record.transferName}
                                    dataSource={options}
                                    placeholder="输入转交人姓名"
                                    onChange={(e)=>{
                                        record.transferName = e;
                                        this.httpChange(e,record.key);
                                    }}
                                    filterOption={true}
                                    onBlur={(e)=>{
                                        let theType = "";
                                        let contactLists = this.state.customerArr || [];
                                        if (e) {
                                            contactLists.map(function (item) {
                                                if (item.name == e.toString()) {
                                                    theType = item.id;
                                                }
                                            });
                                        }
                                        record.theTypes = theType;
                                    }}
                                >
                                    <Input />
                                </AutoComplete>
                                <Button
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.showConfirm(record);
                                    }}
                                    type={"primary"}
                                    style={{
                                        marginLeft: 10,
                                        transition: "all .5s",
                                    }}
                                >
                                    转交业务
                                </Button>
                            </div> : <div/>}</div>
                        );
                    },
                },
            ],
        }
        this.loadData = this.loadData.bind(this);
    }

    //值改变时请求客户名称
    httpChange(e,index) {
        if (e.length >= 1) {
            this.supervisor(e);
        }
        // this.state.dataSource[index].transferName = e;
        // this.setState({
        //     dataSource: this.state.dataSource
        // })
    }

    blurChange(e) {
        let theType = "";
        let contactLists = this.state.customerArr || [];
        if (e) {
            contactLists.map(function (item) {
                if (item.name == e.toString()) {
                    theType = item.id;
                }
            });
        }
        this.setState({
            theTypes: theType,
        });
    }

    //指定转交人自动补全
    supervisor(e) {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/listAdminByName",
            data: {
                adminName: e,
            },
            success: function (data) {
                let thedata = data.data;
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                    thedata = {};
                }
                this.setState({
                    customerArr: thedata,
                });
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    showConfirm(record) {
        let _this = this;
        Modal.confirm({
            title: "提示",
            content: <span style={{ color: "red" }}>确定转交此项目？</span>,
            onOk() {
                _this.changeBusiness(record);
            },
            onCancel() {},
        });
    }

    changeBusiness(e) {
        let _this = this;
        if(!e.theTypes){
            message.warn('请选择转交人');
            return;
        }
        _this.setState({
            loading: true,
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/privateBusinessTransfer",
            data: {
                inputId: e.theTypes,
                pid: e.businessProjectId,
                uid: _this.props.id,
            },
            success: function (data) {
                if (data.error.length || data.data.list == "") {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    message.success("转交成功！");
                    _this.loadData();
                    _this.setState({
                        selectedRowKeys: [],
                        theTypes: null,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                _this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    loadData() {
        this.setState({
            loading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/customer/getLockedProject',
            data: {
                uid: this.props.uid,
            },
            success: function(data) {
                let listArr = [];
                let thedata = data.data;
                if(!thedata) {
                    if(data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    return;
                };
                for(let i = 0; i < data.data.length; i++) {
                    let thisdata = data.data[i];
                    thisdata.lockTime = thisdata.lockTime && thisdata.lockTime.split(' ')[0]
                    thisdata.key = i;
                    listArr.push(thisdata);
                };
                this.setState({
                    dataSource: listArr,
                });
            }.bind(this),
        }).always(function() {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    componentDidMount() {
        this.loadData();
    }

    render() {
        return(
            <div>
                <Spin spinning={this.state.loading}>
                    <Table
                        size="middle"
                        columns={this.state.columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Spin>
            </div>
        )
    }
}

export default LockBusiness;