<template>
    <div class="datakanban">
        <div class="barList">
            <div @click="cutPage(index)" :class="[pageEnd == index ? 'Selected' : '']" v-for="(i, index) in barList"
                :key="index">
                {{ i.name }}
            </div>
        </div>

        <div class="dataExponent">
            <div class="dataExponentCon" v-for="(i, index) in dataExponentList[pageEnd]" :key="index + 'p'">
                <div class="dataExponentConTit">
                    {{ i.name }}
                </div>
                <div class="dataExponentConNum">
                    {{ i.num }}
                </div>
            </div>
        </div>

        <div v-if="pageEnd == 0">
            <BasicData/>
            <!-- <img style="width: 100%;" src="../../../assets/img/uuu4.svg" alt=""> -->


        </div>
        <div style="display: flex;flex-direction: column;justify-content: center;" v-if="pageEnd == 1">
            <AIApplications/>
            
            <!-- <div style="display: flex;width: 100%;">
                <img style="transform: scale(1.05);" src="../../../assets/img/chart2.svg" alt="">
                <div>
                    <img src="../../../assets/img/chart3.svg" alt="">
                    <img src="../../../assets/img/chart5.svg" alt="">
                </div>
            </div>
            <img style="width: 100%;" src="../../../assets/img/uuu5.svg" alt=""> -->
        </div>
        <div v-if="pageEnd == 2">
           <RegularTeaching/>

            <!-- <div style="display: flex;width: 100%;">
                <img style="transform: scale(1.05);" src="../../../assets/img/chart6.svg" alt="">
                <div>
                    <img src="../../../assets/img/chart10.svg" alt="">
                    <img src="../../../assets/img/chart8.svg" alt="">
                </div>
            </div>
            <img style="width: 100%;" src="../../../assets/img/chart7.svg" alt="">
            <img style="width: 100%;" src="../../../assets/img/chart9.svg" alt=""> -->
        </div>
        <div v-if="pageEnd == 3">
           <TeacherManagement/>
            <!-- <img style="width: 100%;" src="../../../assets/img/chart11.svg" alt="">
            <div style="display: flex;width: 100%;">
                <div>
                    <img style="object-view-box: inset(4% 16% 3% 0%);" src="../../../assets/img/chart12.svg" alt="">
                    <img style="object-view-box: inset(3% 0% 6% 0%);" src="../../../assets/img/chart13.svg" alt="">
                </div>
                <img style="object-view-box: inset(5% 4% 4% 4%);" src="../../../assets/img/chart14.svg" alt="">
            </div> -->
        </div>


    </div>
</template>

<script>
import BasicData from './BasicData.vue';
import AIApplications from './AIApplications.vue';
import RegularTeaching from './RegularTeaching.vue';
import TeacherManagement from './TeacherManagement.vue';
export default {
    name: 'AdataKanban',
    components: {
        BasicData,
        AIApplications,
        RegularTeaching,
        TeacherManagement,
    },
    data() {
        return {
            barList: [
                { name: '基础数据', ind: 1 },
                { name: 'AI应用', ind: 2 },
                { name: '常规教学', ind: 3 },
                { name: '教师管理', ind: 4 },
            ],
            dataExponentList: [
                [
                    { name: '教师总量', num: 1254 },
                    { name: '教师总量', num: 3721 },
                    { name: '月登录总数', num: 4579 },
                    { name: '月登录环比', num: '+15%' },
                ], [
                    { name: 'AI应用数量', num: 1254 },
                    { name: '今日用户数量', num: 3721 },
                    { name: '知识库数量', num: 4579 },
                    { name: '文件数量', num: '+15%' },
                ], [
                    { name: '课程总量', num: 1254 },
                    { name: '本月新增课程', num: 3721 },
                    { name: '新增课程环比', num: 4579 },
                    { name: 'AI应用嵌入数量', num: '272' },
                ], [
                    { name: '表单总量', num: 1254 },
                    { name: '表单回收率', num: 3721 },
                    { name: '表单平均处理时长', num: 4579 },
                    { name: '智能问答次数', num: '272' },
                ],
            ],
            pageEnd: 0
        }
    },
    methods: {
        cutPage(val) {
            this.pageEnd = val
        }
    }
}
</script>

<style scoped>
.datakanban {
    width: 100%;
}

.barList {
    display: flex;
    gap: 42px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #969BA3;
    margin-bottom: 15px;
}

.barList>div {
    cursor: pointer;
    height: 23px;
    line-height: 23px;
}

.Selected {
    color: #0663FE;
    border-bottom: 2px solid #0663FE;
}

.dataExponent {
    width: 100%;
    height: 120px;
    display: grid;
    background: #fff;
    border-radius: 20px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 15px;
    align-items: center;
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
}

.dataExponentCon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
    border-right: 1px solid #D9D9D9;
}

.dataExponentCon:nth-child(4) {
    border: none;
}

.dataExponentConTit {
    font-family: PingFang SC;
    font-size: 14px;
    line-height: 100%;
    color: #969BA3;
}

.dataExponentConNum {
    height: 45px;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 32px;
    line-height: 45px
}
</style>