import React,{useEffect, useState} from 'react'
import Layout from "~/components/layout";
import {Box} from './styled';
import { Tabs , Button } from 'antd';
import type { TabsProps } from 'antd';
import Evaluate from './components/evaluate';
import { useRouter } from "next/router";
import api , {ListPageJobInfoResp} from './api';
import Image from 'next/image';

export default function JobServicesDetail() {
  const router = useRouter();

  const [id, setId] = useState<number | null>(null);
  
  const [detail,setDetail] = useState<ListPageJobInfoResp | null>()
  const [sale,setSale] = useState<string | null>()
  const onChange = (key: string) => {
    console.log(key);
  };
  
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: `团队介绍`,
      children: <div className='teamIntroduction'>
        {/* <Image width={1100} height={800} src={detail?.teamPoster ? detail?.teamPoster : ''} alt='error'/> */}
        <img style={{width:"100%"}} src={detail?.teamPoster ? detail?.teamPoster : ''} alt="error" />
      </div>,
    },
    {
      key: '2',
      label: `团队评价`,
      children: <Evaluate evaluateInfo={detail?.evaluateInfo || []}/>,
    },
  ];
  
  useEffect(()=>{
    setId(Number(router.query.id))
  },[router])

  useEffect(() => {
    if (id) {
      api
        .listDetailJobServicesInfo({id})
        .then((res) => {
          setDetail(res.result || null);
        });
    }
  }, [id]);

  useEffect(()=>{
    setSale((Math.floor(Math.random() * 901) + 100).toFixed(0))
  },[])
  return (
    <Layout>
      <Box>
        <div className='top'>
          <div className="top-image">
           <Image fill src={detail?.pictureUrl ? detail?.pictureUrl : ''} alt='error'/>
          </div>
          <div className='top-right'>
              <div className='right-top'>
                  <div className='title'>
                  {detail?.serviceName}
                  </div>
                  <div className='detail'>
                    <div className='tab'>专业飞手</div>
                    <span className='content'>飞手需通过认证培训才可作业</span>
                  </div>
                  <div className='more'>
                  <div className='tab filst'>测绘场景榜第1名</div>
                    <div className='tab'>7x24小时服务</div>
                    <div className='tab'>{`月售${sale}`}</div>
                  </div>
              </div>
              <div className='right-bottom'>
                <div className='bottom-btn'>
                  <Button className='btn-left' size='small' type="primary">电话沟通</Button>
                  <Button className='btn-right' size='small' type="primary">立即预约</Button>
                </div>
              </div>
          </div>
        </div>
        <Tabs className='tabs' defaultActiveKey="1" items={items} onChange={onChange} />
      </Box>
    </Layout>
  )
}
