import React, { PureComponent } from "react";
import { connect } from "dva";
import { Icon, Button, Table } from "antd";
import borderLine from "./images/addressLine.png";
import styles from "./index.less";
import { getCustomer } from "@/utils/request";
class Customer extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isOpenPanel: false,
            isShow: 'NO'
        };
    }
    componentDidMount() {
        const { dispatch } = this.props;
        // 获取客户信息
        dispatch({
            type: "myAccount/getCustomers",
            payload: {
                customerId: getCustomer().id
            }
        });
        // 获取客户信息---联系人
        dispatch({
            type: "myAccount/getfindByCustomer",
            payload: {
                customerId: getCustomer().id
            }
        });
        // 获取客户信息---收货地址
        dispatch({
            type: "myAccount/getfindByCustomerAddresses",
            payload: {
                customerId: getCustomer().id
            }
        });
        // 获取客户信息---银行账户信息
        dispatch({
            type: "myAccount/getfindByCustomeraccounts",
            payload: {
                customerId: getCustomer().id
            }
        });
    }
    goodsLevelDialogSelect(index, e) {
        const newKey = index == this.state.isShow ? 'NO' : index;
        const newIsOpenPanel = index != this.state.isShow && this.state.isShow != 'NO' ? true : !this.state.isOpenPanel;
        this.setState({
            isShow: newKey,
            isOpenPanel: newIsOpenPanel
        });
    }
    render() {
        const {
            dispatch,
            customers,
            findBycustomer,
            findByCustomerAddresses
        } = this.props;
        const customerDataNone = {
            display: 'none'
        };
        let customersList = null;
        if (customers) {
            customersList = customers;
        }
        const bankData = () => {
            const { findByCustomeraccounts } = this.props;
            const accList = findByCustomeraccounts ? findByCustomeraccounts.content : [];
            const temp = accList.map((item, key) => (
                <div className={styles.customerData}>
                    <p>
                        <em>开户银行：</em>
                        <span>{item.depositBankName}</span>
                    </p>
                    <p>
                        <em>银行账户：</em>
                        <span>{item.accountNumber} </span>
                    </p>
                    <p>
                        <em>户名：</em>
                        <span>{item.customerName}</span>
                    </p>
                </div>
            ));
            return temp;
        };
        const customerList = findBycustomer ? findBycustomer : [];
        const columns = [
            {
                title: '联系人类型',
                align: 'left',
                width: '150px',
                className: 'pl20',
                dataIndex: 'contactTypeName',
                key: 'contactTypeName'
            },
            {
                title: '联系人',
                align: 'left',
                width: '130px',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '手机',
                align: 'left',
                width: '130px',
                dataIndex: 'phone',
                key: 'phone'
            },
            {
                title: '电话',
                width: '130px',
                align: 'left',
                dataIndex: 'tel',
                key: 'tel'
            },
            {
                title: '传真',
                align: 'left',
                width: '130px',
                dataIndex: 'fax',
                key: 'fax'
            },
            {
                title: '地址',
                width: '355px',
                align: 'left',
                dataIndex: 'address',
                key: 'address'
            },
            {
                title: '邮箱',
                align: 'left',
                dataIndex: 'email',
                key: 'email'
            }
        ];
        const customerAddress = () => {
            const addressArr = findByCustomerAddresses ? findByCustomerAddresses : [];
            let temp = '';
            if (addressArr && addressArr.length > 0) {
                temp = addressArr.map((item, key) => (
                    <div>
                        <img src={borderLine} style={{ marginTop: '10px' }} alt={{}} />
                        <div className={styles.customrAddressBox}>
                            <div className={styles.customerData}>
                                <p>
                                    <em>收货单位：</em>
                                    <span>{item.detailAddr}</span>
                                </p>
                            </div>
                            <div className={styles.customerData}>
                                <p>
                                    <em>收货地址：</em>
                                    <span>
                                        {`${item.countryName}${item.provinceName}${item.cityName}${item.countyName}${item.townName}${item.detailAddr}`}
                                    </span>
                                </p>
                            </div>
                            <div className={styles.customerData}>
                                <p>
                                    <em>联系人一：</em>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.firstReceiver}</span>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.firstReceiverTel}</span>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.firstReceiverPhone}</span>
                                    <span style={{ width: '20px', cursor: 'pointer' }}>
                                        <Icon
                                          type="down"
                                          className={styles.moreBtn}
                                          style={{ display: this.state.isOpenPanel && this.state.isShow == key ? "none" : "", fontSize: 14 }}
                                          onClick={this.goodsLevelDialogSelect.bind(this, key)}
                                        />
                                        <Icon
                                          type="up"
                                          className={styles.moreBtn}
                                          style={{ display: this.state.isOpenPanel && this.state.isShow == key ? "" : "none", fontSize: 14 }}
                                          onClick={this.goodsLevelDialogSelect.bind(this, key)}
                                        />
                                    </span>
                                </p>
                            </div>
                            <div className={styles.customerData} style={{ display: this.state.isShow == key ? "" : "none" }}>
                                <p>
                                    <em>联系人二：</em>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.secondReceiver}</span>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.secondReceiverTel}</span>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.secondReceiverPhone}</span>
                                </p>
                            </div>
                            <div className={styles.customerData} style={{ display: this.state.isShow == key ? "" : "none" }}>
                                <p>
                                    <em>联系人三：</em>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.thirdReceiver}</span>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.thirdReceiverTel}</span>
                                    <span style={{ width: 'auto', marginRight: '15px' }}>{item.thirdReceiverPhone}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                ));
            } else {
                temp = <div className="ant-table-placeholder">暂无收货地址</div>;
            }
            return temp;
        };
        return (
            <div className={styles.cartListBox}>
                {/* <div className={styles.classHead}>
                    <span className={styles.nameIndex}>首页</span>
                    <span className={styles.nameChild}>
                        <Icon type="right" className={styles.nameIcon} />账户中心
                    </span>
                    <span className={styles.nameChild}>
                        <Icon type="right" className={styles.nameIcon} />商家信息
                    </span>
                </div> */}
                {/* 内容部分 */}
                {/* 基本信息 */}
                <div className={styles.customerContent}>
                    <div className={styles.customerDataBox} style={{ marginTop: '33px' }}>
                        <p className={styles.customerTitle}>基本信息</p>
                        <div className={styles.customerData}>
                            <p>
                                <em>客户编号：</em>
                                <span>{customersList ? customersList.code : ''}</span>
                            </p>
                            <p>
                                <em>客户名称：</em>
                                <span>{customersList ? customersList.name : ''} </span>
                            </p>
                            <p>
                                <em>客户分类：</em>
                                <span>{customersList ? customersList.customerCategoryName : ''}</span>
                            </p>
                        </div>
                        <div className={styles.customerData}>
                            {/* <p>
                                <em>渠道类型：</em>
                                <span>{customersList ? customersList.channelTypeName : ''}</span>
                            </p> */}
                            <p>
                                <em>法人代表：</em>
                                <span>{customersList ? customersList.legalPerson : ''}</span>
                            </p>
                            <p>
                                <em>税务登记证：</em>
                                <span>{customersList ? customersList.taxRegNo : ''}</span>
                            </p>
                        </div>
                        <div className={styles.customerData}>
                            <p>
                                <em>客户所在地：</em>
                                <span className={styles.address}>{customersList ? `${customersList.countryName || ''}${customersList.provinceName || ''}${customersList.cityName || ''}${customersList.countyName || ''}${customersList.townName || ''}${customersList.detailAddr || ''}` : ''}</span>
                            </p>
                        </div>
                    </div>
                </div>
                {/* 银行信息 */}
                <div className={styles.customerContent}>
                    <div className={styles.customerDataBox}>
                        <p className={styles.customerTitle}>银行信息</p>
                        { bankData() }
                    </div>
                </div>
                {/* 客户联系人 */}
                <div className={styles.customerContent}>
                    <div className={styles.customerDataBox} style={{ paddingLeft: 0, borderBottom: 'none' }}>
                        <p className={styles.customerTitle} style={{ paddingLeft: '20px' }}>客户联系人</p>
                        <Table
                          className={styles.customerTable}
                          columns={columns}
                          dataSource={customerList}
                          pagination={false}
                        />
                    </div>
                </div>
                 {/* 客户收货地址 */}
                <div className={styles.customerContent}>
                    <div className={styles.customerDataBox} style={{ paddingLeft: 0, borderBottom: 'none' }}>
                        <p className={styles.customerTitle}>客户收货地址</p>
                        { customerAddress() }
                    </div>
                </div>
            </div>
        );
    }
}


export default connect(state => ({
    customers: state.myAccount.customers,
    findBycustomer: state.myAccount.findBycustomer,
    findByCustomerAddresses: state.myAccount.findByCustomerAddresses,
    findByCustomeraccounts: state.myAccount.findByCustomeraccounts
}))(Customer);
