/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2024-07-03 14:48:55
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-08-29 17:50:49
 * @FilePath: /MediScreen/src/components/ExpiryStockProgressBar/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react';
import styles from './style.less';

interface ExpiryStockProgressBarProps {
    expiryCount: number;
    stockCount: number;
    expiryColor?: string;
    stockColor?: string;
}

const ExpiryStockProgressBar: React.FC<ExpiryStockProgressBarProps> = ({ expiryCount, stockCount, expiryColor = 'linear-gradient( 90deg, #80FFBF 0%, #EAFF80 100%)', stockColor = 'rgba(92, 118, 153, 1)' }) => {
    const [expiryWidth, setExpiryWidth] = useState(0);
    const [stockWidth, setStockWidth] = useState(0);

    useEffect(() => {
        const total = stockCount;
        const expiryPercentage = (expiryCount / total) * 100;
        const stockPercentage = 1;

        // 为了触发动画，先将宽度设置为0，然后再设置为目标值
        setExpiryWidth(0);
        setStockWidth(0);

        setTimeout(() => {
            setExpiryWidth(expiryPercentage);
            setStockWidth(stockPercentage);
        }, 100); // 延迟100毫秒以确保动画触发
    }, [expiryCount, stockCount]);

    return (
        <div className={styles.progressBarContainer}>
            <div className={styles.info}>
                <span className={styles.label}>临期（盒） <i>{expiryCount}</i></span>
                <span className={styles.label}>库存（盒） <i>{stockCount}</i></span>
            </div>
            <div className={styles.progressBar}>
                <div
                    className={styles.expiryBar}
                    style={{ width: `${expiryWidth}%`, background: expiryColor }}
                ></div>
                <div
                    className={styles.stockBar}
                    style={{ width: `${stockWidth}%`, backgroundColor: stockColor }}
                ></div>
            </div>
        </div>
    );
};

export default ExpiryStockProgressBar;
