<template>
    <div class="course-time-container">
        <div class="time-line-wrap">
            <div class="time-line-content">
                <vuescroll>
                    <Timeline style="margin-top:5px;">
                        <TimelineItem :color="item.type == 1 ? 'aqua':'green'" v-for="(item,index) in 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 class="action-box" v-if="$access.ability('admin','schoolSetting-upd').validateAll">
                                    <Icon type="md-add" @click="showAddTime(index)" color="white" size="18" style="cursor:pointer;" />
                                    <Icon type="md-trash" @click="delTimeNode(index)" color="white" size="18" style="cursor:pointer;" />
                                    <Icon type="md-create" @click="editTimeNode(index)" color="white" size="18" style="cursor:pointer;" />
                                </div>
                            </div>
                        </TimelineItem>
                    </Timeline>
                    <div v-show="timetable.length == 0" @click="showAddTime(curTmIndex)" class="no-time-tips">
                        <Icon type="md-add" size="16" style="margin-right:8px" />
                        {{$t('cusMgt.addTime')}}
                    </div>
                    <div class="save-time-btn" v-show="isUpd" @click="saveTimeTable">
                        {{$t('cusMgt.saveSet')}}
                    </div>
                </vuescroll>
            </div>
        </div>
        <Modal v-model="addTimeStatus" :title="status == 0 ? $t('cusMgt.addTime') : $t('cusMgt.edtiTime')" class-name="dark-iview-modal dark-iview-form" @on-ok="confirmAddTime" @on-cancel="initTimeNode">
            <Form ref="timeNode" :model="timeNode" :label-width="80" label-colon :rules="ruleValidate">
                <FormItem :label="$t('cusMgt.listName')" prop="label">
                    <Input v-model="timeNode.label" :placeholder="$t('cusMgt.timeHolder')" style="width: 240px"></Input>
                </FormItem>
                <FormItem :label="$t('cusMgt.startLabel')" prop="start">
                    <TimePicker v-model="timeNode.start" :steps="[1, 5]" format="HH:mm" placeholder="00:00" style="width: 240px"></TimePicker>
                </FormItem>
                <FormItem :label="$t('cusMgt.endLabel')">
                    <TimePicker v-model="timeNode.end" :steps="[1, 5]" format="HH:mm" placeholder="00:00" style="width: 240px"></TimePicker>
                </FormItem>
                <FormItem :label="$t('cusMgt.typeLabel')" prop="type">
                    <RadioGroup v-model="timeNode.type" style="color: white;">
                        <Radio label="1">
                            <span>{{$t('cusMgt.lessonTime')}}</span>
                        </Radio>
                        <Radio label="0" style="margin-left:20px;">
                            <span>{{$t('cusMgt.restTime')}}</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    props: {
        periodId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isUpd: false,
            curTmIndex: 0,
            addTimeStatus: false,
            schoolBase: {
                period:[]
            },
            timetable: [],
            timeNode: {
                label: '',
                start: '',
                end: '',
                type: '',
                weeklies: {}
            },
            ruleValidate: {
                label: [
                    { required: true, message: this.$t('cusMgt.nameTips'), trigger: 'change' }
                ],
                type: [
                    { required: true, message: this.$t('cusMgt.typeTips'), trigger: 'change' }
                ],
                start: [
                    { required: true, message: this.$t('cusMgt.startTips'), trigger: 'change' }
                ]
            },
            status: 0, //0:新增节点 1：编辑节点
            timeNodeIndex: 0,
        }
    },
    methods: {
        selectTimeNode(index) {
            this.curTmIndex = index
        },
        //初始化节点数据
        initTimeNode() {
            this.timeNode.label = ''
            this.timeNode.start = ''
            this.timeNode.end = ''
            this.timeNode.type = ''
            this.timeNode.weeklies = []
        },
        //编辑时间节点
        editTimeNode(index) {
            console.log(index)
            this.status = 1
            this.timeNodeIndex = index
            let times = this.timetable[index].time.split(' - ')
            this.timeNode.label = this.timetable[index].label
            this.timeNode.type = this.timetable[index].type
            this.timeNode.start = times[0]
            if (times.length > 1) {
                this.timeNode.end = times[1]
            }
            this.addTimeStatus = true
        },
        //保存时段设置
        saveTimeTable() {
            this.schoolBase.period.forEach(item => {
                if (item.id == this.periodId) {
                    item.timetable = this.timetable
                }
            })
            this.$api.schoolSetting.schoolSettingSaveOrUpdate(this.schoolBase).then(
                res => {
                    this.$Message.success(this.$t('cusMgt.saveOk'))
                    this.isUpd = false
                    let schoolStr = localStorage.getItem('school_profile')
                    if (schoolStr) {
                        schoolStr = decodeURIComponent(schoolStr, "utf-8")
                        let schoolJson = JSON.parse(schoolStr)
                        schoolJson.school_base = this.schoolSetting
                        this.$store.dispatch('user/setSchoolProfile', schoolJson)
                    } else {
                        this.$store.dispatch('user/getSchoolProfile')
                    }
                },
                err => {
                    this.$Message.error(this.$t('cusMgt.saveErr'))
                }
            )
        },
        //删除时间节点
        delTimeNode(index) {
            this.timetable.splice(index, 1)
            this.isUpd = true

        },
        //显示添加时间节点
        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.timetable.splice(this.timeNodeIndex + 1, 0, {
                            id: this.$tools.guid(),
                            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.timetable[this.timeNodeIndex].label = this.timeNode.label
                        this.timetable[this.timeNodeIndex].time = time
                        this.timetable[this.timeNodeIndex].type = this.timeNode.type
                        if (!this.timetable[this.timeNodeIndex].weeklies) {
                            this.timetable[this.timeNodeIndex].weeklies = { ...this.defVact }
                        }
                    }
                    this.timetable.sort((a, b) => {
                        let aStart = a.time.substr(0, 5)
                        let bStart = b.time.substr(0, 5)
                        let aTime = aStart.replace(':', '')
                        let bTime = bStart.replace(':', '')
                        return parseInt(aTime) - parseInt(bTime)
                    })
                    this.isUpd = true
                    console.log(this.timetable)
                    this.initTimeNode()
                } else {
                    this.$Message.error(this.$t('cusMgt.formTips'));
                }
            })
        },
    },
    created() {
        //直接读取登录成功拿到得学校基础信息
        this.$store.dispatch('user/getSchoolProfile').then(
            res => {
                this.schoolBase = res.school_base
                let curPrd = this.schoolBase.period.find(item => {
                    return item.id == this.periodId
                })
                if (curPrd) {
                    this.timetable = curPrd.timetable
                } else {
                    this.timetable = []
                }
            },
            err => {
                this.$Message.warning(this.$t('cusMgt.noSchool'))
            }
        )
    },
    computed: {
    },
    watch: {
        periodId: {
            handler(n, o) {
                let curPrd = this.schoolBase.period.find(item => {
                    return item.id == this.periodId
                })
                if (curPrd && curPrd.timetable) {
                    this.timetable = curPrd.timetable
                } else {
                    this.timetable = []
                }
            }
        }
    }
}
</script>
<style scoped lang="less">
@import "./TimeSetting.less";
</style>
<style>
.time-line-content .ivu-timeline-item {
    padding: 0px;
}
.time-line-content .ivu-timeline-item-head {
    background: transparent;
}
.time-line-content .ivu-timeline-item-tail {
    border-color: #909090;
}
</style>