<template>
    <div>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane :label="$t('message.visual_identification')" name="first">
                <el-row class="el_row_card">
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="deepLearningImg" :linkSrc="''" :title="$t('message.Deep_learning_Machines')" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="emotionImg" :linkSrc="''" :title="$t('message.emotion_recognition')" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="gestureImg" :linkSrc="''" :title="$t('message.gesture_recognition')" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="objectImg" :linkSrc="''" :title="$t('message.object_recognition')" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="postureImg" :linkSrc="''" :title="$t('message.pose_recognition')" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="discerningEyeImg" :linkSrc="''" :title="$t('message.face_recognition')" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane :label="$t('message.speech_recognition')" name="second">
                <el-row class="el_row_card">
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="speechImg" :linkSrc="''" :title="$t('message.speech_recognition')" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane :label="$t('message.text_processing')" name="third">
                <el-row class="el_row_card">
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="comingSoonImg" :linkSrc="''" :title="$t('message.stay_tuned')" @getNextValue="getNextValue"
                            :comingSoon="true"></Card>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import '../../assets/css/header.css'
import Card from "./targetCard.vue"
import deepLearningImg from '../../assets/img/AppCenter_ai_teachableMachine.jpg'
import emotionImg from '../../assets/img/AppCenter_ai_emotion.jpg'
import gestureImg from '../../assets/img/AppCenter_ai_gesture_recognition.jpg'
import objectImg from '../../assets/img/object_recognition_header.jpg'
import postureImg from '../../assets/img/posenet_recogition.png'
import discerningEyeImg from '../../assets/img/tm_with_pose.jpg'
import speechImg from '../../assets/img/AppCenter_ai_speech.jpg'
import comingSoonImg from '../../assets/img/AppCenter_comingSoon.jpg'

const activeName = ref("first")
const emit = defineEmits("getNextValueAI")
const getNextValue = (val) => {
    emit("getNextValueAI", val)
}
</script>

<style lang="scss">
// .el_row_card {
//     max-height: 340px;
//     overflow: auto;
//     min-height: 260px;

//     .card_style {
//         padding: 0 0.75rem;
//         margin-bottom: 15px;
//     }
// }
</style>