import React from "react";
import { Tabs } from "antd";
import type { TabsProps } from "antd";
import "../../../asstes/css/header.css";
import LabsCard from "./labsCard";

import AppCenter_ai_teachableMachine from "../../../asstes/img/AppCenter_ai_teachableMachine.jpg";
import AppCenter_ai_emotion from "../../../asstes/img/AppCenter_ai_emotion.jpg";
import AppCenter_ai_gesture_recognition from "../../../asstes/img/AppCenter_ai_gesture_recognition.jpg";
import object_recognition_header from "../../../asstes/img/object_recognition_header.jpg";
import posenet_recogition from "../../../asstes/img/posenet_recogition.png";
import tm_with_pose from "../../../asstes/img/tm_with_pose.jpg";

import AppCenter_ai_speech from "../../../asstes/img/AppCenter_ai_speech.jpg";

import AppCenter_comingSoon from "../../../asstes/img/AppCenter_comingSoon.jpg";

interface AiProps {
    // 在这里定义Ai组件的属性
    handleChildValue: (value: string) => void;
}
const Ai: React.FC<AiProps> = (props) => {
    const handleCardClick = (title: string) => {
        // console.log("子组件传递的值:", title);
        props.handleChildValue(title);
    };
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '视觉识别',
            children: <div className="labs-card-list">
                <div className="labs-card-list-item">
                    <LabsCard title={"深度学习机器"} imgSrc={AppCenter_ai_teachableMachine} onClick={()=>handleCardClick("深度学习机器")} />
                </div>
                <div className="labs-card-list-item">
                    <LabsCard title={"情绪识别"} imgSrc={AppCenter_ai_emotion} onClick={()=>handleCardClick("情绪识别")} />
                </div>
                <div className="labs-card-list-item">
                    <LabsCard title={"手势识别"} imgSrc={AppCenter_ai_gesture_recognition} onClick={()=>handleCardClick("手势识别")} />
                </div>
                <div className="labs-card-list-item">
                    <LabsCard title={"物体识别"} imgSrc={object_recognition_header} onClick={()=>handleCardClick("物体识别")} />
                </div>
                <div className="labs-card-list-item">
                    <LabsCard title={"姿态识别"} imgSrc={posenet_recogition} onClick={()=>handleCardClick("姿态识别")} />
                </div>
                <div className="labs-card-list-item">
                    <LabsCard title={"慧眼识人"} imgSrc={tm_with_pose} onClick={()=>handleCardClick("慧眼识人")} />
                </div>
            </div>,
        },
        {
            key: '2',
            label: '语音识别',
            children: <div className="labs-card-list">
            <div className="labs-card-list-item">
                <LabsCard title={"语音识别"} imgSrc={AppCenter_ai_speech} onClick={()=>handleCardClick("语音识别")} />
            </div>
        </div>,
        },
        {
            key: '3',
            label: '文本处理',
            children: <div className="labs-card-list">
            <div className="labs-card-list-item">
                <LabsCard title={""} imgSrc={AppCenter_comingSoon} />
            </div>
        </div>,
        }

    ]
    return <div>
        <h2>人工智能</h2>
        <Tabs defaultActiveKey="1" items={items} />
    </div>;
}

export default Ai;