<template>
    <div class="cus-table-container dark-iview-table cus-table">
        <vuescroll>
            <div class="cus-table-top dark-iview-input dark-iview-select">
                <div class="class-filter-wrap">
                </div>
            </div>
            <Table :columns="timeColumns" disabled-hover :data="timetable" border :span-method="handleSpan" style="width:calc(100% - 15px);margin-top:00px;" :loading="tableLoading">
                <Loading slot="loading" :top="0" bgColor="rgba(103, 103, 103, 0.27)"></Loading>
                <!--上午/下午-->
                <template slot-scope="{ row, index }" slot="sub">
                    <p class="am-pm" style="">
                        {{parseInt(row.time.substr(0,2)) > 12 ? $t('cusMgt.pm') : $t('cusMgt.am')}}
                    </p>
                </template>
                <!--时段-->
                <template slot-scope="{ row, index }" slot="time">
                    <p style="padding:10px 0px 4px 0px;font-size: 20px;">
                        {{row.time}}
                    </p>
                    <p style="font-size:12px;padding:4px 0px 10px 0px;">
                        {{'('+row.label+')'}}
                    </p>
                </template>
                <!--星期一-->
                <template slot-scope="{ row, column }" slot="MON">
                    <div :class="row.weeklies.MON.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                        <div class="toggle-status-btn-wrap" v-show="mode == 'set'" v-if="!row.weeklies[column.slot].courseId || row.weeklies[column.slot].courseId == courseId || !courseId">
                            <Icon class="cell-action-icon" v-show="!row.weeklies[column.slot].courseName" custom="iconfont icon-choose" :title="$t('cusMgt.setCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-create" :title="$t('cusMgt.modifyCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-close" :title="$t('cusMgt.cancelCus')" @click="cancelCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="setClass" type="md-copy" :title="$t('cusMgt.repeat')" @click="copyCell(row, column.slot)" />
                        </div>
                        <p :class="['course-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'course-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.MON.classroomCode">{{row.weeklies.MON.courseName}}</p>
                        <p :class="['classroom-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'classroom-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.MON.classroomCode">{{row.weeklies.MON.classroomName}}</p>
                    </div>
                </template>
                <!--星期二-->
                <template slot-scope="{ row, column }" slot="TUE">
                    <div :class="row.weeklies.TUE.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                        <div class="toggle-status-btn-wrap" v-show="mode == 'set'" v-if="!row.weeklies[column.slot].courseId || row.weeklies[column.slot].courseId == courseId || !courseId">
                            <Icon class="cell-action-icon" v-show="!row.weeklies[column.slot].courseName" custom="iconfont icon-choose" :title="$t('cusMgt.setCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-create" :title="$t('cusMgt.modifyCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-close" :title="$t('cusMgt.cancelCus')" @click="cancelCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="setClass" type="md-copy" :title="$t('cusMgt.repeat')" @click="copyCell(row, column.slot)" />
                        </div>
                        <p :class="['course-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'course-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.TUE.classroomCode">{{row.weeklies.TUE.courseName}}</p>
                        <p :class="['classroom-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'classroom-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.TUE.classroomCode">{{row.weeklies.TUE.classroomName}}</p>
                    </div>
                </template>
                <!--星期三-->
                <template slot-scope="{ row, column }" slot="WED">
                    <div :class="row.weeklies.WED.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                        <div class="toggle-status-btn-wrap" v-show="mode == 'set'" v-if="!row.weeklies[column.slot].courseId || row.weeklies[column.slot].courseId == courseId || !courseId">
                            <Icon class="cell-action-icon" v-show="!row.weeklies[column.slot].courseName" custom="iconfont icon-choose" :title="$t('cusMgt.setCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-create" :title="$t('cusMgt.modifyCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-close" :title="$t('cusMgt.cancelCus')" @click="cancelCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="setClass" type="md-copy" :title="$t('cusMgt.repeat')" @click="copyCell(row, column.slot)" />
                        </div>
                        <p :class="['course-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'course-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.WED.classroomCode">{{row.weeklies.WED.courseName}}</p>
                        <p :class="['classroom-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'classroom-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.WED.classroomCode">{{row.weeklies.WED.classroomName}}</p>
                    </div>
                </template>
                <!--星期四-->
                <template slot-scope="{ row, column }" slot="THU">
                    <div :class="row.weeklies.THU.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                        <div class="toggle-status-btn-wrap" v-show="mode == 'set'" v-if="!row.weeklies[column.slot].courseId || row.weeklies[column.slot].courseId == courseId || !courseId">
                            <Icon class="cell-action-icon" v-show="!row.weeklies[column.slot].courseName" custom="iconfont icon-choose" :title="$t('cusMgt.setCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-create" :title="$t('cusMgt.modifyCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-close" :title="$t('cusMgt.cancelCus')" @click="cancelCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="setClass" type="md-copy" :title="$t('cusMgt.repeat')" @click="copyCell(row, column.slot)" />
                        </div>
                        <p :class="['course-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'course-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.THU.classroomCode">{{row.weeklies.THU.courseName}}</p>
                        <p :class="['classroom-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'classroom-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.THU.classroomCode">{{row.weeklies.THU.classroomName}}</p>
                    </div>
                </template>
                <!--星期五-->
                <template slot-scope="{ row, column }" slot="FRI">
                    <div :class="row.weeklies.FRI.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                        <div class="toggle-status-btn-wrap" v-show="mode == 'set'" v-if="!row.weeklies[column.slot].courseId || row.weeklies[column.slot].courseId == courseId || !courseId">
                            <Icon class="cell-action-icon" v-show="!row.weeklies[column.slot].courseName" custom="iconfont icon-choose" :title="$t('cusMgt.setCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-create" :title="$t('cusMgt.modifyCus')" @click="selectCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="row.weeklies[column.slot].courseName" type="md-close" :title="$t('cusMgt.cancelCus')" @click="cancelCell(row, column.slot)" />
                            <Icon class="cell-action-icon" v-show="setClass" type="md-copy" :title="$t('cusMgt.repeat')" @click="copyCell(row, column.slot)" />
                        </div>
                        <p :class="['course-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'course-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.FRI.classroomCode">{{row.weeklies.FRI.courseName}}</p>
                        <p :class="['classroom-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'classroom-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.FRI.classroomCode">{{row.weeklies.FRI.classroomName}}</p>
                    </div>
                </template>
                <!--星期六-->
                <template slot-scope="{ row, column }" slot="SAT">
                    <div :class="row.weeklies.SAT.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                        <p :class="['course-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'course-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.SAT.classroomCode">{{row.weeklies.SAT.courseName}}</p>
                        <p :class="['classroom-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'classroom-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.SAT.classroomCode">{{row.weeklies.SAT.classroomName}}</p>
                    </div>
                </template>
                <!--星期日-->
                <template slot-scope="{ row, column }" slot="SUN">
                    <div :class="row.weeklies.SUN.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                        <p :class="['course-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'course-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.SUN.classroomCode">{{row.weeklies.SUN.courseName}}</p>
                        <p :class="['classroom-name',(row.weeklies[column.slot].courseId == courseId && courseId) ? 'classroom-color':'']" v-show="curClass == 'all' || curClass == row.weeklies.SUN.classroomCode">{{row.weeklies.SUN.classroomName}}</p>
                    </div>
                </template>
            </Table>
        </vuescroll>
        <Modal v-model="modalStatus" :title="$t('cusMgt.cusClass')" @on-ok="modalOk" @on-cancel="modalCancel" class-name="dark-iview-modal dark-iview-select">
            <Select v-show="teaRoomList.length" v-model="setClass" style="display:inline-block;">
                <Option v-for="(item,index) in teaRoomList" :key="index" :value="item.room">{{item.roomInfo.name}}</Option>
            </Select>
            <p class="no-class-tips" v-show="!teaRoomList.length">{{$t('cusMgt.noCourseClass')}}</p>
        </Modal>
    </div>
</template>
<script>
export default {
    props: {
        periodId: {
            type: String,
            default: ''
        },
        //课程对象数据
        schedData: {
            type: Array,
            default: () => {
                return []
            }
        },
        courseId:{
            type:String,
            default:''
        },
        teacher: {
            type: String,
            default: ''
        },
        teaRoomList: {
            type: Array,
            default: () => {
                return []
            }
        },
        mode:{
            type:String,
            default:'set' //set：设置模式 view：视图模式，只渲染功能
        },
        tableLoading:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            setClass: '',
            modalStatus: false,
            teachClassList: [],
            curClass: 'all',
            subIndex: 0,
            schoolBase: {
                period: []
            },
            classList: [],
            roomList:[],
            timeColumns: [
                {
                    title: ' ',
                    slot: 'sub',
                    width: 80,
                    align: 'center',
                    className: 'custom-bg'
                },
                {
                    title: ' ',
                    slot: 'time',
                    width: 160,
                    align: 'center'
                },
                {
                    title: this.$t('cusMgt.mon'),
                    slot: 'MON',
                    align: 'center'
                },
                {
                    title: this.$t('cusMgt.tue'),
                    slot: 'TUE',
                    align: 'center'
                },
                {
                    title: this.$t('cusMgt.wed'),
                    slot: 'WED',
                    align: 'center'
                },
                {
                    title: this.$t('cusMgt.thu'),
                    slot: 'THU',
                    align: 'center'
                },
                {
                    title: this.$t('cusMgt.fri'),
                    slot: 'FRI',
                    align: 'center'
                },
                {
                    title: this.$t('cusMgt.sat'),
                    slot: 'SAT',
                    align: 'center'
                },
                {
                    title: this.$t('cusMgt.sun'),
                    slot: 'SUN',
                    align: 'center'
                }
            ],
            selectInfo: {}
        }
    },
    methods: {
        copyCell(row, col) {
            this.$emit('selectCell', { row, col, 'setClass': this.setClass })
        },
        selectCell(row, col) {
            this.modalStatus = true
            this.selectInfo = { row, col }
        },
        modalOk() {
            if (this.curClass) {
                let data = this._.cloneDeep(this.selectInfo)
                data.setClass = this.setClass //当前设置的教室
                this.$emit('selectCell', data)
            } else {
                this.$$Message.warning(this.$t('cusMgt.setClassTips'))
            }
        },
        cancelCell(row, col) {
            this.$emit('cancelCell', { row, col, setClass: row.weeklies[col].room })
        },
        modalCancel() {

        },
        //根据上下午合并单元格
        handleSpan({ row, column, rowIndex, columnIndex }) {
            this.getSubIndex()
            if (rowIndex === 0 && columnIndex === 0) {
                return [this.subIndex, 1]
            } else if (rowIndex < this.subIndex && columnIndex === 0) {
                return [0, 0]
            }
            if (rowIndex == this.subIndex && columnIndex === 0) {
                return [this.timetable.length - this.subIndex, 1]
            } else if (rowIndex > this.subIndex && columnIndex === 0) {
                return [0, 0]
            }
        },
        getSubIndex() {
            for (let index in this.timetable) {
                if (parseInt(this.timetable[index].time.substr(0, 2)) > 12) {
                    this.subIndex = parseInt(index)
                    break
                }
            }
        }
    },
    created() {
        //直接读取登录成功拿到得学校基础信息
        this.$store.dispatch('user/getSchoolProfile').then(
            res => {
                this.schoolBase = res.school_base
                this.classList = res.school_classes
                this.roomList = res.school_rooms
            },
            err => {
                this.$Message.warning(this.$t('cusMgt.noSchool'))
            }
        )
    },
    watch: {
        teacher(){
            this.setClass = ''
        }
    },
    computed: {
        timetable() {
            if(!(this.schoolBase && this.schoolBase.period)) return []
            let curPrd = this.schoolBase.period.find(item => {
                return item.id == this.periodId
            })
            curPrd = curPrd || this.schoolBase.period[0] //没有传pdId就默认第一个
            if (curPrd && curPrd.timetable) {
                let timetable = this._.cloneDeep(curPrd.timetable)
                timetable.forEach(item => {
                    item.weeklies = {
                        MON: {
                            status: 1
                        },
                        TUE: {
                            status: 1
                        },
                        WED: {
                            status: 1
                        },
                        THU: {
                            status: 1
                        },
                        FRI: {
                            status: 1
                        },
                        SAT: {},
                        SUN: {},
                    }
                    // 根据课程数据补充课程表
                    this.schedData.forEach(cusItem => {
                        if (cusItem && cusItem.schedule) {
                            cusItem.schedule.forEach((schedItem, sIndex) => {
                                let roomInfo = this.roomList.find(roomItem => {
                                    return roomItem.id == schedItem.room
                                })
                                if (this.teacher) {
                                    if (this.teacher != schedItem.teacherId) {
                                        return false
                                    }
                                }
                                schedItem.time.forEach(timeItem => {
                                    if (timeItem.id == item.id) {
                                        item.weeklies[timeItem.week].courseName = cusItem.name
                                        item.weeklies[timeItem.week].courseId = cusItem.id
                                        item.weeklies[timeItem.week].roomId = schedItem.room
                                        item.weeklies[timeItem.week].classroomName = roomInfo ? roomInfo.name : '- -'
                                    }
                                })
                            })

                        }
                    })
                })
                return timetable
            } else {
                return []
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import "./TeaTable.less";
</style>
<style lang="less">
.cus-table-container .ivu-table {
    width: 100%;
}
.ivu-table .custom-bg {
    background: #404040 !important;
}
</style>
