<template>
    <div class="course-time-container">
        <div class="time-line-wrap">
            <div class="time-line-header">
                时段设置
                <Icon type="md-add" @click="showAddTime(curTmIndex)" color="white" size="18" style="float:right;margin-right:15px;margin-top:10px;cursor:pointer;" />
                <Icon type="md-trash" @click="delTimeNode(curTmIndex)" color="white" size="18" style="float:right;margin-right:15px;margin-top:10px;cursor:pointer;" />
                <Icon type="md-create" @click="editTimeNode(curTmIndex)" color="white" size="18" style="float:right;margin-right:15px;margin-top:10px;cursor:pointer;" />
            </div>
            <div class="time-line-content">
                <vuescroll>
                    <Timeline style="margin-top:5px;">
                        <TimelineItem :color="item.type == 1 ? 'aqua':'green'" v-for="(item,index) in schoolInfo.timetable" :key="index">
                            <Icon :type="item.type == 1 ? 'ios-book':'md-alarm'" slot="dot"></Icon>
                            <div :class="index == curTmIndex ? 'time-line-item time-line-item-active':'time-line-item'" @click="selectTimeNode(index)">
                                <div class="time-setting-item">
                                    <span class="time">{{item.time}}</span>
                                    <span class="content">{{ '('+item.label+')'}}</span>
                                </div>
                            </div>
                        </TimelineItem>
                    </Timeline>
                </vuescroll>
            </div>
        </div>
        <div class="time-table-wrap dark-iview-table">
            <vuescroll>
                <h1 class="sch-title">课程表预览</h1>
                <Table :columns="timeColumns" disabled-hover :data="tableData" border :span-method="handleSpan" style="width:90%;margin:auto;margin-top:10px;">
                    <!--上午/下午-->
                    <template slot-scope="{ row, index }" slot="sub">
                        <p style="padding:10px 0px 4px 0px;font-size: 20px;">
                            {{parseInt(row.time.substr(0,2)) > 12 ? '下午':'上午'}}
                        </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, index }" slot="MON">
                        <div :class="row.weeklies.MON.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                            <!--<Icon type="md-checkmark" class="cell-status" title="上课"/>-->
                            <Button class="toggle-status-btn" @click="confirmSetVact(row,'MON')" ghost type="default">{{row.weeklies.MON.status == 1 ? '设为休假':'设为上课'}}</Button>
                        </div>
                    </template>
                    <!--星期二-->
                    <template slot-scope="{ row, index }" slot="TUE">
                        <div :class="row.weeklies.TUE.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                            <Button class="toggle-status-btn" @click="confirmSetVact(row,'TUE')" ghost type="default">{{row.weeklies.TUE.status == 1 ? '设为休假':'设为上课'}}</Button>
                        </div>
                    </template>
                    <!--星期三-->
                    <template slot-scope="{ row, index }" slot="WED">
                        <div :class="row.weeklies.WED.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                            <Button class="toggle-status-btn" @click="confirmSetVact(row,'WED')" ghost type="default">{{row.weeklies.WED.status == 1 ? '设为休假':'设为上课'}}</Button>
                        </div>
                    </template>
                    <!--星期四-->
                    <template slot-scope="{ row, index }" slot="THU">
                        <div :class="row.weeklies.THU.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                            <Button class="toggle-status-btn" @click="confirmSetVact(row,'THU')" ghost type="default">{{row.weeklies.THU.status == 1 ? '设为休假':'设为上课'}}</Button>
                        </div>
                    </template>
                    <!--星期五-->
                    <template slot-scope="{ row, index }" slot="FRI">
                        <div :class="row.weeklies.FRI.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                            <Button class="toggle-status-btn" @click="confirmSetVact(row,'FRI')" ghost type="default">{{row.weeklies.FRI.status == 1 ? '设为休假':'设为上课'}}</Button>
                        </div>
                    </template>
                    <!--星期六-->
                    <template slot-scope="{ row, index }" slot="SAT">
                        <div :class="row.weeklies.SAT.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                            <Button class="toggle-status-btn" @click="confirmSetVact(row,'SAT')" ghost type="default">{{row.weeklies.SAT.status == 1 ? '设为休假':'设为上课'}}</Button>
                        </div>
                    </template>
                    <!--星期日-->
                    <template slot-scope="{ row, index }" slot="SUN">
                        <div :class="row.weeklies.SUN.status == 1 ? 'week-day-cell':'week-day-cell vact-status'">
                            <Button class="toggle-status-btn" @click="confirmSetVact(row,'SUN')" ghost type="default">{{row.weeklies.SUN.status == 1 ? '设为休假':'设为上课'}}</Button>
                        </div>
                    </template>
                </Table>
            </vuescroll>
        </div>
        <Modal v-model="addTimeStatus"
               :title="status == 0 ? '添加节点' : '编辑节点'"
               class-name="dark-iview-modal dark-iview-form"
               @on-ok="confirmAddTime"
               @on-cancel="cancelTimeNode">
            <Form ref="timeNode" :model="timeNode" :label-width="100" label-colon :rules="ruleValidate">
                <FormItem label="节点名称" prop="label">
                    <Input v-model="timeNode.label" placeholder="输入节点名称......" style="width: 240px"></Input>
                </FormItem>
                <FormItem label="开始时间" prop="start">
                    <TimePicker v-model="timeNode.start" format="HH:mm" placeholder="00:00" style="width: 240px"></TimePicker>
                </FormItem>
                <FormItem label="结束时间">
                    <TimePicker v-model="timeNode.end" format="HH:mm" placeholder="00:00" style="width: 240px"></TimePicker>
                </FormItem>
                <FormItem label="节点类型" prop="type">
                    <RadioGroup v-model="timeNode.type" style="color: white;">
                        <Radio label="1">
                            <span>上课时间</span>
                        </Radio>
                        <Radio label="0" style="margin-left:20px;">
                            <span>休息/其他时间</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="setVactStatus"
               :title="weekDay == 'SUN' ? '星期日':'星期六'"
               class-name="dark-iview-modal dark-iview-form"
               @on-ok="confirmSetVact">
            <Form ref="timeNode" :model="timeNode" :label-width="100" label-colon>
                <FormItem label="是否休假" prop="label">
                    <RadioGroup v-model="isVact" style="color: white;">
                        <Radio label="1">
                            <span>是</span>
                        </Radio>
                        <Radio label="0" style="margin-left:20px;">
                            <span>否</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                subIndex: undefined,
                weekDay: '',
                curTmIndex: 0,
                isVact: undefined,
                addTimeStatus: false,
                setVactStatus: false,
                schoolInfo: {},
                defVact: {
                    'MON': {
                        status:1
                    },
                    'TUE': {
                        status:1
                    },
                    'WED': {
                        status:1
                    },
                    'THU': {
                        status:1
                    },
                    'FRI': {
                        status:1
                    },
                    'SAT': {
                        status:0
                    },
                    'SUN':{
                        status:0
                    }
                },
                timeColumns: [
                    {
                        title: ' ',
                        slot: 'sub',
                        width: 100,
                        align: 'center',
                        className:'custom-bg'
                    },
                    {
                        title: ' ',
                        slot: 'time',
                        width: 200,
                        align:'center'
                    },
                    {
                        title: '星期一',
                        slot: 'MON',
                        align:'center'
                    },
                    {
                        title: '星期二',
                        slot: 'TUE',
                        align:'center'
                    },
                    {
                        title: '星期三',
                        slot: 'WED',
                        align:'center'
                    },
                    {
                        title: '星期四',
                        slot: 'THU',
                        align:'center'
                    },
                    {
                        title: '星期五',
                        slot: 'FRI',
                        align:'center'
                    },
                    {
                        title:'星期六',
                        slot: 'SAT',
                        align:'center'
                    },
                    {
                        title:'星期日',
                        slot: 'SUN',
                        align:'center'
                    }
                ],
                timeNode: {
                    label: '',
                    start: '',
                    end: '',
                    type: '',
                    weeklies: {}
                },
                ruleValidate: {
                    label: [
                        { required: true, message: '请输入节点名称', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: '请设置节点类型', trigger: 'change' }
                    ],
                    start: [
                        { required: true, message: '请设置时间', trigger: 'change' }
                    ]
                },
                status:0, //0:新增节点 1：编辑节点
                timeNodeIndex: 0,
            }
        },
        methods: {
            //显示设置休假
            showSetVact(row,index,weekDay) {

            },
            //根据上下午合并单元格
            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.schoolInfo.timetable.length - this.subIndex, 1]
                } else if (rowIndex > this.subIndex && columnIndex === 0){
                    return [0,0]
                }
            },

            getSubIndex() {
                for (let index in this.schoolInfo.timetable) {
                    if (parseInt(this.tableData[index].time.substr(0, 2)) > 12) {
                        this.subIndex = parseInt(index)
                        break
                    }
                }
            },
            //设置休假/上课
            confirmSetVact(row, key) {
                console.log(row)
                for (let index in this.schoolInfo.timetable) {
                    if (this.schoolInfo.timetable[index].time == row.time) {
                        this.schoolInfo.timetable[index].weeklies[key].status = 1 - parseInt(this.schoolInfo.timetable[index].weeklies[key].status)
                        this.$api.schoolSetting.schoolSettingSaveOrUpdate(this.schoolInfo).then(
                            (res) => {
                                if (res.error == null) {
                                    this.$Message.success(this.$t('schoolBaseInfo.ssTips3'))
                                }
                            },
                            (err) => {
                                this.$Message.error("设置失败！")
                            }
                        )
                        break
                    }
                }
            },
            selectTimeNode(index) {
                this.curTmIndex = index
            },
            //根据作息时间处理课程表数据
            toTimeTable() {
                this.data
            },
            //初始化节点数据
            cancelTimeNode() {
                this.timeNode.label = ''
                this.timeNode.start = ''
                this.timeNode.end = ''
                this.timeNode.type = ''
                this.timeNode.weeklies = []
            },
            //编辑时间节点
            editTimeNode(index) {
                this.status = 1
                this.timeNodeIndex = index
                let times = this.schoolInfo.timetable[index].time.split(' - ')
                this.timeNode.label = this.schoolInfo.timetable[index].label
                this.timeNode.type = this.schoolInfo.timetable[index].type
                this.timeNode.start = times[0]
                if (times.length > 1) {
                    this.timeNode.end = times[1]
                }
                this.addTimeStatus = true
            },
            //删除时间节点
            delTimeNode(index) {
                this.schoolInfo.timetable.splice(index, 1)
                this.$api.schoolSetting.schoolSettingSaveOrUpdate(this.schoolInfo).then(
                    (res) => {
                        if (res.error == null) {
                            this.$Message.success(this.$t('schoolBaseInfo.ssTips3'))
                        }
                    },
                    (err) => {
                        this.$Message.error("设置失败！")
                    }
                )
            },
            //显示添加时间节点
            showAddTime(index) {
                this.addTimeStatus = true
                this.timeNodeIndex = index
                this.status = 0
            },
            //确认添加时间节点
            confirmAddTime() {
                this.$refs['timeNode'].validate((valid) => {
                    if (valid) {
                        if (this.status == 0) {
                            let time = this.timeNode.start
                            if (this.timeNode.end) {
                                time = time + ' - ' + this.timeNode.end
                            }
                            this.schoolInfo.timetable.splice(this.timeNodeIndex + 1, 0, {
                                label: this.timeNode.label,
                                time: time,
                                type: this.timeNode.type,
                                weeklies: {...this.defVact}
                            })
                        } else {
                            let time = this.timeNode.start
                            if (this.timeNode.end) {
                                time = time + ' - ' + this.timeNode.end
                            }
                            this.schoolInfo.timetable[this.timeNodeIndex].label = this.timeNode.label
                            this.schoolInfo.timetable[this.timeNodeIndex].time = time
                            this.schoolInfo.timetable[this.timeNodeIndex].type = this.timeNode.type
                            if (!this.schoolInfo.timetable[this.timeNodeIndex].weeklies) {
                                this.schoolInfo.timetable[this.timeNodeIndex].weeklies = {...this.defVact}
                            }
                        }
                        this.schoolInfo.timetable.sort((a, b) => {
                            let aTime = a.time.substr(0,2)
                            let bTime = b.time.substr(0, 2)
                            return parseInt(aTime) - parseInt(bTime)
                        })
                        this.$api.schoolSetting.schoolSettingSaveOrUpdate(this.schoolInfo).then(
                            (res) => {
                                if (res.error == null) {
                                    this.$Message.success(this.$t('schoolBaseInfo.ssTips3'))
                                }
                            },
                            (err) => {
                                this.$Message.error("设置失败！")
                            }
                        )
                        this.cancelTimeNode()
                    } else {
                        this.$Message.error('请完善数据，再添加!');
                    }
                })
            },
        },
        created() {
            this.schoolInfo = this.$store.state.user.schoolProfile.school_base
        },
        computed: {
            tableData() {
                if (this.schoolInfo.timetable) {
                    let arr = this.schoolInfo.timetable.filter((item, index) => {
                        return item.type == 1
                    })
                    return arr
                } else {
                    return []
                }
                
            }
        }
    }
</script>
<style scoped lang="less">
    @import "./CourseTime.less";
</style>
<style>
    .time-table-wrap .ivu-table {
        width:100%;
    }
    .time-line-content .ivu-timeline-item {
        padding:0px;
    }
    .time-line-content .ivu-timeline-item-head {
        background:#191919;
    }
    .ivu-table .custom-bg{
        background:#404040 !important;
    }
</style>