<template>
    <div style="width:100%;height:100%;">
        <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" v-for="(item,index) in unitList" :key="index" @click="selectUnit(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.resource.length}}
                        </span>
                        <span class="devid-line">|</span>
                        <span class="unit-datail-label">
                            题目数量：
                        </span>
                        <span class="unit-detail-count">
                            {{item.item.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" :style="{color:selectedUnitId.indexOf(item.id) == -1 ? 'white':'aqua','display':selectedUnitId.indexOf(item.id) == -1 ? 'none':'inline-block'}" size="20" @click.stop="selectUnit(item)" />
                    </div>
                </div>
                <EmptyData v-if="unitList.length == 0" textContent="暂无学习单元，请先创建学习单元" style="margin-top:50px;"></EmptyData>
                <router-link class="to-create-unit-link" v-if="unitList.length == 0" to="/home/createLearnUnit">前往新建学习单元>>></router-link>
            </vuescroll>
        </div>
    </div>
</template>
<script>
    
    export default {
        props: {
            config: {
                type: Object,
                default: () => {
                    return {
                        type: 'check' //check:多选模式 radio：单选模式
                    }
                }
            }
        },
        data() {
            return {
                currentUnitIndex: 0,
                unitList: [],
                selectedUnitId: [],
                selectedUnitItem: [],
            }
        },
        methods: {
            /**
             * 通过id查询题目信息
             * */
            //findQuestionById() {
            //    if (this.unitList.length > 0) {
            //        this.isLoading = true
            //        if (!this.unitList[this.currentUnitIndex].requestedI) {
            //            this.$api.learnActivity.FindQuestionById(this.unitList[this.currentUnitIndex].item).then(
            //                res => {
            //                    if (res.error == null) {
            //                        this.unitList[this.currentUnitIndex].item.length = 0
            //                        this.$set(this.unitList[this.currentUnitIndex], 'item', res.result.data)
            //                        this.unitList[this.currentUnitIndex].requestedI = true
            //                        console.log(this.unitList)
            //                    } else {
            //                        this.$Message.error("API ERROR!")
            //                        setTimeout(() => {
            //                            this.isLoading = false
            //                        }, 500)
            //                    }
            //                },
            //                err => {
            //                    this.$Message.error("API ERROR!")
            //                    setTimeout(() => {
            //                        this.isLoading = false
            //                    }, 500)
            //                }
            //            )
            //        } else {
            //            setTimeout(() => {
            //                this.isLoading = false
            //            }, 200)
            //        }
            //    }
            //},
            /**
             * 通过id查询内容信息
             * */
            //findResourceById() {
            //    if (this.unitList.length > 0) {
            //        this.isLoading = true
            //        if (!this.unitList[this.currentUnitIndex].requestedR) {

            //            this.$api.learnActivity.FindSyllabusResourceById(this.unitList[this.currentUnitIndex].resource).then(
            //                res => {
            //                    if (res.error == null) {
            //                        this.unitList[this.currentUnitIndex].resource.length = 0
            //                        this.unitList[this.currentUnitIndex].resource = res.result.data
            //                        this.unitList[this.currentUnitIndex].requestedR = true
            //                    } else {
            //                        this.$Message.error("API ERROR!")
            //                    }
            //                    setTimeout(() => {
            //                        this.isLoading = false
            //                    }, 500)
            //                },
            //                err => {
            //                    this.$Message.error("API ERROR!")
            //                    setTimeout(() => {
            //                        this.isLoading = false
            //                    }, 500)
            //                }
            //            )
            //        } else {
            //            setTimeout(() => {
            //                this.isLoading = false
            //            }, 200)
            //        }
            //    }
            //},
            /**
             * 获取最小单元列表
             * */
            getUnit() {
                let requestData = {
                    code: this.$store.state.userInfo.TEAMModelId
                }
                this.$api.learnActivity.FindUnit(requestData).then(
                    res => {
                        if (!res.error) {
                            this.unitList = res.units
                        } else {
                            this.$Message.error('API ERROR!')
                        }
                    },
                    err => {
                        this.$Message.error('API ERROR!')
                    }
                )
            },
            selectUnit(item) {
                if (this.config.type == 'check') {
                    let index = this.selectedUnitId.indexOf(item.id)
                    if (index == -1) {
                        this.selectedUnitId.push(item.id)
                        this.selectedUnitItem.push(item)
                    } else {
                        this.selectedUnitId.splice(index, 1)
                        this.selectedUnitItem.splice(index, 1)
                    }

                } else {
                    if (this.selectedUnitId.length == 0) {
                        this.selectedUnitId.push(item.id)
                        this.selectedUnitItem.push(item)
                    } else {
                        let index = this.selectedUnitId.indexOf(item.id)
                        if (index == -1) {
                            this.selectedUnitId.length = 0
                            this.selectedUnitItem.length = 0
                            this.selectedUnitId.push(item.id)
                            this.selectedUnitItem.push(item)
                        } else {
                            this.selectedUnitId.splice(index, 1)
                            this.selectedUnitItem.splice(index, 1)
                        }
                    }

                }
                this.$emit('selectUnit', this.selectedUnitItem)
            },
        },
        created() {
            this.getUnit()
        }
    }
</script>
<style lang="less" scoped>
@import "./SelectLearnUnit.less";
</style>
<style>

</style>