<template>
    <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="视觉识别" name="first">
                <el-row class="el_row_card">
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="deepLearningImg" :linkSrc="''" :title="'深度学习机器'" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="emotionImg" :linkSrc="''" :title="'情绪识别'" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="gestureImg" :linkSrc="''" :title="'手势识别'" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="objectImg" :linkSrc="''" :title="'物体识别'" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="postureImg" :linkSrc="''" :title="'姿态识别'" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="discerningEyeImg" :linkSrc="''" :title="'慧眼识人'" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="语音识别" name="second">
                <el-row class="el_row_card">
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="speechImg" :linkSrc="''" :title="'语音识别'" @getNextValue="getNextValue"
                            :comingSoon="false"></Card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="文本处理" name="third">
                <el-row class="el_row_card">
                    <el-col :span="12" class="card_style">
                        <Card :imgSrc="comingSoonImg" :linkSrc="''" :title="'敬请期待'" @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 getNextValue = (val) => {
    console.log(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>