<template>
    <div class="learn-unit-container">
        <div class="learn-unit-header common-save-btn">
            <span class="name-label">名称：</span>
            <Input v-model="learnUnit.name" placeholder="请输入名称..." :class="checkName ? '':'my-error-style'" style="width: 300px" @on-blur="checkUnitName" />
            <span style="color:#ed4014;margin-left:15px;" v-show="!checkName">名称不能为空</span>
            <Button class="btn-save" type="text" :loading="isLoading" ghost icon="ios-albums-outline" @click="saveLearnUnitData">保存数据</Button>
            <Button class="btn-save" type="text" ghost icon="md-arrow-back" to="/home/SelfLearn" style="margin-right: 10px;">返回上级</Button>
        </div>
        <div class="learn-unit-main">
            <Split v-model="split1">
                <div slot="left" class="demo-split-pane">
                    <div class="choose-content-wrap">
                        <NewChooseContent :questionSize="5" @on-select-question="getSelectedQuestion" @on-cancel-question="cancelQuestion" @on-file-change="getSelectFile"></NewChooseContent>
                    </div>
                </div>
                <div slot="right" class="demo-split-pane">
                    <div class="preview-content-wrap">
                        <p class="preview-label">已选资源</p>
                        <div style="height: calc(100% - 45px);">
                            <vuescroll>
                                <p class="content-type-label">内容：{{learnUnit.resource.length}}个</p>
                                <ContentFileList :resources="learnUnit.resource"></ContentFileList>
                                <p class="content-type-label">题目：{{learnUnit.item.length}}道</p>
                                <div class="content-question-wrap">
                                    <EmptyData v-if="learnUnit.item.length == 0" style="margin-top:30px;"></EmptyData>
                                    <QuestionList v-else :questions="learnUnit.item"></QuestionList>
                                </div>
                            </vuescroll>
                        </div>
                    </div>
                </div>
            </Split>
        </div>
        <Modal v-model="goToManageStatus"
               title="管理最小单元"
               ok-text="是"
               cancel-text="否"
               @on-ok="confirmToManage">
            <p>最小学习单元保存成功，是否跳转到管理页面查看？</p>
        </Modal>
    </div>
</template>
<script>
    import QuestionList from '@/components/learnactivity/QuestionList.vue'
    import NewChooseContent from '@/components/selflearn/NewChooseContent.vue'
    import ContentFileList from '@/components/selflearn/ContentFileList.vue'
    export default {
        data() {
            return {
                isLoading: false,
                sasString: '',
                previewFile: {},
                previewStatus: false,
                goToManageStatus: false,
                checkName: true,
                learnUnit: {
                    name: '',
                    resource: [],
                    item: []
                },
                split1: 0.65
            }
        },
        components: {
            NewChooseContent,
            QuestionList,
            ContentFileList
        },
        methods: {
            /**
             * 删除已选的题目
             * */
            cancelQuestion(data) {
                this.learnUnit.item = data.questions 
            },
            downloadFile(item) {
                window.location.href = item.blobUrl + this.sasString
            },
            clickToPreview(file) {
                this.previewStatus = true
                this.previewFile = file
            },
            confirmToManage() {
                this.$router.push({
                    name: 'selfLearn'
                })
            },
            checkUnitName() {
                if (this.learnUnit.name == '') {
                    this.checkName = false
                } else {
                    this.checkName = true
                }
            },
            saveLearnUnitData() {
                if (this.learnUnit.name == '') {
                    this.checkName = false
                } else {
                    this.checkName = true
                    this.isLoading = true
                    let requestData = {
                        id: this.learnUnit.id,
                        name: this.learnUnit.name,
                        code: this.$store.state.userInfo.TEAMModelId,
                        creator: this.$store.state.userInfo.TEAMModelId,
                        item: this.learnUnit.item,
                        resource: this.learnUnit.resource
                    }
                    this.$api.learnActivity.SaveUnit(requestData).then(
                        (res) => {
                            if (!res.error) {
                                this.learnUnit.id = res.learnUnit.id
                                this.goToManageStatus = true
                            } else {
                                this.$Message.error('API ERROR!')
                            }
                        },
                        (err) => {
                            this.$Message.error('API ERROR!')
                        }
                    ).finally(() => {
                        this.isLoading = false
                    })

                }
            },
            questionSizeWarning() {
                this.$Message.warning('每个学习单元做多添加五个题目！')
            },
            getSelectedQuestion(data) {
                this.learnUnit.item = data
            },
            cancelFile(data) {
                this.learnUnit.resource = data.files
            },
            getSelectFile(data) {
                this.learnUnit.resource = data.files
            }
        },
        created() {
            let routerData = this.$route.params.unitInfo
            if (routerData !== undefined) {
                this.learnUnit = routerData
            }
        }
    }
</script>
<style scoped lang="less">
    @import "./CreateLearnUnit.less";
</style>
<style>
    .learn-unit-header .ivu-input {
        background: none;
        color: white;
        border-color: #424242;
        font-size: 16px;
    }

    .learn-unit-main .ivu-split-trigger-vertical {
        width: 3px;
        background: #525252;
    }

    .learn-unit-main .ivu-split-trigger {
        border-color: #424242;
        border: none;
    }

    .learn-unit-main .ivu-split-trigger-bar-con.vertical {
        left: 0px;
    }

    .learn-unit-main .ivu-split-trigger-vertical .ivu-split-trigger-bar {
        background: white;
        width: 3px;
    }

    .learn-unit-main .demo-split-pane {
        height: 100%;
    }

    .my-error-style .ivu-input {
        border-color: #ed4014;
    }
</style>