import React, { Component } from 'react';
import { message, Modal, Spin, Table, Tooltip, Tag } from "antd";
import PropTypes from 'prop-types';
import $ from "jquery/src/ajax";

class CustomerDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            columns: [{
                title: '客户名称',
                dataIndex: 'name',
                key: 'name'
            }, {
                title: '来源',
                dataIndex: 'sourceName',
                key: 'sourceName',
                width: 75,
            }, {
                title: '联系人(部门/职务)',
                dataIndex: 'contacts',
                key: 'contacts',
                width: 155,
                render: (text, record) => {
                    if (!text) { return '' }
                    let str = text + '(' + (record.contactsDep ? record.contactsDep : ' ') + '/' + (record.contactsPosition ? record.contactsPosition : ' ') + ')';
                    return (
                        <Tooltip title={str}>
                            <div style={{
                                maxWidth: '155px',
                                overflow: 'hidden',
                                textOverflow: "ellipsis",
                                whiteSpace: 'nowrap',
                            }}>{str}</div>
                        </Tooltip>
                    )
                }
            }, {
                title: '联系人电话',
                dataIndex: 'contactMobile',
                key: 'contactMobile'
            }, {
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                width: 145,
            }, {
                title: '跟进时间',
                dataIndex: 'followTime',
                key: 'followTime',
                width: 145,
            }, {
                title: '企业主营',
                dataIndex: 'businessScope',
                key: 'businessScope',
                width: 200,
                render: (text) => {
                    return (
                        <Tooltip title={text}>
                            <div style={{
                                maxWidth: '200px',
                                overflow: 'hidden',
                                textOverflow: "ellipsis",
                                whiteSpace: 'nowrap',
                            }}>{text}</div>
                        </Tooltip>
                    )
                }
            }, {
                title: '意向合作',
                dataIndex: 'intendedProject',
                key: 'intendedProject',
                width: 200,
                render: (text) => {
                    return (
                        <Tooltip title={text}>
                            <div style={{
                                maxWidth: '200px',
                                overflow: 'hidden',
                                textOverflow: "ellipsis",
                                whiteSpace: 'nowrap',
                            }}>{text}</div>
                        </Tooltip>
                    )
                }
            },],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            }
        }
        this.loadData = this.loadData.bind(this);
        this.isView = this.isView.bind(this);
    }

    componentDidMount() {
        this.loadData();
    }

    loadData(pageNo) {
        this.setState({
            loading: true
        })
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/selectAdminCustomerList",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                aid: this.props.aid,
                type: this.props.type,                       //0 所有 1新增 2领取 3已签 4面谈
                startTime: this.props.startTime,
                endTime: this.props.endTime,
            },
            success: function (data) {
                let theArr = [];
                if (data.error.length || data.data.list == "") {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        thisdata.key = i;
                        theArr.push(thisdata);
                    };
                    this.state.pagination.current = pageNo;
                    this.state.pagination.total = data.data.totalCount;
                };
                if (!data.data.list.length) {
                    this.state.pagination.current = 0
                    this.state.pagination.total = 0
                }
                this.setState({
                    dataSource: theArr,
                    pagination: this.state.pagination,
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }
    // 判断是否有权限查看详情
    isView() {
        // 11=运营管理，12=总裁助理，13=总裁
        let iskeep =
            window.adminData.shiroList.indexOf("11") != -1 ||
            window.adminData.shiroList.indexOf("12") != -1 ||
            window.adminData.shiroList.indexOf("13") != -1
        // 
        let isName = this.props.aName.indexOf("曹津") != -1
        if (iskeep && isName) {
            return false
        } else {
            return true
        }
    }

    render() {
        return (
            <div>
                <Modal
                    maskClosable={true}
                    visible={this.props.visible}
                    onOk={this.props.onCancel}
                    onCancel={this.props.onCancel}
                    width='1300px'
                    title={
                        <span>
                            <span style={{ marginRight: '15px' }}>客户详情</span>
                            <Tag color="#f50">{this.props.aName}</Tag>
                            <Tag color="#108ee9">
                                {
                                    this.props.type === 0 ?
                                        '私有客户' :
                                        this.props.type === 1 ?
                                            '外联客户' :
                                            this.props.type === 2 ?
                                                '签单客户' :
                                                this.props.type === 3 ?
                                                    '私有新增客户' :
                                                    this.props.type === 4 ?
                                                        '外联新增客户' :
                                                        this.props.type === 5 ?
                                                            '私有面谈客户' :
                                                            this.props.type === 6 ?
                                                                '外联面谈客户' :
                                                                this.props.type === 7 ?
                                                                    '私有领取客户' : ''
                                }
                            </Tag>
                        </span>
                    }
                    footer=''
                    className="admin-desc-content">
                    <div className="patent-table">
                        <Spin spinning={this.state.loading}>
                            {
                                this.isView()
                                    ? <Table
                                        columns={this.state.columns}
                                        dataSource={this.state.dataSource}
                                        pagination={this.state.pagination}
                                    />
                                    : <div style={{ padding: "40px 0", textAlign: "center", color: "red", fontSize: "20px" }}>
                                        暂无权限查看
                                    </div>

                            }
                        </Spin>
                    </div>
                </Modal>
            </div>
        );
    }
}

CustomerDetails.propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    aid: PropTypes.number,      //员工ID
    type: PropTypes.number,     //列表类型 客户总数 成交客户总数 新增客户数等等
    startTime: PropTypes.string, //开始时间
    endTime: PropTypes.string,   //结束时间
}

CustomerDetails.defaultProps = {
    visible: false,
    onCancel: () => { }
}

export default CustomerDetails;