import { IProps } from "@/common/Iprops.interface"
import { DetailsExceTable, ItemType } from "@/components/DetailsExceTable"
import { DetailScrollView } from "@/components/DtailScrollView"
import { detailsBalls } from "@/config/ballSetting"
import { detailsBg } from "@/config/bgSetting"
import { detailInstances,contacts } from "@/config/constants"
import { fetchProduct } from "@/fetch/dataFetch"

import { AppContianer } from "@/layouts/AppContianer"
import { PageLayout } from "@/layouts/PageLayout"
import { playGround } from "@/rxjs"
import { useEffect, useMemo, useState } from "react"
import { useParams } from 'react-router-dom'
interface DetailsType extends IProps{}
interface TableHeader extends IProps{
    data:any
}
const TableHeader = (props:TableHeader)=>{
    const {data} = props
    return(
        <div className='pt-5 pb-10'>
        <div className='subTitle-1-cn mb-[30px]'>{data.title}</div> 
        <div className='flex justify-between'>
            {
                data.features.map((i:any,index:number)=>(
                <div className='item max-w-[284px]' key={index}>
                    <div className='title-2-cn'>{i.title}</div>
                    <div className='normal-text pt-[10px]'>{i.context}</div>
                </div>
                ))
            }
        </div>
     </div>
    )
}
export const Details = (props:DetailsType)=>{
    const {id} = useParams()
    const [products,setProducts] = useState()
    useEffect(()=>{
        if(id){
             (async ()=>{
              const res = await fetchProduct(String(Number(id)+1))
              const products = res[0].products 
              setProducts(products)
            })()
        }
    },[id])
    const TableHeaderData = useMemo(() => {
        const data = detailInstances
        switch (id){
          case "0":
            return data[0]
          case "1":
            return data[1]
          case "2":
            return data[2]
        }
    },[id])
    return(
            <PageLayout ballConfig={detailsBalls[0].setting} gradientConfig={detailsBg[0].config}>
        
                <DetailScrollView>
                        <div className='px-[120px] normal-text '>
                        <TableHeader data={TableHeaderData}></TableHeader>
                        <DetailsExceTable data={products} />
                        <div className='py-5 pb-20 normal-content'>
                            <div className="sub-title-cn">如何收费</div>
                            <div className='w-6/12 py-3'>{TableHeaderData?.fee}</div>
                            <div className='pt-2'>联系方式</div>
                            {
                                contacts.map((i,index)=>(
                                    <div className='flex my-2' key={index}>
                                        <div> {i.text}</div>
                                        <span className='px-1'>:</span>
                                        <div>{i.tel}</div>
                                       </div>
                                ))
                            }
                        </div>
                        </div>
                 
                    </DetailScrollView>
               
            </PageLayout>

    )
}
