import React, { useEffect, useState } from 'react';
import { numberFormats } from '../../../utils/numberFormat';

const compare = (val1: any, val2: any) => {
    if (val1.code < val2.code) {
        return -1;
    }
    if (val1.code > val2.code) {
        return 1;
    }
    return 0;
};

const PriceList: React.FC<any> = (props: any) => {
    const {  api_price_list } = props;
    const [options, setOptions] = React.useState([]);

    useEffect(()=>{
        buildData()
    },[api_price_list])

    const buildData = () => {
        const options = api_price_list.map((item: any) => {
            return {
                ...item,
                code: item?.merchant_data_api_name.trim().substring(0, 4),
            };
        });
        setOptions(options.sort(compare) || []);
    }


    return (
        options.map((ele:any)=>{
            return <div style={{display:'flex',flexDirection:'row',justifyContent:'space-between',marginTop:20}} key={ele?.merchant_data_api_id}>
            <div>{ele?.merchant_data_api_name}</div>
            <div>￥{numberFormats(ele?.unit_price)}</div>
        </div>       
        })
    );
};

export default PriceList;
