<template>
    <div>
        <div :class="index == currentUnitIndex ? 'unit-list-item block-bg block-bg-active':'unit-list-item block-bg'" :key="index" v-for="(item,index) in unitList" @click="selectUnit(index)">
            <p class="unit-item-name">{{item.name}}</p>
            <p class="unit-item-resource"><Icon type="ios-folder" style="margin-right:10px;" />资源数：{{item.resource.length}}</p>
            <p class="unit-item-item"><Icon type="ios-cube" style="margin-right:10px;" />题目数：{{item.item.length}}</p>
        </div>
        <EmptyData v-if="unitList.length == 0" style="margin-top:150px;"></EmptyData>
    </div>
</template>
<script>
    
    export default {
        props: {
            unitList: {
                default: () => {
                    return []
                },
                type: Array
            }
        },
        data() {
            return {
                currentUnitIndex: 0
            }
        },
        methods: {
            selectUnit(index) {
                this.currentUnitIndex = index
                this.$emit('selectIndex', index)
            }
        }
    }
</script>
<style scoped lang="less">
    @import "./UnitList.less";
</style>