import { useState } from 'react'
import { CheckOutlined } from '@ant-design/icons';
import './SelectCouponModal.css'
import coupon from '../../static/coupon/coupon.png'
import bigCoupon from '../../static/coupon/bigCoupon.png'
export default function SelectCouponModal() {
    const [couponId, setCouponId] = useState('')
    return (
        <div>
            <div className='select-top'>
                <div className='selectTop-left'>
                    <img src={coupon} alt="" width={39} height={39} style={{ marginLeft: 10 }} />
                    <div className='selectTop-left-title'>
                        优惠券
                    </div>
                </div>
                <div className='selectTop-right'>
                    <div style={{ fontSize: 18, fontWeight: 600 }}>共减￥</div>
                    <div style={{ fontSize: 26, fontWeight: 700 }}>100.00</div>
                </div>
            </div>
            <div className='select-use'>
                <div className='select-use-title'>
                    可使用优惠券
                </div>
                <div className='select-use-couBox'>
                    <div
                        // className='use-coupon'
                        className={couponId == '1' ? 'use-coupon select-active' : 'use-coupon'}
                        onClick={() => {
                            // setCouponId('1')
                            if(couponId=='1'){
                                setCouponId('')
                            }else{
                                setCouponId('1')
                            }
                        }}>
                        <div className='use-coupon-left'>
                            <img src={bigCoupon} alt="" width={81} height={73} />
                            <div className='use-coupon-text'>
                                <div className='use-coupon-title'>
                                    减100元
                                </div>
                                <div className='use-coupon-time'>
                                    有效期至2024.08.29 12:12:07
                                </div>
                            </div>

                        </div>
                        <div className='use-coupon-right'>
                            <div className='coupon-right-num'>
                                <div style={{ fontSize: 16, fontWeight: 600 }}>减￥</div>
                                <div style={{ fontSize: 25, fontWeight: 700 }}>100.00</div>
                            </div>
                            {
                                couponId == '1' ? (
                                    <div className='select-box' >
                                        <CheckOutlined />
                                    </div>
                                ) : (
                                    <div className='noselect-box' >
                                    </div>
                                )
                            }


                        </div>
                    </div>
                   
                </div>
            </div>
        </div>
    )
}