import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Table, Button, Modal, Row, Col, Select, Dropdown, Menu, Icon, Popconfirm } from 'antd'
import { required, maxLength } from '../../components/widget/reduxForm/validate'
import { Field, reduxForm, change, reset, formValueSelector, getFormValues, initialize, submit, touch, untouch } from 'redux-form'
import { loadCustomList, loadCustomListDet, delContactsCustomer, exportCustomAction, postCustomerRecordAct, editCustomerBasicAct, getCustomerCommentsAction, delCustomerlistAction } from '../../redux/actions/custome'
import InputField from '../../components/widget/reduxForm/InputField';
import ReduxFormWrap from '../../components/reduxForm/ReduxFormWrap';
import { loadSubordinates } from '../../redux/actions/hr'
import cx from 'classnames'
import s from './customer.les'
import NoData from '../../components/widget/prompt/NoData'
import moment from 'moment'
import SearchForm from '../../components/widget/reduxForm/SearchForm'
import SearchFormInputField from '../../components/widget/reduxForm/SearchFormInputField'
import PaginationWrap from '../../components/widget/reduxForm/PaginationWrap'
import BreadcrumbWarp from '../../components/commondComponents/BreadcrumbWarp';

const Option = Select.Option

import { systemServiceProductMap, systemServiceProducts } from '../../utils/commonUtils';

const searchNameOptions = [
    { name: '客户名称', id: 'keysearch_name' },
    { name: '客户简称', id: 'keysearch_brief_name' },
    { name: '客户编号', id: 'keysearch_customer_no' },
    { name: '创建人', id: 'keysearch_creator' },
    { name: '创建人部门', id: 'keysearch_creator_org' },
    { name: '服务负责人', id: 'keysearch_service_admin' },
    { name: '销售负责人', id: 'keysearch_service_sale' },
    { name: '服务操作人', id: 'keysearch_service_operator' },
    { name: '雇员服务负责人', id: 'keysearch_employee_admin' },
    { name: '雇员服务操作人', id: 'keysearch_employee_operator' },
]

const searchOwnTypeOptions = [
    { name: '服务负责人', id: 'exact_service_admin' },
    { name: '销售负责人', id: 'exact_sale_admin' },
    { name: '服务操作人', id: 'exact_service_operator' },
    { name: '雇员服务负责人', id: 'exact_employee_admin' },
    { name: '雇员服务操作人', id: 'exact_employee_operator' },
]

const recordWaysData = [
    { name: '电话', id: '电话' },
    { name: '拜访', id: '拜访' },
    { name: '微信', id: '微信' },
    { name: 'QQ', id: 'QQ' },
    { name: '短信', id: '短信' },
    { name: '邮件', id: '邮件' },
    { name: '其他', id: '其他' },
]

const customerTenantStatus = [
    { name: '洽谈中', id: 'negotiate' },
    { name: '合作中', id: 'cooperation' },
    { name: '未合作', id: 'not_cooperation' },
]

const columsCustomerTenantStatus = {
    'negotiate': '洽谈中',
    'cooperation': '合作中',
    'not_cooperation': '未合作'
}

const formLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 }
}

const crumbsData = [
    { name: '客户', link: '#/container/customer', isLink: false },
    { name: '客户列表', link: '#/container/customer', isLink: false }
];

class CustomerContainer extends Component {
    constructor(props) {
        super(props);
        this.searchGrid = this.searchGrid.bind(this);
        this.linkExport = this.linkExport.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
        this.handleOk = this.handleOk.bind(this);
        this.submitFollows = this.submitFollows.bind(this);
        this.searcFollowshGrid = this.searcFollowshGrid.bind(this);
        this.state = {
            showFollows: false,
            searchNameSelect: 'keysearch_name',
            searchOwnSelect: 'exact_service_admin',
            keysearchPlaceholder: '客户名称',
            selectPlaceholder: '服务负责人',
        };
    }
    componentDidMount() {
        const { dispatch } = this.props
        dispatch(loadCustomListDet('limit=10&offset=0'))
        dispatch(loadSubordinates('?status=active&view_perm=1'))

    }

    linkExport() {
        const { dispatch, formAllValues } = this.props
        const { searchNameSelect, searchOwnSelect } = this.state
        let params = []
        params.push(`all=true`)
        if (formAllValues.owner_id && searchOwnSelect) {
            params.push(`&${searchOwnSelect}=${formAllValues.owner_id}`)
        }
        if (formAllValues.name && searchNameSelect) {
            params.push(`&${searchNameSelect}=${formAllValues.name}`)
        }
        if (formAllValues.customer_tenant_type) {
            params.push(`&customer_tenant_type=${formAllValues.customer_tenant_type}`)
        }
        if (formAllValues.customer_tenant_status) {
            params.push(`&customer_tenant_status=${formAllValues.customer_tenant_status}`)
        }
        dispatch(exportCustomAction(params.join('')))
    }

    handleSearch(value) {
        const { searchList } = this.refs
        searchList.searchGrid()
    }

    // 搜索
    searchGrid(values) {
        console.warn(values)
        const parmas = []
        const { dispatch } = this.props
        const { searchNameSelect, searchOwnSelect } = this.state
        parmas.push(`limit=${values.limit}`)
        parmas.push(`&offset=${values.offset}`)
        if (values.name && searchNameSelect) {
            parmas.push(`&${searchNameSelect}=${values.name}`)
        }
        if (values.owner_id && searchOwnSelect) {
            parmas.push(`&${searchOwnSelect}=${values.owner_id}`)
        }
        if (values.customer_tenant_type) {
            parmas.push(`&customer_tenant_type=${values.customer_tenant_type}`)
        }
        if (values.customer_tenant_status) {
            parmas.push(`&customer_tenant_status=${values.customer_tenant_status}`)
        }

        dispatch(loadCustomListDet(parmas.join('')))
    }

    // 添加跟进记录
    handleAddRecord(record) {
        const { dispatch, initialize, userInfo } = this.props
        dispatch(initialize({
            'showAddRecord': true,
            'recordBtnDisabled': false,
            'id': record.id,
            'name': userInfo && userInfo.user && userInfo.user.name ? userInfo.user.name : ''
        }))
    }

    // 弹窗确定
    handleOk() {
        const { dispatch, submit, change } = this.props
        // change('recordBtnDisabled', true)
        dispatch(submit());
    }

    // 弹窗取消事件
    handleCancel(type) {
        const { dispatch, change } = this.props
        switch (type) {
            case 'addRecord':
                change('showAddRecord', false)
                break
            case 'updateStatus':
                change('showUpdateStatus', false)
                break
            default:
                break
        }

    }

    // 添加跟进modal
    renderAddRecord() {
        const { showAddRecord, recordBtnDisabled } = this.props
        return (
            <Modal title={'添加跟进'} visible={showAddRecord}
                onCancel={this.handleCancel.bind(this, 'addRecord')}
                footer={[
                    <Button key="back" onClick={this.handleCancel.bind(this, 'addRecord')} style={{ marginRight: '0' }}>取消</Button>,
                    <Button type="primary" disabled={recordBtnDisabled} onClick={this.handleOk}>确定</Button>
                ]}>
                <Row style={{ marginTop: '10px' }}>
                    <Col span={25}>
                        <InputField label='跟进人员' name='name' type="text" disabled={true} />
                    </Col>
                    <Col span={25}>
                        <InputField label='方式' name='category' type="select" options={recordWaysData} validate={[required]} />
                    </Col>
                    <Col span={25} >
                        <InputField name='comment' label='备注' type="textarea" placeholder="请输入跟进记录（最多200字）" validate={[required, maxLength(200)]} />
                    </Col>
                </Row>
            </Modal>
        )
    }
    handleFollows(record) {
        const { userInfo = {} } = this.props;
        this.setState({
            showFollows: true,
            record: {
                'id': record.id,
                'customer_id': record.id,
                'name': userInfo && userInfo.user && userInfo.user.name ? userInfo.user.name : '',
                'created_at': moment().unix()
            }
        })
        this.searcFollowshGrid({
            'customer_id': record.id
        })
    }
    handleUpdateStatus(record) {
        console.warn(record)
        const { dispatch, initialize } = this.props
        dispatch(initialize({
            'showUpdateStatus': true,
            'customer_tenant_status': record.customer_tenant_status,
            'id': record.id,
        }))
    }
    handDelete = (record) => {
        console.log(record)
        const { dispatch } = this.props
        dispatch(delCustomerlistAction({ id: record.id })).then(data => {
            if (data.code && data.code > 300) {
            } else {
                dispatch(submit('customer_container_search'))
            }
        })
    }
    // 更新状态modal
    renderUpdateStatus() {
        const { showUpdateStatus } = this.props
        return (
            <Modal title={'更新状态'} visible={showUpdateStatus}
                onCancel={this.handleCancel.bind(this, 'updateStatus')}
                footer={[
                    <Button key="back" onClick={this.handleCancel.bind(this, 'updateStatus')} style={{ marginRight: '0' }}>取消</Button>,
                    <Button type="primary" onClick={this.handleOk}>确定</Button>
                ]}>
                <Row style={{ marginTop: '10px' }}>
                    <Col span={25}>
                        <InputField allowClear={false} label='状态' name='customer_tenant_status' type="select" options={customerTenantStatus} />
                    </Col>
                </Row>
            </Modal>
        )
    }
    submitFollows(values) {
        const { dispatch } = this.props, self = this;
        console.log("submitFollows", values);
        dispatch(postCustomerRecordAct(values)).then(data => {
            if (data && data.code == 200) {
                self.searcFollowshGrid(values)
                dispatch(reset('follows_add'))
            }
        })
    }
    searcFollowshGrid(values) {
        const { record = {} } = this.state;
        const { dispatch } = this.props;
        const { customer_id } = record;
        const parmas = [];
        parmas.push(`limit=${100}`);
        parmas.push(`&offset=${0}`);
        if (values.keysearch) {
            parmas.push(`&keysearch=${values.keysearch}`)
        }
        if (values.customer_id) {
            parmas.push(`&customer_id=${values.customer_id}`)
        } else if (customer_id) {
            parmas.push(`&customer_id=${customer_id}`)
        }
        dispatch(getCustomerCommentsAction(parmas.join('')))
    }
    renderFollowsModal() {
        const { showFollows, record } = this.state;
        const { userInfo, dispatch, customCommentsList } = this.props;
        const items = customCommentsList || [];
        const columns = [
            {
                title: '跟进人',
                width: 120,
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '跟进时间',
                width: 210,
                dataIndex: 'created_at',
                key: 'created_at',
                render: (text, record) => (
                    <span>{moment(text * 1000).format('YYYY-MM-DD HH:mm')}</span>
                )
            },
            {
                title: '跟进方式',
                width: 120,
                dataIndex: 'category',
                key: 'category'
            },
            {
                title: '跟进内容',
                width: 300,
                dataIndex: 'content',
                key: 'content'
            }
        ]
        const itemLayout = {
            labelCol: { span: 10 },
            wrapperCol: { span: 14 }
        };
        return (
            <Modal title={'跟进记录'} visible={showFollows} width={1000}
                onCancel={() => {
                    this.setState({ showFollows: false })
                }} footer={[
                    <Button key="back" type="primary" onClick={() => {
                        this.setState({ showFollows: false })
                    }} style={{ marginRight: '0' }}>关闭</Button>
                ]}>
                {showFollows && <div className={s.search_tool_bar} style={{ overflow: 'hidden', height: '50px' }}>
                    <SearchForm enableKeys={['keysearch']} formName='customer_follows_search' search={this.searcFollowshGrid} ref="searchFollowsList" rememberValue={false}>
                        <div style={{ display: 'inline-block', float: 'left' }}>
                            <SearchFormInputField size="default" name='keysearch' type="search" placeholder="请输入跟进人/跟进方式/跟进内容等信息进行搜索" allowClear={true} inputStyle={{ width: '270px' }} onSearch={() => {
                                const { searchFollowsList } = this.refs
                                searchFollowsList.searchGrid();
                            }}></SearchFormInputField>
                        </div>
                    </SearchForm>
                </div>}
                {
                    items && items.length > 0 ?
                        <div>
                            <Table dataSource={items} scroll={{ y: 300 }} columns={columns} bordered pagination={false} />
                        </div> : <div style={{ textAlign: 'center', fontSize: '20px', lineHeight: '120px', height: '120px' }}>
                            无跟进记录，请在下方添加
          </div>
                }
                {showFollows && <ReduxFormWrap form="follows_add" onSubmit={this.submitFollows} initialValues={record} >
                    <Row style={{ marginTop: '10px' }} align="middle" justify="start" type="flex">
                        <Col style={{ width: '110px' }}>
                            <div className={cx(s.mg_b)} style={{ marginBottom: '24px' }}>
                                <label className={cx(s.lable_title)}>跟进人：{(userInfo && userInfo.user && userInfo.user.name) ? userInfo.user.name : ''}</label>
                                <span className={cx(s.text_val)}>{record.creator}</span>
                            </div>
                        </Col>
                        <Col style={{ width: '200px' }}>
                            <InputField allowClear={true} label='跟进方式' crean formItemLayout={itemLayout} name='category' type="select" placeholder="请选择" options={recordWaysData} validate={[required]} />
                        </Col>
                        <Col style={{ width: '550px' }}>
                            <InputField allowClear={true} name='content' formItemLayout={{
                                labelCol: { span: 4 },
                                wrapperCol: { span: 20 }
                            }} label='跟进内容' type="text" inputStyle={{ width: '100%' }} placeholder="最多输入100个字" validate={[required, maxLength(100)]} />
                        </Col>
                        <Col style={{ marginLeft: 'auto' }}>
                            <div style={{ marginBottom: '28px' }}>
                                <Button type="primary" onClick={() => {
                                    dispatch(submit('follows_add'))
                                }}>添加跟进</Button>
                            </div>
                        </Col>
                    </Row>

                </ReduxFormWrap>}
            </Modal>
        )
    }

    // 模糊筛选选择
    handleSearchSelcetChange = (value, filed) => {
        const { dispatch } = this.props
        this.setState({
            searchNameSelect: value,
            keysearchPlaceholder: filed.props.children
        })
        dispatch(touch('customer_container_search', 'name'))
        setTimeout(() => {
            dispatch(untouch('customer_container_search', 'name'))
        }, 400)
    }

    // 负责人筛选
    handleSearchOwnChange = (value, filed) => {
        const { dispatch } = this.props
        this.setState({
            searchOwnSelect: value,
            selectPlaceholder: filed.props.children,
        })
        dispatch(touch('customer_container_search', 'owner_id'))
        setTimeout(() => {
            dispatch(untouch('customer_container_search', 'owner_id'))
        }, 400)
    }

    // 点击新增
    handleMenuClick = (e) => {
        const { dispatch } = this.props
        switch (e.key) {
            case 'addCustom':
                document.location.href = `#/main/customer/add`
                break
            case 'importBatch':
                document.location.href = `#/main/customer/import`
                break
            case 'importHistory':
                document.location.href = `#/container/customer_unormal_import`
                break
            default:
                break
        }
    }

    render() {
        const { keysearchPlaceholder, selectPlaceholder } = this.state
        const { customList: { total_count, items = [] }, subordinates } = this.props
        const columns = [
            {
                title: '客户名称',
                width: 200,
                dataIndex: 'name',
                fixed: 'left',
                key: 'name'
            },
            {
                title: '客户编号',
                width: 200,
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: '客户简称',
                width: 200,
                dataIndex: 'brief_name',
                key: 'brief_name'
            },
            {
                title: '创建人',
                width: 150,
                dataIndex: 'creator',
                key: 'creator'
            },
            {
                title: '创建人部门',
                width: 150,
                dataIndex: 'creator_org',
                key: 'creator_org'
            },
            {
                title: '创建时间',
                width: 150,
                dataIndex: 'created_at',
                key: 'created_at',
                render: (text, record) => (
                    <span>{moment(text * 1000).format('YYYY-MM-DD')}</span>
                )
            },
            {
                title: '联系人',
                width: 150,
                dataIndex: 'contact_name',
                key: 'contact_name'
            },
            {
                title: '联系人电话',
                width: 150,
                dataIndex: 'contact_mobile',
                key: 'contact_mobile'
            },
            {
                title: '业务类型',
                width: 150,
                dataIndex: 'customer_tenant_type',
                key: 'customer_tenant_type',
                render: (text, record) => (
                    <span>{systemServiceProductMap[record.customer_tenant_type]}</span>
                )
            },
            {
                title: '状态',
                width: 100,
                dataIndex: 'customer_tenant_status',
                key: 'customer_tenant_status',
                render: (text, record) => (
                    <span>{columsCustomerTenantStatus[record.customer_tenant_status]}</span>
                )
            },
            {
                title: '销售负责人',
                width: 150,
                dataIndex: 'biz_owner',
                key: 'biz_owner'
            },
            {
                title: '服务负责人',
                width: 150,
                dataIndex: 'service_owner',
                key: 'service_owner'
            },
            {
                title: '操作',
                width: 280,
                dataIndex: 'action',
                key: 'action',
                fixed: 'right',
                render: (text, record) => (
                    <span>
                        <a target="_blank" href={'#main/detail/' + record.id}>查看</a>
                        <span className="ant-divider" />
                        <a target="_blank" href={'/getCustomerQrcode?id=' + record.id}>生成二维码</a>
                        <span className="ant-divider" />
                        {/*<a target="_blank" onClick={this.handleAddRecord.bind(this, record)}>添加跟进</a>*/}
                        <a href="javascript:void(0);" onClick={this.handleFollows.bind(this, record)}>跟进记录</a>
                        <span className="ant-divider" />
                        <a target="_blank" onClick={this.handleUpdateStatus.bind(this, record)}>更新状态</a>
                        {/* <span className="ant-divider" />
            <Popconfirm overlayClassName="popover_zIndex" title='确定要删除此客户吗？' onConfirm={this.handDelete.bind(this, record)}>
              <a target="_blank" style={{ color: 'red' }}>删除</a> 
            </Popconfirm> */}
                    </span>
                )
            }
        ]
        // 操作
        const addMenu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="addCustom">新增客户</Menu.Item>
                <Menu.Item key="importBatch">批量导入</Menu.Item>
                <Menu.Item key="importHistory">导入记录</Menu.Item>
            </Menu>
        )
        return (
            <div>
                <BreadcrumbWarp crumbsData={crumbsData} />
                <div style={{ padding: '15px', marginTop: '15px', background: '#fff' }}>
                    <div className={s.search_tool_bar} style={{ overflow: 'hidden' }}>
                        <SearchForm enableKeys={['name']} formName='customer_container_search' search={this.searchGrid} ref="searchList" rememberValue={false}>
                            <div className='sraechRadius' style={{ display: 'inline-block', float: 'left' }}>
                                <Select defaultValue="keysearch_name" style={{ width: 120, float: 'left', marginTop: '2px' }} onSelect={this.handleSearchSelcetChange}>
                                    {
                                        searchNameOptions.map((item, index) => {
                                            return (
                                                <Option key={index} value={item.id}>{item.name}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            </div>
                            <div className='sraechRadius' style={{ display: 'inline-block', verticalAlign: 'top', float: 'left' }}>
                                <SearchFormInputField size="default" name='name' type="search" placeholder={`请输入${keysearchPlaceholder}进行查询`} allowClear={true} inputStyle={{ width: '224px' }} onSearch={this.handleSearch}></SearchFormInputField>
                            </div>
                            <div className='sraechRadius' style={{ marginLeft: '15px', display: 'inline-block', verticalAlign: 'top', float: 'left' }} >
                                <Select defaultValue="exact_service_admin" style={{ width: 120, float: 'left', marginTop: '2px' }} onSelect={this.handleSearchOwnChange}>
                                    {
                                        searchOwnTypeOptions.map((item, index) => {
                                            return (
                                                <Option key={index} value={item.id}>{item.name}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            </div>
                            <div className='selectRadius' style={{ display: 'inline-block', verticalAlign: 'top', float: 'left' }}>
                                <SearchFormInputField formItemLayout={formLayout} name='owner_id' showSearch={true} allowClear={true} type="select" options={subordinates} inputStyle={{ width: '155px' }} placeholder={`请选择${selectPlaceholder}`} />
                            </div>
                            <div style={{ marginLeft: '15px', display: 'inline-block', verticalAlign: 'top', float: 'left' }} >
                                <SearchFormInputField formItemLayout={formLayout} name='customer_tenant_type' showSearch={true} allowClear={true} type="select" options={systemServiceProducts} inputStyle={{ width: '125px' }} placeholder='请选择业务类型' />
                            </div>
                            <div style={{ marginLeft: '15px', display: 'inline-block', verticalAlign: 'top', float: 'left' }}>
                                <SearchFormInputField formItemLayout={formLayout} name='customer_tenant_status' showSearch={true} allowClear={true} type="select" options={customerTenantStatus} inputStyle={{ width: '125px' }} placeholder='请选择状态' />
                            </div>
                        </SearchForm>
                    </div>
                    <div style={{ overflow: 'hidden', paddingBottom: '20px' }}>
                        <Button style={{ float: 'right' }} onClick={() => { document.location.href = `#/container/customer/tmpSetting` }}>客户档案设置</Button>
                        <Button style={{ float: 'right', marginRight: '8px' }} onClick={this.linkExport}>导出</Button>
                        <Dropdown overlay={addMenu} trigger={['click']}>
                            <Button type='primary' style={{ width: '86px', float: 'right', marginRight: '8px' }}>新增<Icon type="down" /></Button>
                        </Dropdown>
                    </div>
                    {
                        items && items.length > 0 ?
                            <div>
                                <Table dataSource={items} scroll={{ x: 2180 }} columns={columns} bordered pagination={false} />
                                <PaginationWrap formName='customer_container_search' onChange={this.searchGrid}></PaginationWrap>
                            </div> : <NoData />
                    }
                </div>

                {this.renderAddRecord()}
                {this.renderUpdateStatus()}
                {this.renderFollowsModal()}
            </div>
        )
    }
}

const submitForm = (values, dispatch, props) => {
    // 跟进记录
    if (values.showAddRecord) {
        dispatch(postCustomerRecordAct(values))
        dispatch(change('customer_container_form', 'recordBtnDisabled', true));
    }
    // 更新状态
    if (values.showUpdateStatus) {
        dispatch(editCustomerBasicAct(values, true)).then(data => {
            if (data && data.id) {
                props.change('showUpdateStatus', false)
            }
        })
    }
}
const selector = formValueSelector('customer_container_form')

CustomerContainer = reduxForm({
    form: 'customer_container_form',
    onSubmit: submitForm,
})(CustomerContainer)

const mapState = (state) => {
    const {
        custome: { customList, customCommentsList },
        hr: { subordinates, subordinatesCount },
        authed: { userInfo },
    } = state
    return {
        userInfo,
        customList, subordinates, customCommentsList,
        showAddRecord: selector(state, 'showAddRecord'),
        recordBtnDisabled: selector(state, 'recordBtnDisabled'),
        showUpdateStatus: selector(state, 'showUpdateStatus'),
        formAllValues: getFormValues('customer_container_search')(state),// 搜索条件all
    }
}
export default connect(mapState)(CustomerContainer)