<template>
    <div class="course-detail-content">
        <Loading v-show="isLoading" bgColor="rgba(103, 103, 103, 0.27)"></Loading>
        <div class="course-base-info" v-if="JSON.stringify(coursePlan) !== '{}'">
            <!--基础信息-->
            <div class="course-base-info-content dark-iview-form disabled-iview-select">
                <Form ref="courseBaseInfo" :model="coursePlan" label-position="top">
                    <FormItem label="课程名称" prop="courseName" class="disabled-iview-select">
                        <Input v-model="coursePlan.course.courseName" :disabled="baseEditStatus" style="width:100%" placeholder="课程名称" :clearable="true"></Input>
                    </FormItem>
                    <FormItem label="课程编码" prop="periodCode" class="disabled-iview-select">
                        <Input v-model="coursePlan.course.courseCode" :disabled="baseEditStatus" style="width:100%" placeholder="课程编码" :clearable="true"></Input>
                    </FormItem>
                    <FormItem v-show="listType == 'school'" :label="$t('courseManage.base.coursePeriod')" prop="periodCode" class="disabled-iview-select">
                        <Select v-model="coursePlan.course.periodCode" :disabled="baseEditStatus" filterable style="width:100%" placeholder="请选择学制" :clearable="true">
                            <Option v-for="(item,index) in schoolBase.period" :value="item.periodCode" :key="index">{{ item.periodName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem v-show="listType == 'school'" :label="$t('courseManage.base.courseSubject')" prop="subjectCode" :class="baseEditStatus ? 'disabled-style':''">
                        <Select v-model="coursePlan.course.subjectCode" :disabled="baseEditStatus" filterable style="width:100%" placeholder="请选择科目" :clearable="true">
                            <Option v-for="(item,index) in $jsFn.getPeriod(schoolBase,coursePlan.course.periodCode).subjects" :value="item.subjectCode" :key="index">{{ item.subjectName }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem :label="$t('courseManage.base.courseNotice')">
                        <div ref="courseNotice" v-show="edNoticeStatus"></div>
                        <Button size="small" v-show="edNoticeStatus" style="float:right;" @click="saveNotice">保存公告</Button>
                        <div v-show="!edNoticeStatus" style="height:fit-content;color:white;font-size:16px;padding-left:10px;width:100%;">
                            <vuescroll>
                                <div v-html="coursePlan.notice" style=""></div>
                                <Button size="small" style="float:right;" @click="edNotice">编辑公告</Button>
                            </vuescroll>
                        </div>
                    </FormItem>
                </Form>
            </div>
        </div>
        <EmptyData v-else style="margin: auto;margin-top: 200px;"></EmptyData>
    </div>
</template>
<script>
    import Loading from '@/common/Loading.vue'
    
    import E from '@/utils/wangEditor.js'
    export default {
        components: {
            Loading
        },
        props: {
            listType: {
                type: String,
                default:'school'
            },
            coursePlan: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                schoolBase: undefined,
                isLoading: false,
                edNoticeStatus: false,
                noticeEditor: undefined,
                baseEditStatus: true,
                ruleValidate: {
                    courseName: [
                        { required: true, message: '课程名称不能为空', trigger: 'change' }
                    ],
                    periodCode: [
                        { required: true, message: '学段信息不能为空', trigger: 'change' }
                    ],
                    gradeCode: [
                        { required: true, message: '年级信息不能为空', trigger: 'change' }
                    ],
                    subjectCode: [
                        { required: true, message: '科目信息不能为空', trigger: 'change' }
                    ],
                    notice: [
                        { required: true, message: '课程公告不能为空', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            edNotice() {
                this.edNoticeStatus = true
            },
            saveNotice() {
                this.isLoading = true
                this.$api.courseMgmt.upsertPlan(this.coursePlan).then(
                    (res) => {
                        this.edNoticeStatus = false
                        this.$Message.success('保存成功！')
                        this.isLoading = false
                    },
                    (err) => {
                        this.edNoticeStatus = false
                        this.isLoading = false
                    }
                )
                
            },
            //初始化富文本编辑器
            initEditor() {
                let noticeEditor = new E(this.$refs.courseNotice)
                noticeEditor.customConfig.onchange = (html) => {
                    this.coursePlan.notice = html
                }
                noticeEditor.customConfig.menus = [
                    'bold', // 粗体
                    'italic', // 斜体
                    'underline', // 下划线
                    'list', // 列表
                    'link', // 插入链接
                    'image' // 插入图片
                ],
                noticeEditor.customConfig.showLinkImg = false
                noticeEditor.customConfig.uploadFileName = 'files'
                noticeEditor.create()
                noticeEditor.txt.html(this.coursePlan.notice)
                this.noticeEditor = noticeEditor
            },
            //获取教师列表
            getSchoolTeacher() {
                let filterData = {
                    '$.name': this.keyWord
                }

                if (!this.scope) {
                    filterData.schoolCode = this.$store.state.userInfo.schoolCode
                } else if (this.scope && this.keyWord == '') {
                    this.$Message.warning('请输入id或者姓名搜索校外教师')
                    return
                }
                this.$api.courseMgmt.getSchoolTeacher(filterData).then(
                    (res) => {
                        this.teacherList = res.result.data
                    },
                    (err) => {
                        console.log(err)
                    }
                )
            },
            getSchoolBaseInfo() {
                //直接读取登录成功拿到得学校基础信息
                this.schoolBase = JSON.parse(JSON.stringify(this.$store.state.user.schoolProfile.school_base))
                /*this.$store.dispatch('schoolBaseInfo/getSchoolBaseData').then(
                    (res) => {
                        if (res.code == 2) {
                            alert('数据为空！')
                        }
                    },
                    (err) => {
                        this.$Message.error('API error!')
                    }
                )*/
            }
        },
        mounted() {
            
        },
        created() {
            this.getSchoolBaseInfo()
            this.getSchoolTeacher()
        },
        watch: {
            coursePlan: {
                handler(n, o) {
                    this.$nextTick(() => {
                        if (!this.noticeEditor) {
                            this.initEditor()
                        } else {
                            this.noticeEditor.txt.html(this.coursePlan.notice)
                        }
                    })
                },
                deep: true
            } 
        }
    }
</script>
<style lang="less" scoped>
    @import './CourseBaseSetting.less';
</style>
<style lang="less">
    .course-base-info-content .w-e-menu {
        z-index: 9 !important;
    }
    .course-base-info-content .w-e-toolbar .w-e-menu:hover i {
        color: white !important;
    }
    .course-base-info-content .w-e-toolbar {
        background: #383838 !important;
        border-radius: 5px 5px 0px 0px;
        border-color: #383838 !important;
    }

    .course-base-info-content .w-e-text-container {
        border-color: #383838 !important;
        border-radius: 0px 0px 5px 5px;
        overflow-y: auto !important;
        height: fit-content !important;
        min-height:150px;
    }

    .course-base-info-content .w-e-text {
        overflow-y: auto;
        color: white;
        &::-webkit-scrollbar

    { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgb(124,124,124);
    }

    &::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(68,68,68,.5);
    }

    }

    .course-base-info-content .w-e-toolbar .w-e-menu:hover i {
        color: white !important;
    }
</style>
