<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 ? '#80B2C9':'#00de26'" 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> -->
                    <EmptyData :textContent="$t('cusMgt.addTime')" v-show="timetable.length == 0"></EmptyData>

                </vuescroll>
            </div>
        </div>
        <Modal v-model="addTimeStatus" :title="status == 0 ? $t('cusMgt.addTime') : $t('cusMgt.edtiTime')" @on-ok="confirmAddTime" @on-cancel="initTimeNode" :loading="modalLoading">
            <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" @on-change="setEndTime" :steps="[1, 5]" format="HH:mm" placeholder="00:00" style="width: 240px"></TimePicker>
                </FormItem>
                <FormItem :label="$t('cusMgt.endLabel')" v-show="timeNode.start">
                    <TimePicker :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" 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">
                        <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: {
        timeData: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            modalLoading: true,
            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: {
        setEndTime(time){
            this.timeNode.end = time
        },
        selectTimeNode(index) {
            this.curTmIndex = index
        },
        //初始化节点数据
        initTimeNode() {
            this.timeNode.label = ''
            this.timeNode.start = ''
            this.timeNode.end = ''
            this.timeNode.type = ''
            this.timeNode.weeklies = []
            setTimeout(() => {
                this.$refs['timeNode'].resetFields()
            }, 0)
        },
        //编辑时间节点
        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
        },
        //删除时间节点
        delTimeNode(index) {
            this.$Modal.confirm({
                title: this.$t('schoolBaseInfo.delTimeTitle'),
                content: this.$t('schoolBaseInfo.delTimeContent'),
                okText: this.$t('schoolBaseInfo.yes'),
                cancelText: this.$t('schoolBaseInfo.no'),
                onOk: () => {
                    this.timetable.splice(index, 1)
                    this.$emit('onTimeChange', this.timetable)
                }
            })
        },
        //显示添加时间节点
        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.$emit('onTimeChange', this.timetable)
                    this.addTimeStatus = false
                    this.initTimeNode()
                } else {
                    this.modalLoading = false
                    setTimeout(() => {
                        this.modalLoading = true
                    }, 0)
                    this.$Message.error(this.$t('cusMgt.formTips'));
                }
            })
        },
    },
    created() {
    },
    computed: {
        disabledHours() {
            let start = this.timeNode.start
            if (start) {
                let hour = start.substring(0, start.indexOf(':'))
                let arr = Array.from(new Array(parseInt(hour || '0')).keys())
                return arr
            } else {
                return []
            }
        },
        disabledMinutes() {
            let start = this.timeNode.start
            let end = this.timeNode.end
            if (!start || !end) {
                return []
            }
            let startHour = parseInt(start.substring(0, start.indexOf(':')) || '0')
            let endHour = parseInt(end.substring(0, end.indexOf(':')) || '0')
            if (startHour < endHour) {
                return []
            } else if (startHour == endHour) {
                let startMin = parseInt(start.substring(start.indexOf(':') + 1) || '0')
                let count = startMin / 5
                let arr = new Array(count).fill(null)
                arr.forEach((item, index) => {
                    arr[index] = index * 5
                })
                return arr
            } else {
                return []
            }
        }
    },
    watch: {
        timeData: {
            handler(n, o) {
                this.timetable = n || []
            },
            deep: true,
            immediate: true
        }
    }
}
</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>