import { IProps } from "@/common/Iprops.interface";
import { VerticalText } from "@/components/VerticalText";
import { AppContianer } from "@/layouts/AppContianer";
import { CheckIcon } from '@heroicons/react/solid'
import { useNavigate} from 'react-router-dom'
interface ServiceType extends IProps{

}

// const VerticalText = (props: VerticalTextType)=>{
//     const {text,containerStyle,itemStyle} = props;
//     const textArr = text.split('')
//     return(
//         <div className={`grid-cols-1 ${containerStyle}`}>
//             {
//                 textArr&&textArr.map((i,index)=>(
//                     <div className={itemStyle} key={index}>
//                         {i}
//                     </div>
//                 ))
//             }
//         </div>
//     )
// }
const ServiceList = ()=>{
    const navigate = useNavigate()
    const data =[
        {
            title:'BaaS试用版',
            text:'开通试用版后，您可以在一个月内免费试用开发版的产品功能。',
            price:0,
            features:['支持发布合约类，工具类，应用类等应用','支持自动部署智能合约','支持在线IDE，可以对EVM合约进行查看、编辑等','提供存证服务安装包']
        },
        {
            title:'BaaS企业版',
            text:'支持中小企业联盟成员权重的可视化配置，助力企业轻松上链。',
            price:5998,
            features:['支持一键快速构建联盟链、平行侧链等区块链网络','联盟链加平行链总数限制在3条','联盟链节点最多支持5个']
        },
        {
            title:'BaaS开发版',
            text:'为团队提供完备的服务可视化操作，实现业务快速上链。',
            price:7998,
            features:['支持一键快速构建联盟链、平行侧链等区块链网络','联盟链加平行链总数限制在6条','联盟链节点最多支持7个']
        },

    ]
    const goDetails = (index: number)=>{
        navigate('/details/'+index,{
            replace:true
        })
    }
    return(
        <div className=' px-8 grid grid-cols-3 gap-x-[3rem] -translate-y-[5vh]'>
            {
                data.map((i,index)=>(
                    <div key={index} className='relative py-8 px-10 
                    ring-4 ring-white/40 ring-inset
                    backdrop-blur-lg shadow-lg bg-white/50
                     min-w-[340px] max-w-[420px] h-[460px] rounded-[3.5rem] '>
                        <div className='sub-title-cn border-black py-5'>{i.title}</div>
                        <div className='pt-2 des-cn'>{i.text}</div>
                        <ul className='py-5 des-cn font-bold'>
                            {
                                i.features.map((k,x)=>(
                                    <li className='my-1 flex' key={'child'+x}>
                                        <div>
                                        <CheckIcon className='w-5 h-5 border-[1px] border-black border-dashed ' />
                                        </div>
           
                                        <div className='pl-3'>{k}</div>    
                                    </li>
                                ))
                            }
                        </ul>
                        <div className='w-full absolute bottom-10 px-10 left-0 flex justify-between align-bottom items-baseline'>
                            <div className='des-cn font-bold cursor-pointer' onPointerDown={()=>goDetails(index)}>
                                介绍详情
                            </div>
                            <div className='des-cn font-bold text-theme-blue'>
                                <span className=' text-4xl '>{i.price}</span>
                                /年
                            </div>
                        </div>
                    </div>
                ))
            }
        </div>
    )
}

export const Service = (props: ServiceType)=>{
    return(
        <AppContianer className='h-full'>
            <div className="flex  h-full">
                <div className='center w-10/12 flex items-center justify-center  h-full'>
                    <ServiceList />
                </div>
                <div className="right w-2/12 z-[200000] pl-[3rem]">
                    <div className='flex pt-16'>
                        <VerticalText text='服务版本' containerStyle="sub-title-cn py-5 px-5"/>
                        <VerticalText text='service' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[2.7rem]"/>
                    </div>
                </div>
            </div>
        </AppContianer>
    )

}