import React, { Component } from "react";
import { AutoComplete, Button, Cascader, Input, message, Modal, Popconfirm, Select, Spin, Table, Tag, Tooltip } from "antd";
import { areaSelect, getProvince } from '@/NewDicProvinceList';
import $ from "jquery/src/ajax";
import TextArea from "antd/es/input/TextArea";

class InforChange extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            changeType: 0,
            colunmn: [
                {
                    title: "操作人名称",
                    dataIndex: "adminName",
                    key: "adminName",
                },
                {
                    title: "客户名称",
                    dataIndex: "name",
                    key: "name",
                    render: (text) => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth: '150px',
                                    overflow: 'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace: 'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "操作时间",
                    dataIndex: "createTimes",
                    key: "createTimes",
                },
            ],
            dataSource: [],
            inputVisible: false,
            inputValue: '',

            dataArrar: [],
            cooperationProjects: [],
            orgCode: props.data.orgCode,
            locationProvince: props.data.locationProvince,
            businessScope: props.data.businessScope,
            intendedProject: props.data.intendedProject
        }
        this.onChange = this.onChange.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.loadData = this.loadData.bind(this);
        this.onOk = this.onOk.bind(this);
        this.showInput = this.showInput.bind(this);
        this.handleInputConfirm = this.handleInputConfirm.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.handleCloseCooperation = this.handleCloseCooperation.bind(this);
        this.supervisor = this.supervisor.bind(this);
        this.onSelect = this.onSelect.bind(this);
    }

    onChange(type) {
        this.setState({
            visible: true,
            changeType: type,
        })
    }

    onCancel() {
        this.setState({
            visible: false,
            loading: false,
            changeType: 0,

            dataArrar: []
        })
    }

    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/listUserName",
            data: {
                uid: this.props.enterpriseId,
            },
            success: function (data) {
                if (data.error.length || data.data.list == "") {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    this.setState({
                        initialName: data.data[0] ? data.data[0].name : ''
                    })
                    data.data.splice(0, 1);
                    this.setState({
                        dataSource: data.data,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );

    }

    onOk() {
        const { dataArrar } = this.state;
        if (this.state.changeType === 3 && !/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(dataArrar)) {
            message.warning('请输入正确的统一社会信用代码')
            return
        }
        if (this.state.changeType === 0 && dataArrar.length === 0) {
            message.warning('请输入省-市-区');
            return;
        }
        if (this.state.changeType === 1 && dataArrar.length === 0) {
            message.warning('请输入企业主管产品/服务');
            return;
        }
        if (this.state.changeType === 2 && dataArrar.length === 0) {
            message.warning('请输入意向合作项目');
            return;
        }
        this.setState({
            loading: true
        });
        let data = {
            uid: this.props.enterpriseId,
        }
        if (this.state.changeType === 0) {
            data.province = dataArrar[0] || undefined;
            data.city = dataArrar[1] || undefined;
            data.area = dataArrar[2] || undefined;
        }
        if (this.state.changeType === 1) {
            data.businessScope = dataArrar.join(',')
        }
        if (this.state.changeType === 2) {
            let arr = [];
            for (let i of dataArrar) {
                arr.push(i.label)
            }
            data.intendedProject = arr.join(',')
        }
        if (this.state.changeType === 3) {
            data.orgCode = dataArrar
            this.props.onCancel();
        }
        $.ajax({
            url: globalConfig.context + "/api/admin/customer/updateUserDate",
            method: "post",
            data: data
        }).done(
            function (data) {
                this.setState({
                    loading: false
                });
                if (data.error.length === 0) {
                    message.success("恭喜您，更改成功！");
                    if (this.state.changeType === 0) {
                        this.setState({
                            locationProvince: getProvince(dataArrar[0], dataArrar[1], dataArrar[2])
                        })
                    }
                    if (this.state.changeType === 1) {
                        this.setState({
                            businessScope: dataArrar.join(',')
                        })
                    }
                    if (this.state.changeType === 2) {
                        let arr = [];
                        for (let i of dataArrar) {
                            arr.push(i.label)
                        }
                        this.setState({
                            intendedProject: arr.join(',')
                        })
                    }
                    if (this.state.changeType === 3) {
                        this.setState({
                            orgCode: dataArrar
                        })
                        this.props.onCancel();
                    }
                    this.onCancel();
                } else {
                    message.warning(data.error[0].message);
                }
            }.bind(this)
        )
    }

    showInput() {
        let str = this.state.dataArrar.join('/')
        this.setState({
            inputVisible: true,
            inputValue: str
        });
    }

    handleInputConfirm() {
        let inputValue = this.state.inputValue;
        let arr = inputValue.split('/');
        let lv = true;
        for (let i of arr) {
            if (i.length > 16) {
                message.warning('单个标签字数不能超过16个字符')
                lv = false;
                return;
            }
        }
        if (lv) {
            arr = Array.from(new Set(arr));
            arr = arr.filter(v => v);
            this.setState({
                dataArrar: arr,
                inputVisible: false,
                inputValue: '',
            });
        }
    }

    handleClose(removedTag) {
        let dataArrar = this.state.dataArrar.filter(tag => { return tag !== removedTag });
        this.setState({ dataArrar });
    }

    handleCloseCooperation(removedTag) {
        let dataArrar = this.state.dataArrar.filter(tag => { return tag.value !== removedTag.value });
        this.setState({ dataArrar });
    }

    supervisor(value) {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
            data: {
                businessName: value
            },
            success: function (data) {
                let thedata = data.data;
                if (data.error.length === 0) {
                    this.setState({
                        cooperationProjects: thedata,
                    });
                } else {
                    message.warning(data.error[0].message);
                }
            }.bind(this),
        }).always(
            function () {

            }.bind(this)
        );
    }

    onSelect(value) {
        let arr = this.state.cooperationProjects.filter(v => v.id === value);
        let arr1 = this.state.dataArrar.filter(v => v.value === value);
        if (arr.length > 0) {
            if (arr1.length > 0) {
                message.warning('选项已存在');
            } else {
                this.state.dataArrar.push({
                    label: arr[0].bname,
                    value: arr[0].id,
                })
                this.setState({
                    dataArrar: this.state.dataArrar
                })
            }
        }
    }

    render() {
        return (
            <div style={{
                fontSize: 14,
                fontWeight: "bold",
                marginTop: 20,
            }}>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    paddingBottom: '5px'
                }}>
                    <div style={{ width: '123px', color: "#58A3FF" }}>统一社会信用代码:</div>
                    <div style={{ color: "#58A3FF" }}>
                        {
                            !this.state.orgCode ? "待补充" : this.state.orgCode
                        }
                    </div>
                    {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(3) }}>修改</Button>}
                    {this.props.type === 'modify' && <span style={{ color: "red", marginLeft: 20 }}>如,科德集团则填写91430105670766451M</span>}
                </div>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    paddingBottom: '5px'
                }}>
                    <div style={{ width: '123px' }}>省-市-区:</div>
                    <div>
                        {
                            this.state.locationProvince
                        }
                    </div>
                    {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(0) }}>修改</Button>}
                </div>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    paddingBottom: '5px'
                }}>
                    <div style={{ width: '123px' }}>企业主营产品/服务:</div>
                    <div>
                        {
                            this.state.businessScope
                        }
                    </div>
                    {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(1) }}>修改</Button>}
                </div>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    paddingBottom: '5px'
                }}>
                    <div style={{ width: '123px' }}>意向合作项目:</div>
                    <div>
                        {
                            this.state.intendedProject
                        }
                    </div>
                    {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(2) }}>修改</Button>}
                </div>

                <Modal
                    footer={null}
                    maskClosable={false}
                    width={this.props.type === 'journal' ? '1200px' : this.props.type === 'modify' ? '400px' : '800px'}
                    title={this.props.type === 'journal' ? '操作日志' : this.props.type === 'modify' ? '信息修改' : ''}
                    visible={this.state.visible}
                    onCancel={this.onCancel}>
                    <div>
                        {this.props.type === 'modify' ?
                            <div className='enterpriseNameContent'>
                                <div className='enterpriseNameItem'>
                                    <div className='enterpriseNameTitle'>
                                        {
                                            this.state.changeType === 0 ? '省-市-区' :
                                                this.state.changeType === 1 ? '企业主管产品/服务' :
                                                    this.state.changeType === 2 ? '意向合作项目' :
                                                        this.state.changeType === 3 ? '统一社会信用代码' : ''
                                        }
                                        :
                                    </div>
                                    <div className='enterpriseNameValue'>
                                        {
                                            this.state.changeType === 0 ? this.state.locationProvince :
                                                this.state.changeType === 1 ? this.state.businessScope :
                                                    this.state.changeType === 2 ? this.state.intendedProject :
                                                        this.state.changeType === 3 ? this.state.orgCode : ''
                                        }
                                    </div>
                                </div>
                                <div className='enterpriseNameItem'>
                                    <div className='enterpriseNameTitle'>更改:</div>
                                    <div className='enterpriseNameValue'>
                                        {
                                            this.state.changeType === 0 ? <Cascader
                                                options={areaSelect()}
                                                placeholder="选择城市"
                                                onChange={(e, pre) => {
                                                    this.setState({
                                                        dataArrar: e
                                                    })
                                                }}
                                            /> :
                                                this.state.changeType === 1 ?
                                                    <div>
                                                        <div>
                                                            {this.state.dataArrar.map((tag) => {
                                                                const isLongTag = tag.length > 20;
                                                                const tagElem = (
                                                                    <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
                                                                        {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                                                                    </Tag>
                                                                );
                                                                return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
                                                            })}
                                                            {
                                                                !this.state.inputVisible &&
                                                                <Button
                                                                    size="small"
                                                                    type="primary"
                                                                    onClick={this.showInput}>
                                                                    + 新增主营产品
                                                                </Button>
                                                            }
                                                        </div>
                                                        {this.state.inputVisible && (<div>
                                                            <TextArea
                                                                style={{ width: '300px', height: '100px' }}
                                                                value={this.state.inputValue}
                                                                onChange={(e) => {
                                                                    this.setState({
                                                                        inputValue: e.target.value
                                                                    })
                                                                }} />
                                                            <div style={{ color: '#f00' }}>提示：请用 / 符号隔开关键字</div>
                                                            <div>
                                                                <Button
                                                                    size="small"
                                                                    type="primary"
                                                                    onClick={this.handleInputConfirm}>
                                                                    确定
                                                                </Button>
                                                                <Button
                                                                    size="small"
                                                                    style={{ marginLeft: '5px' }}
                                                                    onClick={() => {
                                                                        this.setState({
                                                                            inputVisible: false,
                                                                            inputValue: ''
                                                                        })
                                                                    }}>
                                                                    取消
                                                                </Button>
                                                            </div>
                                                        </div>)}
                                                    </div>
                                                    :
                                                    this.state.changeType === 2 ?
                                                        <div>
                                                            <div style={{ paddingBottom: this.state.dataArrar.length === 0 ? 0 : '10px' }}>
                                                                {this.state.dataArrar.map((tag, index) => {
                                                                    const isLongTag = tag.label.length > 20;
                                                                    const tagElem = (
                                                                        <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
                                                                            {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
                                                                        </Tag>
                                                                    );
                                                                    return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
                                                                })}
                                                            </div>
                                                            <div>
                                                                <AutoComplete
                                                                    style={{ width: 200 }}
                                                                    onSearch={this.supervisor}
                                                                    onSelect={this.onSelect}
                                                                    placeholder="请输入关键字"
                                                                >
                                                                    {
                                                                        this.state.cooperationProjects.map(function (item) {
                                                                            return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
                                                                        })
                                                                    }
                                                                </AutoComplete>
                                                            </div>
                                                        </div>
                                                        :
                                                        this.state.changeType === 3 ?
                                                            <div>
                                                                <div>
                                                                    <Input
                                                                        style={{ width: 200 }}
                                                                        placeholder="请输入统一社会信用代码"
                                                                        onChange={(e) => {
                                                                            this.setState({
                                                                                dataArrar: e.target.value
                                                                            })
                                                                        }}
                                                                    />
                                                                </div>
                                                                <div style={{ color: "red", position: "absolute" }}>如,科德集团则填写91430105670766451M</div>
                                                            </div>
                                                            : ''
                                        }
                                    </div>
                                </div>
                            </div> : this.props.type === 'journal' ?
                                <div>
                                    <Spin spinning={this.state.loading} >
                                        <Table
                                            columns={this.state.colunmn}
                                            dataSource={this.state.dataSource}
                                            pagination={false}
                                            scroll={{ x: "max-content", y: 0 }}
                                            bordered
                                            size="small"
                                        />
                                    </Spin>
                                </div> : null
                        }
                        {
                            this.props.type === 'modify' ?
                                <Popconfirm placement="top" title="确定要修改吗?" onConfirm={(e) => {
                                    e.stopPropagation();
                                    this.onOk();
                                }} okText="确定" cancelText="取消">
                                    <Button type='primary'>
                                        确定修改
                                    </Button>
                                </Popconfirm> : null
                        }
                    </div>
                </Modal >
            </div >
        )
    }
}

export default InforChange;
