import { useState, useEffect } from 'react'
import './order-detail-modal.css'
import OrderInfo from '../../components/OrderDetailModal/components/OrderInfo/OrderInfo'
import GoodsInfo from '../../components/OrderDetailModal/components/GoodsInfo/GoodsInfo'
import Copyright from '../../components/OrderDetailModal/components/Copyright/Copyright'
import Authorize from '../../components/OrderDetailModal/components/Authorize/Authorize'
import File from '../../components/OrderDetailModal/components/File/File'
import Result from '../../components/OrderDetailModal/components/Result/Result'
export default function OrderDetailModal() {
    const height = window.innerHeight - 180;
    const [activeKey, setActiveKey] = useState('roder')   //tap栏选项 默认选第一个

    // tab栏 标题数组
    const tapTitleArray = [
        {
            key: 'roder',
            title: '订单信息',
            className: activeKey == 'roder' ? 'orderDetailTop-title tapActive' : 'orderDetailTop-title'
        },
        {
            key: 'goodsInfo',
            title: '著作权商品信息',
            className: activeKey == 'goodsInfo' ? 'orderDetailTop-title tapActive' : 'orderDetailTop-title'
        },
        {
            key: 'copyright',
            title: ' 著作权人信息',
            className: activeKey == 'copyright' ? 'orderDetailTop-title tapActive' : 'orderDetailTop-title'
        },
        {
            key: 'authorize',
            title: '受权人信息',
            className: activeKey == 'authorize' ? 'orderDetailTop-title tapActive' : 'orderDetailTop-title'
        },
        {
            key: 'file',
            title: '资料补充',
            className: activeKey == 'file' ? 'orderDetailTop-title tapActive' : 'orderDetailTop-title'
        },
        {
            key: 'result',
            title: '过户结果',
            className: activeKey == 'result' ? 'orderDetailTop-title tapActive borderRight' : 'orderDetailTop-title borderRight'
        },
    ]
    // 订单信息
    const orderInfo = {
        orderPrice: '11',                    //订单金额
        orderStatus: '过户已完成',            //订单状态
        orderTime: '2024-04-25   15:34:10',  //下单时间
        payTime: '2024-04-25   15:34:10',    //付款时间
        cardTime: '2024-04-25   15:34:10',    //下证时间
        evaluateTime: '2024-04-25   15:34:10',//评价时间
        orderRate: 3,                         //评价星级
        rateText: '喜喜喜喜喜喜喜喜喜喜哈哈哈哈' //评价内容
    }
    useEffect(() => {
        // 发起请求获取订单信息 发送给其他组件

    }, [])
    return (
        <div style={{ width: 1200, maxHeight: `${height}px`, minHeight: "680px" }}>
            <div className='orderDetailTop'>
                {tapTitleArray.map((item) => {
                    return (
                        <div key={item.key} className={item.className} onClick={() => {
                            setActiveKey(item.key)
                        }}>
                            {item.title}
                        </div>
                    )
                })}
            </div>
            <div className='orderDetailBot'>
                <div style={{ display: activeKey == 'roder' ? 'block' : 'none' }}>
                    <OrderInfo orderInfo={orderInfo}></OrderInfo>
                </div>
                <div style={{ display: activeKey == 'goodsInfo' ? 'block' : 'none' }}>
                    <GoodsInfo ></GoodsInfo>
                </div>
                <div style={{ display: activeKey == 'copyright' ? 'block' : 'none' }}>
                    <Copyright ></Copyright>
                </div>
                <div style={{ display: activeKey == 'authorize' ? 'block' : 'none' }}>
                    <Authorize ></Authorize>
                </div>
                <div style={{ display: activeKey == 'file' ? 'block' : 'none' }}>
                    <File ></File>
                </div>
                <div style={{ display: activeKey == 'result' ? 'block' : 'none' }}>
                    <Result ></Result>
                </div>
            </div>
        </div>
    )
}
