import React,{Component} from "react";
import {
    AutoComplete,
    Button,
    Cascader,
    DatePicker,
    Input,
    message,
    Select,
    Spin,
    Table,
    Tabs,
    Tooltip,
    Upload,
    Modal, Tag
} from "antd";
import {ChooseList} from "../../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import {
    getSocialAttribute,
    ShowModal,
    getChannelAllocationStatus
} from "@/tools.js";
import {
    channelAllocationStatus
} from "@/dataDic.js";
import { citySelect, provinceList } from '@/NewDicProvinceList';
import moment from "moment";
import FollowDetail from "./followDetail";
import IntentionDetail from "./intentionDetail/intentionDetail";
import TransferRecords from './transferRecords';
import DuplicateData from './duplicateData';
import OperationTips from './operationTips';
import ShowModalDiv from "@/showModal.jsx";

import './channel.less';
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";

const {TabPane} = Tabs;
const { RangePicker } = DatePicker;
const Option = Select.Option;

class Channel extends Component{
    constructor(props) {
        super(props);
        this.state={
            isGuidance:false,
            isEditGuidance: true,
            upLoadFileLoading:false,
            channelAllocationStatusList : channelAllocationStatus.slice(0,channelAllocationStatus.length-2),
            columns: [
                {
                    title: "客户名称",
                    dataIndex: "userName",
                    key: "userName",
                    render: (text,record) => {
                        return (
                            <span>
                                {record.recovery === 1 ? <div style={{
                                    background:'#ef7207',
                                    color:'#FFF',
                                    padding: '1px 7px',
                                    borderRadius:'5px',
                                    fontSize:'12px',
                                    display: 'inline-block',
                                    marginRight:'10px'
                                }}>
                                    回收
                                </div> : null}
                                <Tooltip title={text}>
                                    <div 
                                    // style={{
                                    //     maxWidth:'150px',
                                    //     overflow:'hidden',
                                    //     textOverflow: "ellipsis",
                                    //     whiteSpace:'nowrap',
                                    // }}
                                    >{text}</div>
                                 </Tooltip>
				            </span>
                        )
                    },
                },
                {
                    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)
                    )
                },
            ],
            changeList:[],
            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,


            selectedRowKeys:[],
            selectedRows:[],
            modalVisible:false,


            nameSearch:'',
            statusSearch:undefined,
            provinceSearch:undefined,
            addressSearch:[],
            releaseDate:[],

            upLoad: {
                customRequest: (options) => {
                    this.setState({
                        upLoadFileLoading: true,
                    })
                    let params = new FormData();
                    params.append("file", options.file);
                    $.ajax({
                        method: "post",
                        url: globalConfig.context + "/api/user/channel/import",
                        async: true,
                        cache: false,
                        contentType: false,
                        processData: false,
                        data:params
                    }).done(
                        function (data) {
                            this.setState({
                                upLoadFileLoading: false,
                            })
                            if (data.error.length === 0) {
                                if(data.data === 1){
                                    message.success("导入成功！");
                                }else if(data.data.list.length > 0){
                                    message.warning('已成功导入！错误/重复客户无法导入，请查看错误外联数据！');
                                    this.setState({
                                        duplicateData: [],
                                        duplicateDataVisible: true
                                    })
                                }
                                this.loadData();
                            } else {
                                message.warning(data.error[0].message);
                                this.loadData();
                            }
                        }.bind(this)
                    ).always(
                        function () {
                            this.loadData();
                            this.setState({
                                upLoadFileLoading: false,
                            });
                        }.bind(this)
                    );
                },
                name: "file",
                action: globalConfig.context + "/api/user/channel/import",
            },

            followData: '',
            visitModul: false,
            categoryArr:[],
            tabsKey:'',
            adminList:[],
        }
        this.loadData = this.loadData.bind(this);
        this.search = this.search.bind(this);
        this.reset = this.reset.bind(this);
        this.changeList = this.changeList.bind(this);
        this.download = this.download.bind(this);
        this.category = this.category.bind(this);
        this.closeDesc = this.closeDesc.bind(this);
        this.guidanceRead = this.guidanceRead.bind(this);
        this.tableRowClick = this.tableRowClick.bind(this);
        this.detailCloseDesc = this.detailCloseDesc.bind(this);
        this.supervisor = this.supervisor.bind(this);
        this.httpChange = this.httpChange.bind(this);
        this.blurChange = this.blurChange.bind(this);
        this.selectAuto = this.selectAuto.bind(this);
        this.changeAssigner = this.changeAssigner.bind(this);
        this.getAdminList = this.getAdminList.bind(this);
    }

    componentWillReceiveProps (nextProps) {
        let next = JSON.stringify(nextProps);
        let props = JSON.stringify(this.props);
        if(next !== props){
            location.reload();
        }
    }

    componentDidMount() {
        this.initialization();
    }

    //获取外联专员列表
    getAdminList(value = '') {
        this.setState({
            adminListLoading:true
        })
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/superviser/adminList",
            data: {
                pageNo: 1,
                pageSize: 99,
                name: value,
                roleName: '外联专员',
            },
            success: function (data) {
                let thedata = data.data.list;
                let theArr = [];
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                }else{
                    thedata.map(function (item, _) {
                        theArr.push({
                            value: item.id,
                            label: item.name,
                        });
                    });
                }
                this.setState({
                    adminList: theArr,
                });
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    adminListLoading:false
                })
            }.bind(this)
        );
    }

    initialization(){
        //城市
        let provinces = [];
        provinceList.map(function (item) {
            var id = String(item.id);
            provinces.push(
                <Select.Option value={id} key={item.name}>
                    {item.name}
                </Select.Option>
            );
        });
        this.setState({
            provinces
        })
        this.loadData();
        this.category();

        if(this.props.type === 0 || this.props.type === 3){
            this.state.columns.push({
                title: "分配时间",
                dataIndex: "distributionTimes",
                key: "distributionTimes",
            });
            this.state.columns.push({
                title: "剩余签单(天)",
                dataIndex: "days",
                key: "days",
                render: (text,record) => (
                    record.status !== 7 ? <Tag color='#f00'>{text}天</Tag> : ''
                )
            });
        }

        if(this.props.followUp){
            this.state.columns.push({
                title: "当前跟进人",
                dataIndex: "adminName",
                key: "adminName",
                render: (text, record) => {
                    return (
                        record.status !== 0 ? text : ''
                    )
                }
            });
            this.state.columns.push({
                title: "跟进操作",
                dataIndex: "abc",
                key: "abc",
                render: (text, record, index) => {
                    return (
                        <div style={{
                            display: 'flex',
                            flexFlow:'row',
                            alignItems:'center',
                        }}>
                            <Button
                                disabled={this.props.deliver === 2 && record.status === 2 && this.props.isEditGuidanceLv}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    if(this.props.isEditGuidanceLv){
                                        this.visit(record);
                                    }else{
                                        this.tableRowClick(record);
                                    }

                                }}
                                type="primary"
                            >
                                {this.props.isEditGuidanceLv ? '客户跟进' : '查看指导'}
                            </Button>
                        </div>
                    );
                },
            });
            if(this.props.isEditGuidanceLv){
                this.state.columns.push({
                    title: "指导意见",
                    dataIndex: "guidance",
                    key: "guidance",
                    render: (text, record, index) => {
                        return (
                            <div style={{
                                display: 'flex',
                                flexFlow:'row',
                                alignItems:'center',
                            }}>
                                {/*指导 0无 1未读 2已读*/}
                                {text === 1 || text === 2 ? <Button
                                    style={text === 1 ? {
                                        background:'#F00000',
                                        borderColor:'#F00000'
                                    } : {}}
                                    onClick={(e)=>{
                                        e.stopPropagation();
                                        this.guidanceRead(record.uid).then(()=>{
                                            this.setState({
                                                tabsKey:"4",
                                            },()=>{
                                                this.tableRowClick(record)
                                            })
                                        })
                                    }}
                                    type="primary"
                                >
                                    {text === 1 ? '未读' : '查看'}
                                </Button> : <div>暂无指导</div>}
                            </div>
                        );
                    },
                });
            }
        }
        this.state.columns.push({
            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>
                )
            }
        });
        this.setState({
            columns:this.state.columns
        })
    }

    visit(e) {
        this.setState({
            followData: e,
            visitModul: true,
        });
    }

    loadData(pageNo = 1) {
        this.setState({
            listLoading: true,
            selectedRows: [],
            selectedRowKeys: [],
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/customer/listChannelCustomer',
            data: {
                type:this.props.type,
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                name: this.state.nameSearch,
                status:this.state.statusSearch,
                province: !this.state.addressSearch.length
                    ? this.state.provinceSearch
                    : this.state.addressSearch[0],
                city: !this.state.addressSearch.length
                    ? ""
                    : this.state.addressSearch[1],
                startTime: this.state.releaseDate[0],
                endTime: this.state.releaseDate[1],
                aid:this.state.adminValue,
            },
            success: function (data) {
                ShowModal(this);
                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)
        );
    }

    search(){
        this.loadData();
    }

    reset(){
        this.setState({
            nameSearch:'',
            provinceSearch:undefined,
            addressSearch:[],
            releaseDate:[],
            statusSearch:undefined,
            adminValue:undefined,
        },()=>{
            this.loadData();
        })
    }

    download() {
        window.location.href =
            globalConfig.context +
            "/api/user/channel/downloadTemplate?" +
            "sign=user_channel";
    }

    changeList(arr) {
        const newArr = [];
        this.state.columns.forEach(item => {
            arr.forEach(val => {
                if (val === item.title) {
                    newArr.push(item);
                }
            });
        });
        this.setState({
            changeList: newArr
        });
    }

    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),
        });
    }

    closeDesc(){
        this.setState({
            followData:'',
            visitModul:false
        })
    }

    //已读指导记录
    guidanceRead(id) {
        return new Promise((resolve,reject)=>{
            $.ajax({
                method: "post",
                dataType: "json",
                crossDomain: false,
                url: globalConfig.context + "/api/admin/customer/pushGuidance",
                data: {
                    uid: id,
                }
            }).done(function(data) {
                if(!data.error.length) {
                    resolve();
                } else {
                    message.warning(data.error[0].message);
                    reject();
                };
            }.bind(this));
        })
    }

    tableRowClick(record) {
        if(this.props.deliver === 2 && record.status === 2 && this.props.isEditGuidanceLv){
            this.setState({
                isGuidance: true,
                tabsKey:"4",
            })
        }
        //营销经理人员 取消指导自己的操作
        if(this.props.deliver === 2 && record.status === 1 && this.props.isEditGuidanceLv){
            this.setState({
                isEditGuidance: false,
            })
        }
        //营销人员 取消指导的操作
        if(this.props.deliver === 0 && record.status === 2 && this.props.isEditGuidanceLv){
            this.setState({
                isEditGuidance: false,
            })
        }
        this.setState({
            rowData:record,
            modalVisible: true,
            basicState: true,
            contactState: true,
            modalName: record.userName
        })
    }

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

    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 () {

            }.bind(this)
        );
    }

    httpChange(e) {
        if (e.length >= 1) {
            this.supervisor(e);
        }
        this.setState({
            auto: e,
        });
    }

    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,
        });
    }

    selectAuto(value, options) {
        this.setState({
            auto: value,
        });
    }

    changeAssigner(remarks,type,lv) {
        //type   0 总监分配 1经理分配 2回收
        let arr = this.state.selectedRows.filter(v=>v.status === 1);
        let arr1 = this.state.selectedRows.filter(v=>v.status === 2);
        let arr2 = this.state.selectedRows.filter(v=>v.status === 7);
        let arr3 = this.state.selectedRows.filter(v=>v.status === 6);
        if(type === 0 && (arr.length>0 || arr1.length>0)){
            message.warning('选中的信息中存在“已分配”数据,请取消这些选项后重新提交')
            return;
        }
        if(type === 1 && arr1.length>0){
            message.warning('选中的信息中存在“经理已分配”数据,请取消这些选项后重新提交')
            return;
        }
        //处于回收状态的客户经理和营销员不能点击回收
        if(this.props.deliver !== 1 && arr3.length>0){
            message.warning('外联客户已回收！待营销总监，重新分配')
            return;
        }
        //this.props.deliver && this.props.recovery   用于判断是否为经理
        if(this.props.deliver === 2 && this.props.recovery && type === 2 && arr1.length>0){
            message.warning('操作失败，存在客户已被分配营销员')
            return;
        }
        if(arr2.length>0){
            message.warning('不能操作已签单客户')
            return;
        }
        if(!remarks){
            message.warning(type === 1 ? "请输入分配原因" : type === 2 ? "请输入回收原因" : type === 0 ? "请输入分配原因" : "");
            return;
        }
        if (this.state.theTypes || lv) {
            this.setState({
                listLoading: true,
            })
            let changeIds  = '';
            let oldAid = '';
            for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
                let rowItem = this.state.selectedRows[idx];
                if(rowItem.recovery === 1 && type === 2){
                    let arr = this.state.selectedRows.filter(v => v.recovery === 1)
                    Modal.info({
                        title: '以下数据属于回收再分配资源,无法再次回收',
                        content: (
                            <div>
                                {
                                    arr.map(i=>(
                                        <div style={{paddingBottom:'7px'}}>{i.userName}</div>
                                    ))
                                }
                            </div>
                        ),
                        onOk() {},
                    });
                    return ;
                }
                if (rowItem.id) {
                    oldAid = rowItem.aid;
                    changeIds = this.state.selectedRows.length-1 === idx ? changeIds +rowItem.id : changeIds + rowItem.id + ',' ;
                }
            }

            $.ajax({
                method: "post",
                dataType: "json",
                crossDomain: false,
                url: globalConfig.context + "/api/admin/customer/channelCustomerDeliver",
                data: {
                    userIds: changeIds, //这一行数据的ID
                    receiveId: this.state.theTypes, //指定分配人的ID
                    remarks: remarks,
                    type,           //0总监分配  1经理分配 2回收
                },
            }).done(
                function (data) {
                    this.setState({
                        listLoading: false,
                    })
                    if (!data.error.length) {
                        message.success(type === 1 ? "分配成功！" : type === 2 ? "回收成功！" : type === 0 ? "分配成功！" : "");
                        this.setState({
                            auto: "",
                            loading: false,
                            selectedRowKeys: [],
                            visible:false,
                            recoveryVisible: false,
                        },()=>{
                            this.loadData(this.state.pageNo);
                        });
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this)
            );
        } else {
            message.warning("请输入分配人姓名");
        }
    }

    render() {
        const rowSelection = {
            hideDefaultSelections: true,
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    modalVisible: false,
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys,
                });
            },
            onSelect: (recordt, selected, selectedRows) => {
                this.setState({
                    modalVisible: false,
                });
            },
        };
        const dataSources = this.state.customerArr || [];
        const options = dataSources.map((group) => (
            <Select.Option key={group.id} value={group.name}>
                {group.name}
            </Select.Option>
        ));
        const hasSelected = this.state.selectedRowKeys.length > 0;
        return (
            <div className="user-content channel">
                <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
                <div className="content-title" style={{ marginBottom: 10 }}>
                    <span style={{ fontWeight: 900, fontSize: 16 }}>外联客户</span>
                </div>
                <div className="user-search">
                    <Tabs
                        defaultActiveKey="1"
                        className="test"
                    >
                        <TabPane tab="搜索" key="1">
                            <Input
                                placeholder="请输入客户名称"
                                value={this.state.nameSearch}
                                style={{ width: 150, marginRight: 10, marginLeft: 10 }}
                                onChange={(e) => {
                                    this.setState({ nameSearch: e.target.value });
                                }}
                            />
                            <Select
                                placeholder="分配状态"
                                style={{ width: 170 }}
                                value={this.state.statusSearch}
                                onChange={(e) => {
                                    this.setState({ statusSearch: e });
                                }}
                            >
                                {
                                    this.state.channelAllocationStatusList.map((v,key)=>(
                                        <Select.Option value={v.value} key={key}>
                                            {v.key}
                                        </Select.Option>
                                    ))
                                }
                            </Select>
                            <Select
                                placeholder="省"
                                style={{ width: 80 }}
                                value={this.state.provinceSearch}
                                onChange={(e) => {
                                    this.setState({ provinceSearch: e });
                                }}
                            >
                                {this.state.provinces}
                            </Select>
                            <span style={{ marginRight: "10px" }}>
                              <Cascader
                                  options={citySelect()}
                                  value={this.state.addressSearch}
                                  placeholder="选择城市"
                                  onChange={(e, pre) => {
                                      this.setState({ addressSearch: e });
                                  }}
                              />
                            </span>
                            <RangePicker
                                value={[
                                    this.state.releaseDate[0]
                                        ? moment(this.state.releaseDate[0])
                                        : null,
                                    this.state.releaseDate[1]
                                        ? moment(this.state.releaseDate[1])
                                        : null,
                                ]}
                                onChange={(data, dataString) => {
                                    this.setState({ releaseDate: dataString });
                                }}
                            />
                            {this.props.type !== 1 ? <Select
                                showSearch
                                value={this.state.adminValue}
                                style={{ width: 150,marginLeft:'10px' }}
                                onSearch={this.getAdminList}
                                onSelect={(v)=>{
                                    this.setState({
                                        adminValue:v
                                    })
                                }}
                                onFocus={this.getAdminList}
                                filterOption={false}
                                placeholder="请输入外联专员名称"
                            >
                                {this.state.adminList.map((v,k)=>(
                                    <Option key={k} value={v.value}>{v.label}</Option>
                                ))}
                            </Select> : null}
                            <Button
                                type="primary"
                                style={{ marginLeft: "10px", marginRight: 10 }}
                                onClick={this.search}
                            >
                                搜索
                            </Button>
                            <Button onClick={this.reset}>重置</Button>
                        </TabPane>
                        <TabPane tab="操作" key="2">
                            <div style={{
                                marginTop: 10,
                            }}>
                                {this.props.deliver ? <AutoComplete
                                    className="certain-category-search"
                                    dropdownClassName="certain-category-search-dropdown"
                                    dropdownMatchSelectWidth={false}
                                    style={{ width: "120px" }}
                                    dataSource={options}
                                    placeholder={this.props.deliver === 1 ? '输入分配人姓名' : '输入分配人姓名'}
                                    value={this.state.auto}
                                    onChange={this.httpChange}
                                    filterOption={true}
                                    onBlur={this.blurChange}
                                    onSelect={this.selectAuto}
                                    disabled={!hasSelected}
                                >
                                    <Input />
                                </AutoComplete> : ''}
                                {this.props.deliver ? <Button
                                    type="primary"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.setState({
                                            visible:true
                                        })
                                    }}
                                    disabled={!hasSelected}
                                    style={{ marginRight: 10 }}
                                >
                                    {this.props.deliver === 1 ? '分配' : '分配'}
                                </Button> : ''}
                                {this.props.recovery ? <Button
                                    type="primary"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.setState({
                                            recoveryVisible:true
                                        })
                                    }}
                                    disabled={!hasSelected}
                                    style={{ marginRight: 10 }}
                                >
                                    回收
                                </Button> : ''}
                                {this.props.deliver || this.props.recovery ? <Button
                                    type="primary"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.setState({
                                            transferVisible:true,
                                            transferId: this.state.selectedRows[0].uid
                                        })
                                    }}
                                    disabled={!hasSelected || this.state.selectedRows.length > 1}
                                    style={{ marginRight: 10 }}
                                >
                                    日志
                                </Button> : ''}
                                {this.props.channel ? <Upload {...this.state.upLoad} disabled={this.state.upLoadFileLoading}>
                                    <Button
                                        loading={this.state.upLoadFileLoading}
                                        type="primary"
                                        style={{ marginRight: "10px" }}
                                    >
                                        +批量导入外联客户
                                    </Button>
                                </Upload> : null}
                                {this.props.channel ? <Button
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.download();
                                    }}
                                    type="primary"
                                    style={{
                                        marginRight: "10px",
                                        background:'#f49f36',
                                        borderColor:'#f49f36'
                                    }}
                                >
                                    下载外联客户模板
                                </Button> : ''}
                                {this.props.channel ? <Button
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        this.setState({
                                            duplicateData: [],
                                            duplicateDataVisible: true
                                        })
                                    }}
                                    type="primary"
                                    style={{
                                        marginRight: "10px",
                                        background:'#ff2f00',
                                        borderColor:'#ff2f00'
                                    }}
                                >
                                    查看导入失败列表
                                </Button> : ''}
                                <EnterpriseNameChange
                                    type='journal'
                                    disabled={!(hasSelected && this.state.selectedRows.length === 1)}
                                    style={{ marginLeft: 10 }}
                                    enterpriseId={this.state.selectedRows[0] && this.state.selectedRows[0].id}/>
                            </div>
                        </TabPane>
                        <TabPane tab="更改表格显示数据" key="3">
                            <div style={{ marginLeft: 10 }}>
                                <ChooseList
                                    columns={this.state.columns}
                                    changeFn={this.changeList}
                                    changeList={this.state.changeList}
                                    top={55}
                                    margin={11}
                                />
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                <div className="patent-table">
                    <Spin spinning={this.state.listLoading}>
                        <Table
                            size="middle"
                            className={'intentionCustomerTable'}
                            columns={
                                this.state.changeList.length !== 0
                                    ? this.state.changeList
                                    : this.state.columns
                            }
                            dataSource={this.state.dataSource}
                            rowSelection={this.props.deliver || this.props.recovery ? rowSelection : ''}
                            pagination={this.state.pagination}
                            onRowDoubleClick={this.tableRowClick}
                        />
                    </Spin>
                </div>
                <FollowDetail
                    categoryArr={this.state.categoryArr}
                    followData={this.state.followData}
                    visitModul={this.state.visitModul}
                    closeDesc={this.closeDesc}
                />
                <IntentionDetail
                    tabsKey={this.state.tabsKey}
                    categoryArr={this.state.categoryArr}
                    detailApi={this.props.detailApi}
                    IntentionData={this.state.rowData}
                    modalVisible={this.state.modalVisible}
                    name={this.state.modalName}
                    closeDesc={this.detailCloseDesc}
                    basicState={this.state.basicState}
                    contactState={this.state.contactState}
                    isGuidanceLv={this.props.isGuidanceLv || this.state.isGuidance}
                    isEditGuidanceLv={this.props.isEditGuidanceLv && this.state.isEditGuidance}
                />
                {this.state.duplicateDataVisible ? <DuplicateData
                    duplicateData={this.state.duplicateData || []}
                    visible={this.state.duplicateDataVisible}
                    onCancel={()=>{
                        this.setState({
                            duplicateData:[],
                            duplicateDataVisible: false
                        },()=>{
                            this.loadData(this.state.pageNo);
                        })
                    }}
                /> : null}
                {this.state.transferVisible || this.state.returnVisible ? <TransferRecords
                    type={this.state.transferVisible ? (this.props.deliver === 1 ? 0 : 1) : this.state.returnVisible ? 2 : 0}
                    id={this.state.transferId}
                    visible={this.state.transferVisible || this.state.returnVisible}
                    cancel={()=>{
                        this.setState({
                            transferVisible:false,
                            returnVisible: false,
                            transferId:''
                        })
                    }}
                /> : '' }
                {/*外联客户分配*/}
                {this.state.visible ? <OperationTips
                    title={'外联客户分配'}
                    selectedRows={this.state.selectedRows}
                    visible={this.state.visible}
                    onOk={(value)=>{
                        // 0 总监分配 1经理分配 2回收
                        this.changeAssigner(value,this.props.deliver === 1 ? 0 : this.props.deliver === 2 ? 1 : '')
                    }}
                    onCancel={()=>{
                        this.setState({
                            visible:false
                        })
                    }}/> : ''}
                {/*外联客户回收*/}
                {this.state.recoveryVisible ? <OperationTips
                    title={'外联客户回收'}
                    selectedRows={this.state.selectedRows}
                    visible={this.state.recoveryVisible}
                    onOk={(value)=>{
                        this.changeAssigner(value,2,true)

                    }}
                    onCancel={()=>{
                        this.setState({
                            recoveryVisible:false
                        })
                    }}/> : ''}
                {this.state.upLoadFileLoading ? <div style={{
                    position:'fixed',
                    display:'flex',
                    flexFlow:'column',
                    justifyContent:'center',
                    alignItems:'center',
                    top:0,
                    bottom:0,
                    left:0,
                    right:0,
                    background:'rgba(0,0,0,.7)',
                    color:"#58a3ff",
                    fontSize:'20px',
                    zIndex:99999,
                }}>
                    <Spin spinning={this.state.upLoadFileLoading}/>
                    <div style={{paddingTop:'10px'}}>客户名称匹配中...</div>
                </div>: null}
            </div>
        )
    }
}

export default Channel;