<template>
    <div class="index-page">
        <layout :layoutConf="layoutSize">
            <page-head title="张謇教育基地管理平台" slot="header" />
            <template v-if="fetchSuccess">
                <!-- left -->
                <left :leftData="leftData" slot="left" />
                <!-- center -->
                <center :centerData="centerData" slot="center" />
                <!-- right -->
                <right :rightData="rightData" slot="right" />
            </template>
        </layout>
    </div>
</template>

<script>
import Left from './Left.vue'
import Center from './Center.vue'
import Right from './Right.vue'

export default {
    data () {
        return {
            // 布局设置
            layoutSize: {
                leftWidth: '510px',
                rightWidth: '510px',
                center: {
                    width: '100%'
                }
            },
            // 接口获取是否成功标识
            fetchSuccess: false,
            // 左侧数据
            leftData: {},
            // 中间数据
            centerData: {},
            // 右侧数据
            rightData: {}
        }
    },

    components: {
        Left,
        Center,
        Right
    },

    mounted () {
        this.init()
    },

    methods: {
        async init () {
            try {
                const data = await this.fetch('managePlatform')
                this.fetchSuccess = true
                // 左侧数据
                this.leftData = {
                    gender: data.p1 || {}, // 男女比例
                    age: data.p2 || {}, // 年龄结构
                    edu: data.p3 || {}, // 学历情况
                    party: data.p4 || {}, // 党派分布
                    ethnic: data.p5 || {}, // 民族分布
                    industry: data.p6 || {}, // 行业分布
                    participate: data.p7 || {}, // 参与度
                    active: data.p8 || {}, // 活跃度
                    studentDemeanor: data.p9 || {}, // 学员风采
                    starClass: data.p10 || {} // 明星班级
                }
                // 中间数据
                this.centerData = {
                }
                // 右侧数据
                this.rightData = {
                    staff: data.p12 || {}, // 师资力量
                    coursedata: data.p13 || {}, // 教学课程
                    line: data.p14 || {}, // 教学线上线下比例
                    learn: data.p15 || {} // 学习内容
                }
            } catch (err) {
                console.log('managePlatform >', err)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.index-page {
    width: 1920px;
    margin: 0 auto;
}
</style>
