<template>
    <div class="areaMgmt-container">
        <div class="header">
            <span class="title">所有学校</span>
            <span class="info">（共建 {{ schList.length }} 个试点校，参训人数 {{ totalTeachers }} 人）</span>
        </div>
        <div class="content">
            <div class="sch-item" v-for="(item,index) in schList" :key="index" @click="toSchoolDetail(index)">
                <div class="sch-item-img" :style="{backgroundImage: 'url('+ item.picture +')' }">
                </div>
                <p class="sch-item-name">{{ item.name }}</p>
                <p class="sch-item-info">参训人数：{{ item.count }}</p>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            schList: []
        }
    },
    created() {
        this.getSchList(sessionStorage.getItem('areaId'))
    },
    methods: {
        toSchoolDetail(index) {
            console.log(this.schList[index])
            this.$router.push({
                name: "schoolDetail",
                params: this.schList[index]
            })
        },
        getSchList(areaId) {
            this.$api.ability.getSchList({
                id: areaId
            }).then(res => {
                this.schList = res.info
            })
        }
    },
    computed: {
        totalTeachers() {
            return this.schList.reduce((a, b) => a + b.count, 0)
        }
    },
	mounted() {
		this.$EventBus.$off('onSwitchArea')
		this.$EventBus.$on('onSwitchArea', val => {
			console.log('xxxx');
		    this.getSchList(sessionStorage.getItem('areaId'))
		})
	}
}
</script>

<style lang="less" src="./Index.less" scoped></style>
