<template>
    <div>
        <div :class="currentLearnIndex == index ? 'order-learn-item block-bg block-bg-active':'order-learn-item block-bg' " :key="index" v-for="(item,index) in orderLearnList" @click="selectOrderLearn(index)">
            <p class="order-learn-name">{{item.name}}</p>
            <div class="order-learn-steps">
                <span><Icon type="md-filing" style="margin-right:8px;" />学习对象：</span>
                <span>{{5}}</span>
            </div>
            <div class="order-learn-steps">
                <span><Icon type="ios-cube" style="margin-right:8px;" />学习阶段：</span>
                <span>{{item.steps.length}}</span>
            </div>
        </div>
        <EmptyData v-if="orderLearnList.length == 0" style="margin-top:150px;"></EmptyData>
    </div>
</template>
<script>
    
    export default {
        props: {
            orderLearnList: {
                default: () => {
                    return []
                },
                type: Array
            }
        },
        data() {
            return {
                currentLearnIndex:0
            }
        },
        methods: {
            selectOrderLearn(index) {
                this.currentLearnIndex = index
                this.$emit('selectIndex',index)
            }
        }
    }
</script>
<style scoped lang="less">
    @main-bgColor: rgb(40,40,40);//主背景颜色
    @borderColor: #424242;
    @primary-textColor: #fff; //文本主颜色
    @second-textColor: #a5a5a5; //文本副级颜色
    @primary-fontSize: 14px;
    @second-fontSize: 16px;

    .order-learn-item {
        width: 100%;
        padding: 10px 10px 10px 0px;
        border-bottom: 1px solid @borderColor;
        cursor: pointer;
        .order-learn-name

    {
        color: white;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .order-learn-steps {
        color: @second-textColor;
        height: 25px;
        line-height: 25px;
    }
    }
</style>