import React,{Component} from "react";
import {Button, message, Modal, Spin, Table, Tag, Tooltip} from "antd";
import {
    getSocialAttribute,
    getChannelAllocationStatus
} from "@/tools.js";
import {
    channelAllocationStatus
} from "@/dataDic.js";
import $ from "jquery/src/ajax";
import IntentionDetail from "./intentionDetail/intentionDetail";

class StatisticalDetails extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                {
                    title: "客户名称",
                    dataIndex: "userName",
                    key: "userName",
                    width:250,
                    render: (text,record) => {
                        return (
                            <Tooltip title={text}>
                              <div 
                              // style={{
                              //     maxWidth:'250px',
                              //     overflow:'hidden',
                              //     textOverflow: "ellipsis",
                              //     whiteSpace:'nowrap',
                              // }}
                              >
                                  {record.recovery === 1 ? <div style={{
                                      background:'#ef7207',
                                      color:'#FFF',
                                      padding: '1px 7px',
                                      borderRadius:'5px',
                                      fontSize:'12px',
                                      display: 'inline-block',
                                      marginRight:'10px'
                                  }}>
                                      回收
                                  </div> : null}
                                  {text}
                              </div>
                            </Tooltip>
                        )
                    },
                },
                {
                    title: "地区",
                    dataIndex: "locationProvince",
                    key: "locationProvince",
                },
                {
                    title: "社会性质",
                    dataIndex: "societyTag",
                    key: "societyTag",
                    render: (text) => {
                        return getSocialAttribute(text);
                    },
                },
                {
                    title: "外联专员",
                    dataIndex: "channelName",
                    key: "channelName",
                },
                {
                    title: "客户联系人",
                    dataIndex: "contacts",
                    key: "contacts",
                },
                {
                    title: "联系电话",
                    dataIndex: "contactMobile",
                    key: "contactMobile",
                },
                {
                    title: "外联初始时间",
                    dataIndex: "createTimes",
                    key: "createTimes",
                },
                {
                    title: "分配状态",
                    dataIndex: "status",
                    key: "status",
                    render: (text) => (
                        getChannelAllocationStatus(text,true)
                    )
                },
                {
                    title: "当前跟进人",
                    dataIndex: "adminName",
                    key: "adminName",
                    render: (text, record) => {
                        return (
                            record.status !== 0 ? text : ''
                        )
                    }
                },
                {
                    title: "跟进操作",
                    dataIndex: "abc",
                    key: "abc",
                    render: (text, record, index) => {
                        return (
                            <div style={{
                                display: 'flex',
                                flexFlow:'row',
                                alignItems:'center',
                            }}>
                                <Button
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.tableRowClick(record);
                                    }}
                                    type="primary"
                                >
                                    查看指导
                                </Button>
                            </div>
                        );
                    },
                },
                {
                    title: "备注",
                    dataIndex: "remarks",
                    key: "remarks",
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                }
            ],
            dataSource:[],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return "共" + total + "条数据";
                },
            },
            pageNo:1,
            listLoading:false,
            categoryArr:[],
        }
        this.tableRowClick = this.tableRowClick.bind(this);
        this.category = this.category.bind(this);
        this.detailCloseDesc = this.detailCloseDesc.bind(this);
        this.loadData = this.loadData.bind(this);
    }

    tableRowClick(record) {
        this.category();
        this.setState({
            rowData:record,
            modalVisible: true,
            basicState: true,
            contactState: true,
            modalName: record.userName
        })
    }

    componentWillReceiveProps (nextProps){
        if(nextProps.visible){
            this.loadData(1,nextProps);
        }
    }

    loadData(pageNo = 1,nextProps=this.props) {
        this.setState({
            listLoading: true,
            selectedRows: [],
            selectedRowKeys: [],
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/customer/listChannelCustomer',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                type:nextProps.type,                     // 0营销员 1外联专员 2营销总监 3营销经理 4释放 5未分配 6已分配 7已签单
                aid:nextProps.aid
            },
            success: function (data) {
                let theArr = [];
                if (data.error.length > 0) {
                    message.warning(data.error[0].message);
                } else {
                    if(data.data.list.length === 0 && pageNo !== 1){
                        this.loadData(pageNo - 1)
                    }else{
                        for (let i = 0; i < data.data.list.length; i++) {
                            let thisdata = data.data.list[i];
                            let diqu =
                                (thisdata.province == null ? "" : thisdata.province) +
                                (thisdata.city == null ? "" : "-" + thisdata.city) +
                                (thisdata.area == null ? "" : "-" + thisdata.area);
                            thisdata.key = i;
                            thisdata.id = thisdata.uid;
                            thisdata.lastFollowTime = thisdata.lastFollowTime &&
                                thisdata.lastFollowTime.split(" ")[0];
                            thisdata.transferTime= thisdata.transferTime && thisdata.transferTime.split(" ")[0];
                            thisdata.surplusFollowTime = thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];
                            thisdata.surplusSignTime = thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];
                            thisdata.locationProvince = diqu;
                            theArr.push(thisdata);
                        }
                        this.state.pagination.current = data.data.pageNo;
                        this.state.pagination.total = data.data.totalCount;
                        this.setState({
                            pageNo: data.data.pageNo,
                            dataSource: theArr,
                            pagination: this.state.pagination,
                        })
                    }
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    listLoading: false,
                });
            }.bind(this)
        );
    }

    category() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/Varieties/getSuperList",
            data: {},
            success: function (data) {
                let thedata = data.data;
                let theArr = [];
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                    thedata = {};
                } else {
                    thedata.map(function (item, index) {
                        theArr.push({
                            value: item.id,
                            key: item.cname,
                        });
                    });
                }
                this.setState({
                    categoryArr: theArr,
                });
            }.bind(this),
        });
    }

    detailCloseDesc(){
        this.setState({
            rowData:'',
            modalVisible: false,
            basicState: false,
            contactState: false,
            modalName: '',
        },()=>{
            this.loadData(this.state.pageNo);
        })
    }

    render() {
        return (
            <Modal
                maskClosable={false}
                className="customeDetails"
                footer=""
                title={
                    <span>
                        <span style={{marginRight:'15px'}}>详细列表</span>
                        <Tag color="#f50">{this.props.aName}</Tag>
                        <Tag color="#108ee9">
                            {
                                this.props.type === 1?
                                    '当前客户总数':
                                    this.props.type === 4?
                                        '释放客数':
                                        this.props.type === 5?
                                            '未分配数':
                                            this.props.type === 6?
                                                '已分配数':
                                                this.props.type === 7?
                                                    '已签单数': ''
                            }
                        </Tag>
                    </span>
                }
                width="1200px"
                visible={this.props.visible}
                onOk={this.props.onCancel}
                onCancel={this.props.onCancel}
            >
                <Spin spinning={this.state.listLoading}>
                    <Table
                        size="middle"
                        className={'intentionCustomerTable'}
                        columns={this.state.columns}
                        dataSource={this.state.dataSource}
                        pagination={this.state.pagination}
                        onRowClick={this.tableRowClick}
                    />
                </Spin>
                <IntentionDetail
                    categoryArr={this.state.categoryArr}
                    detailApi='/api/admin/customer/findOrganizationCustomerDetail'
                    IntentionData={this.state.rowData}
                    modalVisible={this.state.modalVisible}
                    name={this.state.modalName}
                    closeDesc={this.detailCloseDesc}
                    basicState={this.state.basicState}
                    contactState={this.state.contactState}
                    isGuidanceLv={true}
                    isEditGuidanceLv={false}
                />
            </Modal>
        );
    }
}

export default StatisticalDetails;