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 { 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='sub-title-cn '>{data.title}</div> 
        <div className='flex justify-between'>
            {
                data.features.map((i:any,index:number)=>(
                    <div className='item' key={index}>
                    <div className='content-title-cn'>{i.title}</div>
                    <div className='normal-text'>{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(() => {
        let  title ='试用版';
        let features =[
            {
                title:'快速构建',
                context:'支持一键快速构建联盟链、私链、公有链、平行侧链等区块链网络'
            },
            {title:'灵活部署',context:'支持节点一键自动化部署，省去手动部署等大量时间和精力'},
            {title:'存证服务',context:'支持区块链存证服务的在线部署'}
        ]  
        switch (id){
          case "1":
            title = '企业版';
            break;
          case "2":
            title = '开发版';
            break;
        }
        return{
            title,
            features
        }
    },[id])
    return(
            <PageLayout ballConfig={detailsBalls[0].setting} gradientConfig={detailsBg[0].config}>
        
                <DetailScrollView>
            
                        <div className='px-28'>
                        <TableHeader data={TableHeaderData}></TableHeader>
                        <DetailsExceTable data={products} />
                        </div>
                 
                    </DetailScrollView>
               
            </PageLayout>

    )
}
