dq-cms/src/pages/business_basic/components/CustomerInfoManagement.js

import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import styles from './CustomerInfoManagement.less';

const CustomerInfoManagement = () => {
    const [searchKeyword, setSearchKeyword] = useState('');
    const [customerType, setCustomerType] = useState('全部');
    const [customerLevel, setCustomerLevel] = useState('全部');
    const [cooperationStatus, setCooperationStatus] = useState('全部');
    const [selectedRows, setSelectedRows] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);

    // 图表引用
    const customerTypeChartRef = useRef(null);
    const customerValueChartRef = useRef(null);
    const customerTypeChartInstance = useRef(null);
    const customerValueChartInstance = useRef(null);

    // KPI数据
    const kpiData = {
        totalCustomers: 389,
        highValueCustomers: 180,
        inCooperation: 360,
        newThisMonth: 8,
    };

    // 客户类型分布图表配置
    const customerTypeChartOption = {
        title: {
            text: '客户类型分布',
            left: 'left',
            textStyle: {
                fontSize: 16,
                fontWeight: 600,
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: ['客户', '供应商', '第3周', '第4周'],
            axisLabel: {
                rotate: 0,
            },
        },
        yAxis: {
            type: 'value',
            max: 100,
        },
        series: [
            {
                name: '数量',
                type: 'bar',
                data: [56, 32, 85, 15],
                itemStyle: {
                    color: '#1890ff',
                },
                label: {
                    show: true,
                    position: 'top',
                },
            },
        ],
    };

    // 客户价值分布环形图配置
    const customerValueChartOption = {
        title: {
            text: '客户价值分布',
            left: 'left',
            textStyle: {
                fontSize: 16,
                fontWeight: 600,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            top: 'middle',
        },
        series: [
            {
                name: '客户价值',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                },
                label: {
                    show: false,
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold',
                    },
                },
                data: [
                    { value: 180, name: '高价值客户', itemStyle: { color: '#5B9BD5' } },
                    { value: 120, name: '中等客户', itemStyle: { color: '#FFC000' } },
                    { value: 89, name: '小客户', itemStyle: { color: '#9E7CC1' } },
                ],
            },
        ],
    };

    // 初始化图表
    useEffect(() => {
        // 初始化客户类型分布图表
        if (customerTypeChartRef.current) {
            customerTypeChartInstance.current = echarts.init(customerTypeChartRef.current);
            customerTypeChartInstance.current.setOption(customerTypeChartOption);
        }

        // 初始化客户价值分布图表
        if (customerValueChartRef.current) {
            customerValueChartInstance.current = echarts.init(customerValueChartRef.current);
            customerValueChartInstance.current.setOption(customerValueChartOption);
        }

        // 响应式调整
        const handleResize = () => {
            customerTypeChartInstance.current?.resize();
            customerValueChartInstance.current?.resize();
        };
        window.addEventListener('resize', handleResize);

        // 清理函数
        return () => {
            window.removeEventListener('resize', handleResize);
            customerTypeChartInstance.current?.dispose();
            customerValueChartInstance.current?.dispose();
        };
    }, []);

    // 最近活动数据
    const recentActivities = [
        {
            id: 1,
            title: '新合同签署',
            description: '与中石化华东分公司签署年度供应合同',
            time: '2小时前',
        },
        {
            id: 2,
            title: '订单完成',
            description: '完成海南石油贸易有限公司的油品配送',
            time: '昨天',
        },
        {
            id: 3,
            title: '客户反馈',
            description: '收到华南能源集团的满意度调查回复',
            time: '昨天',
        },
        {
            id: 4,
            title: '新客户注册',
            description: '新客户"浙江能源有限公司"完成注册',
            time: '3天前',
        },
    ];

    // 表格数据
    const tableData = [
        {
            id: '1',
            customerName: '中国石化销售股份有限公司',
            contact: '钱亚男',
            phone: '18901563341',
            classification: '高价值',
            monthlyAmount: 1250000,
            cooperationStatus: '合作中',
            satisfaction: 4.5,
        },
        {
            id: '2',
            customerName: '中石化华东分公司',
            contact: '郑宇雅',
            phone: '15341731282',
            classification: '常规客户',
            monthlyAmount: 1250000,
            cooperationStatus: '合作中',
            satisfaction: 4.0,
        },
        {
            id: '3',
            customerName: '海南石油贸易有限公司',
            contact: '孙向明',
            phone: '13252257033',
            classification: '高价值',
            monthlyAmount: 850000,
            cooperationStatus: '合作中',
            satisfaction: 4.5,
        },
        {
            id: '4',
            customerName: '东莞石化有限公司',
            contact: '何思颖',
            phone: '18931788771',
            classification: '高价值',
            monthlyAmount: 980000,
            cooperationStatus: '合作中',
            satisfaction: 4.5,
        },
        {
            id: '5',
            customerName: '中国石油化工集团有限公司',
            contact: '钱佳仪',
            phone: '13743378254',
            classification: '常规客户',
            monthlyAmount: 980000,
            cooperationStatus: '暂停合作',
            satisfaction: 4.0,
        },
    ];

    // 处理选择
    const handleSelectRow = (id) => {
        if (selectedRows.includes(id)) {
            setSelectedRows(selectedRows.filter(rowId => rowId !== id));
        } else {
            setSelectedRows([...selectedRows, id]);
        }
    };

    // 处理全选
    const handleSelectAll = () => {
        if (selectedRows.length === tableData.length) {
            setSelectedRows([]);
        } else {
            setSelectedRows(tableData.map(item => item.id));
        }
    };

    // 渲染星级评分
    const renderStars = (rating) => {
        const stars = [];
        const fullStars = Math.floor(rating);
        const hasHalfStar = rating % 1 !== 0;
        
        for (let i = 0; i < fullStars; i++) {
            stars.push(<span key={i} className={styles.starFull}>★</span>);
        }
        if (hasHalfStar) {
            stars.push(<span key="half" className={styles.starHalf}>★</span>);
        }
        const emptyStars = 5 - Math.ceil(rating);
        for (let i = 0; i < emptyStars; i++) {
            stars.push(<span key={`empty-${i}`} className={styles.starEmpty}>★</span>);
        }
        return stars;
    };

    // 计算总页数
    const totalPages = Math.ceil(85 / pageSize);

    return (
        <div className={styles.container}>
            {/* KPI卡片区域 */}
            <div className={styles.kpiRow}>
                <div className={styles.kpiCard}>
                    <div className={styles.kpiIcon}>👥</div>
                    <div className={styles.kpiValue}>{kpiData.totalCustomers}</div>
                    <div className={styles.kpiTitle}>总客户数</div>
                </div>
                <div className={styles.kpiCard}>
                    <div className={styles.kpiIcon}>👑</div>
                    <div className={styles.kpiValue}>{kpiData.highValueCustomers}</div>
                    <div className={styles.kpiTitle}>高价值客户</div>
                </div>
                <div className={styles.kpiCard}>
                    <div className={styles.kpiIcon}>🤝</div>
                    <div className={styles.kpiValue}>{kpiData.inCooperation}</div>
                    <div className={styles.kpiTitle}>合作中</div>
                </div>
                <div className={styles.kpiCard}>
                    <div className={styles.kpiIcon}>➕</div>
                    <div className={styles.kpiValue}>{kpiData.newThisMonth}</div>
                    <div className={styles.kpiTitle}>本月新增</div>
                </div>
            </div>

            {/* 图表和活动区域 */}
            <div className={styles.chartRow}>
                {/* 客户类型分布图表 */}
                <div className={styles.chartCard}>
                    <div className={styles.chartHeader}>
                        <div className={styles.chartTitle}>客户类型分布</div>
                        <select className={styles.timeSelect} defaultValue="全部时间">
                            <option value="全部时间">全部时间</option>
                            <option value="本月">本月</option>
                            <option value="本季度">本季度</option>
                            <option value="本年">本年</option>
                        </select>
                    </div>
                    <div
                        ref={customerTypeChartRef}
                        className={styles.chartContainer}
                    />
                </div>

                {/* 客户价值分布图表 */}
                <div className={styles.chartCard}>
                    <div className={styles.chartHeader}>
                        <div className={styles.chartTitle}>客户价值分布</div>
                    </div>
                    <div
                        ref={customerValueChartRef}
                        className={styles.chartContainer}
                    />
                </div>

                {/* 最近活动列表 */}
                <div className={styles.activityCard}>
                    <div className={styles.chartHeader}>
                        <div className={styles.chartTitle}>最近活动</div>
                    </div>
                    <div className={styles.activityList}>
                        {recentActivities.map((activity) => (
                            <div key={activity.id} className={styles.activityItem}>
                                <div className={styles.activityIcon}>
                                    {activity.id === 1 && '📄'}
                                    {activity.id === 2 && '✅'}
                                    {activity.id === 3 && '💬'}
                                    {activity.id === 4 && '👤'}
                                </div>
                                <div className={styles.activityContent}>
                                    <div className={styles.activityTitle}>{activity.title}</div>
                                    <div className={styles.activityDesc}>{activity.description}</div>
                                    <div className={styles.activityTime}>🕐 {activity.time}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* 客户列表区域 */}
            <div className={styles.tableCard}>
                <div className={styles.tableHeader}>
                    <div className={styles.tableTitle}>客户列表</div>
                </div>

                {/* 筛选栏 */}
                <div className={styles.filterBar}>
                    <div className={styles.filterGroup}>
                        <input
                            type="text"
                            className={styles.searchInput}
                            placeholder="搜索关键词"
                            value={searchKeyword}
                            onChange={(e) => setSearchKeyword(e.target.value)}
                        />
                        <select
                            className={styles.filterSelect}
                            value={customerType}
                            onChange={(e) => setCustomerType(e.target.value)}
                        >
                            <option value="全部">客户类型: 全部</option>
                            <option value="客户">客户</option>
                            <option value="供应商">供应商</option>
                        </select>
                        <select
                            className={styles.filterSelect}
                            value={customerLevel}
                            onChange={(e) => setCustomerLevel(e.target.value)}
                        >
                            <option value="全部">客户等级: 全部</option>
                            <option value="高价值">高价值</option>
                            <option value="常规客户">常规客户</option>
                        </select>
                        <select
                            className={styles.filterSelect}
                            value={cooperationStatus}
                            onChange={(e) => setCooperationStatus(e.target.value)}
                        >
                            <option value="全部">合作状态: 全部</option>
                            <option value="合作中">合作中</option>
                            <option value="暂停合作">暂停合作</option>
                        </select>
                        <button className={styles.queryBtn} onClick={() => console.log('查询')}>
                            🔍 查询
                        </button>
                        <button className={styles.resetBtn} onClick={() => {
                            setSearchKeyword('');
                            setCustomerType('全部');
                            setCustomerLevel('全部');
                            setCooperationStatus('全部');
                        }}>
                            🔄 重置
                        </button>
                        <button className={styles.addBtn}>
                            ➕ 新增客户
                        </button>
                        <button className={styles.exportBtn}>
                            📥 批量导出
                        </button>
                    </div>
                </div>

                {/* 表格 */}
                <div className={styles.tableWrapper}>
                    <table className={styles.dataTable}>
                        <thead>
                            <tr>
                                <th>
                                    <input
                                        type="checkbox"
                                        checked={selectedRows.length === tableData.length}
                                        onChange={handleSelectAll}
                                    />
                                </th>
                                <th>客户名称</th>
                                <th>联系人</th>
                                <th>联系电话</th>
                                <th>分类</th>
                                <th>交易额度(月)</th>
                                <th>合作状态</th>
                                <th>满意度</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {tableData.map((row) => (
                                <tr key={row.id}>
                                    <td>
                                        <input
                                            type="checkbox"
                                            checked={selectedRows.includes(row.id)}
                                            onChange={() => handleSelectRow(row.id)}
                                        />
                                    </td>
                                    <td>{row.customerName}</td>
                                    <td>{row.contact}</td>
                                    <td>{row.phone}</td>
                                    <td>
                                        <span className={`${styles.tag} ${row.classification === '高价值' ? styles.tagGold : styles.tagBlue}`}>
                                            {row.classification}
                                        </span>
                                    </td>
                                    <td>¥{row.monthlyAmount.toLocaleString()}</td>
                                    <td>
                                        <span className={`${styles.tag} ${row.cooperationStatus === '合作中' ? styles.tagGreen : styles.tagOrange}`}>
                                            {row.cooperationStatus}
                                        </span>
                                    </td>
                                    <td>
                                        <div className={styles.stars}>
                                            {renderStars(row.satisfaction)}
                                        </div>
                                    </td>
                                    <td>
                                        <div className={styles.actionBtns}>
                                            <button className={styles.actionBtn}>查看详情</button>
                                            <button className={styles.actionBtn}>修改</button>
                                            <button className={`${styles.actionBtn} ${styles.deleteBtn}`}>删除</button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {/* 分页 */}
                <div className={styles.pagination}>
                    <div className={styles.paginationInfo}>
                        共85条
                        <select
                            className={styles.pageSizeSelect}
                            value={pageSize}
                            onChange={(e) => {
                                setPageSize(Number(e.target.value));
                                setCurrentPage(1);
                            }}
                        >
                            <option value="10">10 / page</option>
                            <option value="20">20 / page</option>
                            <option value="50">50 / page</option>
                            <option value="100">100 / page</option>
                        </select>
                    </div>
                    <div className={styles.paginationControls}>
                        <button
                            className={styles.pageBtn}
                            disabled={currentPage === 1}
                            onClick={() => setCurrentPage(currentPage - 1)}
                        >
                            ‹
                        </button>
                        {currentPage > 3 && (
                            <>
                                <button className={styles.pageBtn} onClick={() => setCurrentPage(1)}>1</button>
                                <span className={styles.pageEllipsis}>...</span>
                            </>
                        )}
                        {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                            let pageNum;
                            if (currentPage <= 3) {
                                pageNum = i + 1;
                            } else if (currentPage >= totalPages - 2) {
                                pageNum = totalPages - 4 + i;
                            } else {
                                pageNum = currentPage - 2 + i;
                            }
                            if (pageNum > totalPages) return null;
                            return (
                                <button
                                    key={pageNum}
                                    className={`${styles.pageBtn} ${currentPage === pageNum ? styles.pageBtnActive : ''}`}
                                    onClick={() => setCurrentPage(pageNum)}
                                >
                                    {pageNum}
                                </button>
                            );
                        })}
                        {currentPage < totalPages - 2 && (
                            <>
                                <span className={styles.pageEllipsis}>...</span>
                                <button className={styles.pageBtn} onClick={() => setCurrentPage(totalPages)}>{totalPages}</button>
                            </>
                        )}
                        <button
                            className={styles.pageBtn}
                            disabled={currentPage === totalPages}
                            onClick={() => setCurrentPage(currentPage + 1)}
                        >
                            ›
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CustomerInfoManagement;