<template>
    <el-dialog title="课程选择" :visible.sync="dialogVisibleCourse" :append-to-body="true" width="95%"
        :before-close="handleClose" class="dialog_diy">
        <div style="height: 100%;overflow: auto;">
            <courseIndexVue :courseArray="courseArray" @updateCourseArray="updateCourseArray"></courseIndexVue>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close()">关 闭</el-button>
            <el-button @click="submit()" type="primary">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import courseIndexVue from './courseIndex.vue';
export default {
    components: {
        courseIndexVue,
    },
    props: {
        dialogVisibleCourse: {
            type: Boolean,
            default: false
        },
        courses:{
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            courseArray: []
        };
    },
    watch: {
        courses: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.courseArray = JSON.parse(JSON.stringify(this.courses));
                this.$forceUpdate()
            }
        }
    },
    mounted () {
        this.courseArray = JSON.parse(JSON.stringify(this.courses));
        this.$forceUpdate()
    },
    methods: {
        handleClose(done) {
            this.close();
            done();
        },
        updateCourseArray(newValue) {
            let index = this.courseArray.findIndex(i => i === newValue)
            if (index != -1) {
                this.courseArray.splice(index, 1)
            } else {
                // 给courseArray添加课程id
                this.courseArray.push(newValue)

            }
        },
        close() {
            this.$emit("update:dialogVisibleCourse", false);
        },
				submit(){
					this.$emit("setCourse", this.courseArray);
					this.close()
				}
    }
};
</script>

<style scoped>
.dialog_diy>>>.el-dialog {
    height: 100%;
    margin: 0 auto !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 124px);
    box-sizing: border-box;
    padding: 0px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fff;
}
</style>