<template>
    <div>
        <div class="unit-filter-wrap dark-iview-input">
            <Input search clearable placeholder="关键字搜索..." style="width: 100%" />
        </div>
        <div class="unit-list-wrap">
            <vuescroll>
                <div class="unit-list-item" :key="index" v-for="(item,index) in orderLearnList" @click="selectOrder(item)" >
                    <p class="unit-name">
                        {{item.name}}
                    </p>
                    <div class="unit-detail-info">
                        <span class="unit-datail-label">
                            学习阶段数量：
                        </span>
                        <span class="unit-detail-count">
                            {{item.steps.length}}
                        </span>
                    </div>
                    <div class="unit-detail-action">
                        <Icon class="unit-detail-action-icon" type="ios-folder-open" />
                        <Icon class="unit-detail-action-icon" type="md-checkmark" size="20" @click="selectOrder(item)" :style="{color:selectedOrderId.indexOf(item.id) == -1 ? 'white':'aqua','display':selectedOrderId.indexOf(item.id) == -1 ? 'none':'inline-block'}" />
                    </div>
                    <!--<div class="order-step-content">

                    </div>-->
                </div>
            </vuescroll>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                orderLearnList: [],
                selectedOrderId: [],
                selectedOrderItem: [],
            }
        }, 
        methods: {
            /**
             * 查询编序式教材列表
             * */
            findOrderLearn() {
                let requestData = {
                    creator: this.$store.state.userInfo.TEAMModelId
                }
                this.$api.learnActivity.FindOrderLearn(requestData).then(
                    res => {
                        if (res.error == null) {
                            this.orderLearnList = res.result.data
                        } else {
                            this.$Message.error('API ERROR!')
                        }
                    },
                    err => {
                        this.$Message.error('API ERROR!')
                    }
                )
            },
            selectOrder(item) {
                let index = this.selectedOrderId.indexOf(item.id)
                if (index == -1) {
                    this.selectedOrderId.push(item.id)
                    this.selectedOrderItem.push(item)
                } else {
                    this.selectedOrderId.splice(index, 1)
                    this.selectedOrderItem.splice(index, 1)
                }
                this.$emit('selectOrderLearn', this.selectedOrderItem)
            }
        },
        created() {
            this.findOrderLearn()
        }
    }
</script>
<style scoped lang="less">
    @import "./SelectOrderLearn.less";
</style>
<style>
</style>