<template>
    <div class="baseDataBox" v-loading="loading">
       <barList :dataExponentList="dataExponentList"></barList>
       <div class="conT">
            <div>
                <tealiveness :alldata="alldata"/>
            </div>
            <div><teahoop :alldata="alldata"/></div>
       </div>
       <div class="conT2">
            <div style="width: 40%;flex-shrink: 0;">
                <levChart :alldata="alldata"/>
            </div>
            <div style="flex: 1;flex-shrink: 0;">
                <useTimer :alldata="alldata.slice(7)"/>
            </div>
       </div>
    </div>
</template>
<script>
import teahoop from './chartList/teahoop.vue';
import tealiveness from './chartList/tealiveness.vue';
import levChart from './chartList/levChart.vue';
import useTimer from './chartList/useTimer.vue';
import barList from '../barList.vue';
import { API_CONFIG } from "@/common/apiConfig";

export default {
    name:'baseDateChart',
    props:['oid','org'],

    components: {
        tealiveness,
        barList,
        teahoop,
        levChart,
        useTimer
    },
    data() {
        return {
            loading:false,
            alldata:[],
            dataExponentList:[],
        }
    },
    // watch:{
    //     oid(newL){
    //         console.log(newL);

    //         this.getTeaBaseData()
    //     }
    // },
    methods: {
        async getTeaBaseData() {
            this.loading = true;
            let params = [
                {
                    functionName: API_CONFIG.getKanbanBasedata.functionName,
                    oid: this.oid,
                    org: '',
                },
            ];
            
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {
                    let top = [
                        { label: '教师总量', value: 0 },
                        { label: '学生总量', value: 0 },
                        { label: '月登录总数', value: 0 },
                        { label: '月登录环比', value: 0 },
                    ]
                    top[0].value = res.data[0][0].num
                    top[1].value = res.data[1][0].num 
                    top[2].value = res.data[2][0].num
      
                    if (res.data[2][0].num == 0 && res.data[3][0].num == 0) {
                        top[3].value = '0%';
                    }else{
                        let nuL = (res.data[2][0].num - res.data[3][0].num) / res.data[3][0].num 
                        top[3].value = Math.round(nuL * 100) + '%';
                    }


                    this.dataExponentList = top
                    // console.log('res.data[4][0].lab',res.data[4][0]);

                    // console.log('res.data[4][0].lab',res.data[4][0].lab);
                    const now = new Date();
                    const day = now.getDate();
                    const month = now.getMonth() + 1; // 8 (月份从0开始)
                    const week = this.getWeekOfMonth()
                    // console.log('week',week);
                    
                    res.data[4] = Array.from({ length: day}, (_, i) => {
                        const lab = String(i + 1).padStart(2, '0'); // 生成lab为01到最新日期
                        const existingEntry = res.data[4].find(entry => entry.lab === lab);
                        return existingEntry ? existingEntry : { lab, num: 0 };
                    });

                    res.data[5] = Array.from({ length: week}, (_, i) => {
                        const lab = String(i + 1).padStart(2, '0'); // 生成lab为01到最新日期
                        const existingEntry = res.data[5].find(entry => '0'+entry.lab === lab);   
                        return existingEntry ? existingEntry : { lab, num: 0 };
                    });

                    res.data[6] = Array.from({ length: month}, (_, i) => {
                        const lab = String(i + 1).padStart(2, '0'); // 生成lab为01到最新日期
                        const existingEntry = res.data[6].find(entry => entry.lab == lab);
                        return existingEntry ? existingEntry : { lab, num: 0 };
                    });

                    // 使用时长数据处理
                    res.data[11] = Array.from({ length: day}, (_, i) => {
                        const lab = String(i + 1).padStart(2, '0'); // 生成lab为01到最新日期
                        const existingEntry = res.data[11].find(entry => entry.lab === lab);
                        return existingEntry ? existingEntry : { lab, num: 0 };
                    });

                    res.data[12] = Array.from({ length: week}, (_, i) => {
                        const lab = String(i + 1).padStart(2, '0'); // 生成lab为01到最新日期
                        const existingEntry = res.data[12].find(entry => '0'+entry.lab === lab);                        
                        return existingEntry ? existingEntry : { lab, num: 0 };
                    });

                    res.data[13] = Array.from({ length: month}, (_, i) => {
                        const lab = String(i + 1).padStart(2, '0'); // 生成lab为01到最新日期
                        const existingEntry = res.data[13].find(entry => entry.lab == lab);
                        return existingEntry ? existingEntry : { lab, num: 0 };
                    });

                    // console.log('res.data[4]',res.data[4]);

                    this.alldata = res.data.slice(4)
                    // console.log('this.alldata',this.alldata);
                    

                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                    console.error(err);
                });
        },
        // 获取今天是第几周
        getWeekOfMonth() {
            const date = new Date();
            const dayOfMonth = date.getDate();

            // 确定当前日期是本月的第几周
            const weekNumber = Math.ceil(dayOfMonth / 7);
            
            console.log('weekNumber',weekNumber);
            
            // 计算本月的第几周
            return weekNumber;
        }
    },
    mounted() {
        // console.log('getTeaBaseData',this.oid);
        // if (!this.oid) {
        if (this.oid) {
            this.getTeaBaseData()
        }
        // }
    },
}
</script>
<style scoped>
.baseDataBox{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 30px;
}
.conT{
    display: flex;justify-content: space-between;gap: 20px;
    height: 400px;
}
.conT div{
    flex: 1;flex-shrink: 0;background: #fff;border-radius: 10px;
    height: 100%;
}
.conT2{
    display: flex;justify-content: space-between;
    gap: 20px;
    height: 400px;

}
.conT2 div{
    background: #fff;border-radius: 10px;
    height: 100%;
}
</style>