<template>
    <div class="periodadjust">
        <div :class="[dataShow ? 'container' : '']">
            <!-- <m-header /> -->
            <m-calendar @onSelectDay="onSelectDay" />
            <van-radio-group v-if="dataShow" key="data" v-model="radioSelect">
                <van-cell-group v-for="(item, index) in dataList" :key="index">
                    <van-cell icon="underway-o" :center="true" @click="onCheckRadio(item)">
                        <!-- <template slot="default"><span>到课:{{item.studentNum}}/{{item.totalStudentNum}}</span><span>请假:{{item.leaveStudentNum}}</span></template> -->
                        <template slot="default">{{ item.signInStatus ? '已签到' : '未签到' }}</template>
                        <template slot="title">{{item.startClassTime | formatDate}}-{{item.endClassTime | formatDate}}</template>
                    </van-cell>
                    <van-cell class="input-cell" title-class="title-content" :center="true" @click="onCheckRadio(item)">
                        <template slot="default">
                            <van-radio ref="radioes" :disabled="radioDisabled" :name="item.id"></van-radio>
                        </template>
                        <template slot="title">{{ item.name }}</template>
                        <template slot="label">{{ item.teachMode |  teachModeStatus}} &nbsp; 主讲老师：{{ item.teacherName }}</template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
            <m-empty v-else key="data" />
        </div>
        
        <van-sticky v-if="dataShow">
            <div class="button-group">
                <van-button type="default" @click="onDateChange" size="large">课时调整</van-button>
                <van-button type="primary" @click="onSubmit" size="large">去换课</van-button>
            </div>
        </van-sticky>
        <van-popup v-model="dataForm.status" position="bottom">
            <van-datetime-picker v-model="dataForm.currentDate" type="datetime" :min-date="dataForm.minDate" 
                :max-date="dataForm.maxDate" :formatter="formatter" @cancel="dataForm.status = false" 
                @confirm="onCurrentConfirm" />
        </van-popup>
    </div>
</template>
<script>
/* eslint-disable */
// import MHeader from '@/components/MHeader' courseSwap
import MCalendar from '@/components/MCalendar'
import MEmpty from '@/components/MEmpty'
import { browser }  from '@/common/common'
import { getCourseSchedulesWithDate, 
    getCourseScheduleDateByMonth,
    classStartDateAdjust } from '@/api/teacher'
export default {
    name: 'periodadjust',
    components: { MCalendar, MEmpty },
    data() {
        return {
            dataForm: { // 时间下拉框
                status: false,
                minDate: new Date(2018, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date()
            },
            radioSelect: null,
            radioSelectList: [], // 选中的列表
            dataList: [],
            dataShow: true, // 是否有数据
            radioDisabled: true, // 今天或今天之前的数据禁用
        }
    },
    created() {
        
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        // this.getCourseMonth(toDay)
        document.title = '课程调整'
        let toDay = this.getFormartDate(new Date())
        this.getCourseDate(toDay)
    },
    methods: {
        onSelectDay(value) {
            if(new Date(this.getFormartDateIOS(new Date())) >= new Date(this.getFormartDateIOS(value))) {
                this.radioDisabled = true
            } else {
                this.radioDisabled = false
            }
            this.getCourseDate(this.getFormartDate(value))
        },
        onCheckRadio(item) { // 单选按钮选中
            if(this.radioDisabled) return
            this.radioSelect = item.id
            this.radioSelectList = item
        },
        getCourseMonth(month) {
            getCourseScheduleDateByMonth({ month: month, type: 'VIP' }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    result.data.forEach(item => {
                        let tempDate = new Date(item)
                        this.getMonthDay.push(tempDate.getDate())
                    })
                    this.isCalendar = true
                }
            })
        },
        getCourseDate(date) {
            getCourseSchedulesWithDate({ date: date, type: 'VIP' }).then(res => {
                let result = res.data
                if(result.code == 200 && result.data) {
                    this.dataList = result.data.rows
                    this.dataShow = result.data.rows.length > 0 ? true : false
                }
            })
        },
        onSubmit() {
            if(!this.radioSelect) {
                this.$toast('请选择需要交换的课程')
                return
            }
            let dataInfo = this.radioSelectList
            let classDate = dataInfo.classDate.split(' ')[0]
            let startTime = dataInfo.startClassTime.split(' ')[1]

            // 确认选择
            this.$router.push({
                path: '/PeriodChange',
                query: {
                    checkId: this.radioSelect,
                    classDate: classDate,
                    startTime: startTime,
                    name: dataInfo.name
                }
            })
        },
        getFormartDateIOS(date) {
            let checkDate = new Date(date)
            let checkDay = checkDate.getFullYear() + '/' + (checkDate.getMonth() + 1) + '/' + checkDate.getDate()
            return checkDay
        },
        getFormartDate(date) {
            let checkDate = new Date(date)
            let checkDay = checkDate.getFullYear() + '-' + (checkDate.getMonth() + 1) + '-' + checkDate.getDate()
            return checkDay
        },
        onDateChange() {
            if(!this.radioSelect) {
                this.$toast('请选择需要调整的课程')
                return
            }
            this.dataForm.status = true
        },
        onCurrentConfirm(value) { // 课时调整
            let selectDate = []
            this.dataList.forEach(item => {
                if(item.id == this.radioSelect) {
                    selectDate = item
                }
            })

            let startStr = '2019/12/18 ' + this.getDateInfo(selectDate.startClassTime),
                endStr = '2019/12/18 ' + this.getDateInfo(selectDate.endClassTime)
            let startDate = new Date(startStr),
                endDate = new Date(endStr)
            let m = parseInt(Math.abs(endDate.getTime() - startDate.getTime()) / 1000 / 60)
            let currentStartDate = new Date(value),
                currentEndDate = new Date(value)
            
            currentEndDate.setMinutes(currentStartDate.getMinutes() + m)
            classStartDateAdjust({
                actualTeacherId: selectDate.actualTeacherId,
                id: this.radioSelect,
                classDate: this.getFormartDate(currentStartDate),
                startClassTimeStr: this.getDateInfo(currentStartDate),
                endClassTimeStr: this.getDateInfo(currentEndDate)
            }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.$toast('调整成功')
                    setTimeout(() => {
                        if(browser().iPhone) {
                            window.webkit.messageHandlers.DAYA.postMessage(JSON.stringify({api: 'back'}))
                        } else if(browser().android) {
                            DAYA.postMessage(JSON.stringify({api: 'back'}))
                        } else {
                            this.$router.push('/business')
                        }
                    }, 500)
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        getDateInfo(value) {
            let tempValue = value
            if(typeof value !== 'object') {
                tempValue = value.replace(/-/ig, '/')
            }
            let d = new Date(tempValue)
            let hour = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours()
            let minute = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes()
            return hour + ':' + minute + ':00'
        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`;
            } else if (type === 'month') {
                return `${value}月`
            } else if (type === 'day') {
                return `${value}日`
            } else if (type === 'hour') {
                return `${value}时`
            } else if (type === 'minute') {
                return `${value}分`
            }
            return value;
        },
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.periodadjust {
    // min-height: 100vh;
    height: 100vh;
    position: relative;
    background-color: #F3F4F8;
    .container {
        min-height: calc(100vh - 50px);
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
    }
    .button-group {
        width: 100%;
        // position: absolute;
        // bottom: 0;
        // left: 0;
        // z-index: 99;
        .van-button {
            font-size: .16rem;
            width: 50%;
        }
        .van-button--primary {
            background: @mColor;
            border-color: @mColor;
        }
    }
}
/deep/.van-icon-underway-o {
    font-size: .18rem;
}
/deep/.van-cell__title {
    font-size: .16rem;
    color: @mFontColor;
}
/deep/.van-cell-group {
    margin-top: .05rem;
}
.title-content {
    flex: 1 auto;
    font-weight: bold;
    .van-cell__label {
        font-weight: 400;
        margin-top: .06rem;
        display: flex;
        align-items: center;
    }
    .van-icon-location {
        margin-right: .05rem;
    }
    
}
/deep/.van-cell__value, /deep/.van-cell__label {
    color: #444;
    font-size: .14rem;
    span {
        padding-right: .1rem;
    }
}

.input-cell {
    padding: .12rem .16rem .2rem;
    .van-radio {
        justify-content: flex-end;
    }
}
/deep/.van-radio__icon--disabled .van-icon {
    border-color: transparent;
    background: #fff;
}
// /deep/.van-radio__icon .van-icon {
    // border-color: transparent;
    // background: #fff;
// }
/deep/.van-radio__icon--checked .van-icon {
    background: @orangeColor;
    border-color: @orangeColor;
}
/deep/.icon {
    margin-top: .3rem;
}
</style>