import React,{Component} from "react";
import {Button, message, Modal, Popconfirm, Spin, Table, Tabs, Tooltip} from "antd";
import {getSocialAttribute,ShowModal,getChannelAllocationStatus} from "@/tools.js";
import $ from "jquery/src/ajax";

const {TabPane} = Tabs;

class DuplicateData extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                {
                    title: "客户名称",
                    dataIndex: "userName",
                    key: "userName",
                    render:(text)=>{
                        return (
                            <Tooltip title={text}>
                                <div 
                                // style={{
                                //     maxWidth:'150px',
                                //     overflow:'hidden',
                                //     textOverflow: "ellipsis",
                                //     whiteSpace:'nowrap',
                                // }}
                                >{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "地区",
                    dataIndex: "locationProvince",
                    key: "locationProvince",
                },
                {
                    title: "社会性质",
                    dataIndex: "societyTag",
                    key: "societyTag",
                    // render: (text) => {
                    //     return getSocialAttribute(text);
                    // },
                },
                {
                    title: "客户联系人",
                    dataIndex: "contacts",
                    key: "contacts",
                },
                {
                    title: "联系电话",
                    dataIndex: "contactMobile",
                    key: "contactMobile",
                },
                {
                    title: "导入时间",
                    dataIndex: "createTimes",
                    key: "createTimes",
                },
                {
                    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>
                        )
                    }
                },
                {
                    title: "未导入原因",
                    dataIndex: "status",
                    key: "status",
                    render: (text) => (
                        getChannelAllocationStatus(text,true)
                    )
                },
            ],
            selectedRows:[],
            selectedRowKeys:[],
            dataSource:[],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return "共" + total + "条数据";
                },
            },
            listLoading:false
        }
        this.loadData = this.loadData.bind(this);
        this.confirmDeletNew = this.confirmDeletNew.bind(this);
    }

    componentDidMount() {
        this.loadData();
    }

    // 删除供应商信息
    confirmDeletNew() {
        const hide = message.loading('删除中...', 0);
        let changeIds = '';
        for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
            let rowItem = this.state.selectedRows[idx];
            if (rowItem.id) {
                changeIds = this.state.selectedRows.length-1 === idx ? changeIds +rowItem.id : changeIds + rowItem.id + ',' ;
            }
        }
        $.ajax({
            url: globalConfig.context + '/api/user/channel/delete',
            method: 'post',
            data: {
                ids: changeIds,
            },
        }).done(
            function (data) {
                hide();
                if (!data.error.length) {
                    message.success('删除成功！');
                    this.setState({
                        selectedRows:[],
                        selectedRowKeys:[],
                    })
                    this.loadData(this.state.pageNo);
                } else {
                    message.warning(data.error[0].message)
                }
            }.bind(this)
        )
    }

    loadData(pageNo = 1) {
        if(this.props.duplicateData.length === 0){
            this.setState({
                listLoading: true,
            });
            $.ajax({
                method: "get",
                dataType: "json",
                crossDomain: false,
                url: globalConfig.context + '/api/user/channel/erorrList',
                data: {
                    pageNo: pageNo || 1,
                    pageSize: this.state.pagination.pageSize,
                },
                success: function (data) {
                    ShowModal(this);
                    let theArr = [];
                    if (data.error.length > 0) {
                        message.warning(data.error[0].message);
                    } 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.locationProvince = diqu;
                            theArr.push(thisdata);
                        }
                        if(data.data.list.length === 0 && pageNo > 1){
                            this.loadData(pageNo - 1);
                        }else{
                            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)
            );
        }else{
            let arr = this.props.duplicateData.slice((pageNo-1)*10,pageNo*10);
            this.state.pagination.current = pageNo;
            this.state.pagination.total = this.props.duplicateData.length;
            for (let i = 0; i < arr.length; i++) {
                let diqu =
                    (arr[i].province == null ? "" : arr[i].province) +
                    (arr[i].city == null ? "" : "-" + arr[i].city) +
                    (arr[i].area == null ? "" : "-" + arr[i].area);
                arr[i].locationProvince = diqu
            }
            this.setState({
                pageNo: pageNo,
                dataSource: arr,
                pagination: this.state.pagination,
            })
        }
    }

    download() {
        window.location.href =
            globalConfig.context +
            "/api/user/channel/export"
    }

    render() {
        const rowSelection = {
            hideDefaultSelections: true,
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys,
                });
            },
        };
        return (
            <Modal
                width={1000}
                title="错误外联数据"
                visible={this.props.visible}
                footer={false}
                onCancel={()=>{
                    this.props.onCancel();
                }}
            >
                <Tabs
                    defaultActiveKey="1"
                    className="test"
                >
                    <TabPane tab="操作" key="1">
                        <Button
                            disabled={!this.state.dataSource.length}
                            onClick={(e) => {
                                e.stopPropagation();
                                this.download();
                            }}
                            type="primary"
                            style={{
                                marginRight: "10px",
                                margin: '10px',
                            }}
                        >
                            导出错误外联客户
                        </Button>
                        <Popconfirm
                            title="是否删除?"
                            onConfirm={() => {
                                this.confirmDeletNew()
                            }}
                            okText="删除"
                            cancelText="不删除"
                        >
                            <Button
                                disabled={this.state.selectedRows.length === 0}
                                onClick={(e) => {
                                    e.stopPropagation();
                                }}
                                type="danger"
                            >
                                删除
                            </Button>
                        </Popconfirm>
                    </TabPane>
                </Tabs>
                <Spin spinning={this.state.listLoading}>
                    <Table
                        size="middle"
                        className={'intentionCustomerTable'}
                        columns={this.state.columns}
                        dataSource={this.state.dataSource}
                        rowSelection={rowSelection}
                        pagination={this.state.pagination}
                    />
                </Spin>
            </Modal>
        )
    }
}

export default DuplicateData;