<template>
    <div class="manage-order-learn dark-iview-split">
        <Loading v-if="isLoading" bgColor="rgba(103, 103, 103, 0.27)"></Loading>
        <Split v-model="split1">
            <div slot="left" class="order-learn-list-box">
                <div class="learn-list-header">
                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ listType = e }" @on-visible-change="dropdownStates">
                        <span style="cursor: pointer;">
                            <b class="title">{{ typeLabel }}</b>
                            <Icon type="ios-arrow-down" style="margin-left:8px;"></Icon>
                        </span>
                        <DropdownMenu slot="list" v-for="(item,index) in typeLsit" :value="item.value" :key="index">
                            <DropdownItem :name="item.value">{{ item.label }}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <div class="learn-action-wrap">
                        <Icon type="md-create" :color="editIconStatus ? 'white':'#808080'" :style="{'cursor': editIconStatus ? 'pointer':'not-allowed'}" class="to-create-icon" @click="editInfo" title="编辑" />
                        <Icon type="md-trash" :color="editIconStatus ? 'white':'#808080'" :style="{'cursor': editIconStatus ? 'pointer':'not-allowed'}" class="to-create-icon" @click="deleteData" title="删除" />
                        <Icon type="md-add" class="to-create-icon" @click="createData" title="新增" />
                    </div>
                </div>
                <div class="dark-iview-tabs-line" style="padding-top:10px;height:100%;">
                    <vuescroll>
                        <UnitList v-show="listType == 'unit'" :class="listType == 'unit' ? 'animated fadeIn':''" @selectIndex="selectOrderLearn" :unitList="unitList"></UnitList>
                        <OrderLearnList v-show="listType == 'order'" :class="listType == 'order' ? 'animated fadeIn':''" @selectIndex="selectOrderLearn" :orderLearnList="orderLearnList"></OrderLearnList>
                    </vuescroll>
                </div>
            </div>
            <div slot="right" class="order-learn-main">
                <div class="main-bar-wrap">
                    <span :class="currentTabIndex == 1 ? 'main-header-tab line-bottom line-bottom-active':'main-header-tab line-bottom'" @click="selectTab(1)">学习数据</span>
                    <span :class="currentTabIndex == 0 ? 'main-header-tab line-bottom line-bottom-active':'main-header-tab line-bottom'" @click="selectTab(0)">学习内容</span>
                </div>
                <div class="order-learn-main-body dark-iview-split" v-if="listType == 'order' && orderLearnList[currentLearnIndex]">
                    <OrderLearnInfo v-if="currentTabIndex == 0" :orderLearnInfo="orderLearnList[currentLearnIndex]"></OrderLearnInfo>
                    <ActivityInfo ref="activityInfo" v-else :learnContent="learnContent" :classList="classList"></ActivityInfo>
                </div>
                <div class="order-learn-main-body dark-iview-split" v-else-if="listType == 'unit' && unitList[currentUnitIndex]">
                    <UnitInfo v-if="currentTabIndex == 0" :unitInfo="unitList[currentUnitIndex]"></UnitInfo>
                    <ActivityInfo ref="activityInfo" v-else :learnContent="learnContent" :classList="classList"></ActivityInfo>
                </div>
                <div v-else>
                    <EmptyData style="padding-top:150px;"></EmptyData>
                </div>
            </div>
        </Split>

        <Modal v-model="editStatus" :title="listType == 'order' ? '编辑编序式教材' : '编辑自学单元'" @on-ok="confirmEdit">
            <p>确认跳转到<span style="padding:0px 5px;">{{ listType == 'order' ? '编序式教材':'自学单元'}}</span>编辑页面？</p>
        </Modal>
    </div>
</template>
<script>
import QuestionList from '@/components/learnactivity/QuestionList.vue'
import ContentFileList from '@/components/selflearn/ContentFileList.vue'
import OrderLearnList from './OrderLearnList.vue'
import UnitList from './UnitList.vue'
import OrderLearnInfo from './OrderLearnInfo.vue'
import UnitInfo from './UnitInfo.vue'
import ActivityInfo from './ActivityInfo.vue'

export default {
    components: {
        QuestionList, ContentFileList, OrderLearnList, UnitList, OrderLearnInfo, UnitInfo, ActivityInfo
    },
    data() {
        return {
            split1: 0.2,
            year: '',
            semester: '',
            requestIds: [],
            classList: [],
            currentTabIndex: 1,
            listType: 'unit',//order: 编序式教材 unit：学习单元
            isLoading: false,
            sasString: '',
            editStatus: false,
            orderLearnList: [],
            unitList: [],
            currentLearnIndex: 0,
            currentUnitIndex: 0,
            typeLsit: [
                {
                    label: '学习单元',
                    value: 'unit'
                },
                {
                    label: '编序式学习',
                    value: 'order'
                }
            ]
        }
    },
    computed: {
        typeLabel: function () {
            let pId = this.listType
            let name = ''
            if (pId) {
                let temp = this.typeLsit.filter(item => {
                    return pId == item.value
                })
                if (temp.length > 0) name = temp[0].label
            }
            return name
        },
        editIconStatus() {
            if (this.listType == 'order') {
                if (this.orderLearnList.length > 0) {
                    return true
                } else {
                    return false
                }
            } else {
                if (this.unitList.length > 0) {
                    return true
                } else {
                    return false
                }
            }
        },
        learnContent() {
            if (this.listType == 'order') {
                if (this.orderLearnList.length > 0) {
                    return this.orderLearnList[this.currentLearnIndex]
                } else {
                    return {}
                }
            } else {
                if (this.unitList.length > 0) {
                    return this.unitList[this.currentUnitIndex]
                } else {
                    return {}
                }
            }
        }
    },
    watch: {
        learnContent: {
            handler(n, o) {
                if (this.requestIds.indexOf(this.learnContent.id) == -1) {
                    this.findTask()
                }
            },
            deep: true
        }
    },
    methods: {
        dropdownStates(flag) {
            if (!flag) this.toggleList()
        },
        setStartTime(date, data) {
            this.activityInfo.startTime = new Date(date).getTime()
        },
        setEndTime(date, data) {
            this.activityInfo.endTime = new Date(date).getTime()
        },

        /**
         * 发布活动
        */
        publishActivity() {
            this.publishStatus = true
        },

        selectTab(index) {
            this.currentTabIndex = index
        },
        createData() {
            if (this.listType == 'order') {
                this.$router.push({
                    name: 'createOrderLearn'
                })
            } else {
                this.$router.push({
                    name: 'createLearnUnit'
                })
            }
        },
        /**
         * 删除编序式教材或自学单元
         * */
        deleteData() {
            let name = this.listType == 'order' ? this.orderLearnList[this.currentLearnIndex].name : this.unitList[this.currentUnitIndex].name
            this.$Modal.confirm({
                title: this.listType == 'unit' ? '删除学习单元' : '删除编序式学习',
                content: '确认删除' + name + '吗？',
                onOk: () => {
                    //this.confirmDelete()
                    this.$Message.warning('暂未对接删除API')
                }
            })
        },
        /**
         * 确认删除编序式教材或自学单元
         * */
        confirmDelete() {
            if (this.listType == 'order') {
                let requestData = {
                    id: this.orderLearnList[this.currentLearnIndex].id,
                    pk: this.orderLearnList[this.currentLearnIndex].code
                }
                this.$api.learnActivity.DeleteLeanProcess(requestData).then(
                    res => {
                        if (res.error == null) {
                            let index = this.currentLearnIndex
                            this.currentLearnIndex = 0
                            this.orderLearnList.splice(index, 1)
                            this.$Message.success('删除成功！')

                        } else {
                            this.$Message.success('删除失败！')
                        }
                    },
                    err => {
                        this.$Message.success('删除失败！')
                    }
                )
            } else {
                let requestData = {
                    id: this.unitList[this.currentUnitIndex].id,
                    pk: this.unitList[this.currentUnitIndex].code
                }
                this.$api.learnActivity.DeleteUnit(requestData).then(
                    res => {
                        if (res.error == null) {
                            let index = this.currentUnitIndex
                            this.currentUnitIndex = 0
                            this.unitList.splice(index, 1)
                            this.$Message.success('删除成功！')
                        } else {
                            this.$Message.success('删除失败！')
                        }
                    },
                    err => {
                        this.$Message.success('删除失败！')
                    }
                )
            }
        },
        /**
         * 切换列表类型
         * */
        toggleList() {
            if (this.listType == 'order') {
                this.findOrderLearn()
            } else {
                this.findUnit()
            }
        },
        //查询学习任务
        findTask() {
            if (this.learnContent.id) {
                this.$api.learnActivity.findTask({
                    id: this.learnContent.id
                }).then(
                    (res) => {
                        if (res.error == null) {
                            let resData = res.tasks
                            for (let index in resData) {
                                for (let i in this.classList) {
                                    if (this.classList[i].classroomCode == resData[index].code) {
                                        this.$set(this.classList[i], [resData[index].id], resData[index])
                                        break
                                    }
                                }
                            }
                            this.requestIds.push(this.learnContent.id)
                        } else {
                            this.$Message.error('API error!')
                        }
                    },
                    (err) => {
                        this.$Message.error('API error!')
                    }
                )
            }
        },
        goToCreate() {
            if (this.listType == 'order') {
                this.$router.push({
                    name: 'createOrderLearn'
                })
            } else {
                this.$router.push({
                    name: 'createLearnUnit'
                })
            }

        },
        /**
         * 查找教师课程下的班级（班级）
         * */
        findClassroom() {
            if (this.classList.length == 0) {
                this.$api.learnActivity.FindClassroomByTeacherId({
                    code: this.$store.state.userInfo.schoolCode,
                    id: this.$store.state.userInfo.TEAMModelId
                }).then(
                    res => {
                        if (!res.error) {
                            this.classList = res.courses
                            if (this.classList.length > 0) {
                                this.findTask()
                                setTimeout(() => {
                                    this.$refs['activityInfo'].getClassroomStudent()
                                }, 1000)
                            }
                        } else {
                            this.$Message.error('API ERROR!')
                        }
                    },
                    err => {
                        this.$Message.error('API ERROR!')
                    }
                ).finally(() => {
                    setTimeout(() => {
                        this.isLoading = false
                    }, 500)
                })
            }
        },
        downloadFile(item) {
            window.location.href = item.blobUrl + this.sasString
        },
        confirmEdit() {
            if (this.listType == 'order') {
                let orderLearnInfo = this.orderLearnList[this.currentLearnIndex]
                this.$router.push({
                    name: 'createOrderLearn',
                    params: {
                        orderLearnInfo
                    }
                })
            } else {
                //编辑最小单元
                let unitInfo = this.unitList[this.currentUnitIndex]
                this.$router.push({
                    name: 'createLearnUnit',
                    params: {
                        unitInfo
                    }
                })
            }

        },
        editInfo() {
            this.editStatus = true
        },
        selectOrderLearn(index) {
            if (this.listType == 'order') {
                this.currentStepIndex = 0
                this.currentLearnIndex = index
            } else {
                this.currentUnitIndex = index
            }
            this.$refs['activityInfo'].checkFindRecord()
        },
        /**
         * 查询编序式教材列表
         * */
        findOrderLearn() {
            if (this.orderLearnList.length == 0) {
                let requestData = {
                    code: 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 => {

                    }
                )
            }

        },
        /**
         * 查询最小单元列表
         * */
        findUnit() {
            if (this.unitList.length == 0) {
                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!')
                    }
                )
            }

        }
    },
    created() {
        //this.findOrderLearn()
        this.isLoading = true
        this.findUnit()
        this.findClassroom()
    }
}
</script>
<style lang="less" scoped>
@import "./SelfLearn.less";
</style>
<style lang="less">
.order-learn-content-wrap #loadingBox {
    margin-top: 88px !important;
}

.publish-modal .ivu-picker-confirm-time {
    color: #515a6e;
}

.order-learn-list-box .ivu-tabs-content {
    height: 100%;
}
.sort-dropdown {
    .title {
        color: white;
        font-size: 14px;
    }
    .ivu-select-dropdown {
        background-color: #2d2d2d;
        border-radius: 2px;
        border: 1px #464646 solid;
        .ivu-dropdown-menu {
            li {
                color: #ccc;
                font-size: 12px !important;
                &:hover {
                    color: #2d2d2d;
                }
            }
        }
    }
}
</style>