<template>
    <div class="periodchange">
        <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">{{ 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="primary" @click="onChangeClass" size="large">确认交换</van-button>
            </div>
        </van-sticky>
        
    </div>
</template>
<script>
/* eslint-disable */
// import MHeader from '@/components/MHeader'
import MCalendar from '@/components/MCalendar'
import MEmpty from '@/components/MEmpty'
import { browser }  from '@/common/common'
import { getCourseSchedulesWithDate, 
    getCourseScheduleDateByMonth, courseSwap } from '@/api/teacher'
export default {
    name: 'periodchange',
    components: { MCalendar, MEmpty },
    data() {
        return {
            dataShow: true,
            dataList: [],
            radioSelect: null,
            radioSelectList: [], // 选中的列表
            radioDisabled: true, // 今天或今天之前的数据禁用
        }
    },
    created() {
        document.title = '课程交换'
        let toDay = this.getFormartDate(new Date())
        this.getCourseDate(toDay)
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        // this.getCourseMonth(toDay)
    },
    methods: {
        onSelectDay(value) {
            if(new Date(this.getFormartDate(new Date())) >= new Date(this.getFormartDate(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
        },
        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
                }
            })
        },
        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
                }
            })
        },
        getFormartDate(date) {
            let checkDate = new Date(date)
            let checkDay = checkDate.getFullYear() + '-' + (checkDate.getMonth() + 1) + '-' + checkDate.getDate()
            return checkDay
        },
        onChangeClass() {
            let item = this.radioSelectList,
                params = this.$route.query,
                classTime = item.classDate.split(' ')[0],
                startTime = item.startClassTime.split(' ')[1]
            let firstClass = params.classDate + ' ' + params.name + ' ' + params.startTime + '<br/>与'
            let lastClass = classTime + ' ' + item.name + ' ' + startTime + '<br/>上课时间互换'
            this.$dialog.confirm({
                message:  firstClass + lastClass
            }).then(() => {
                courseSwap({
                    courseScheduleId1: params.checkId,
                    courseScheduleId2: item.id
                }).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)
                    }
                })
            }).catch(() => {
                // on cancel
            });
        },
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.periodchange {
    // height: 100vh;
    // position: relative;
    // .container {
    //     // height: 100%;
    //     height: calc(100vh - 50px);
    //     overflow-y: auto;
    //     overflow-x: hidden;
    // }

    // .button-group {
    //     width: 100%;
    //     // position: absolute;
    //     // bottom: 0;
    //     // left: 0;
    //     // z-index: 99;
    //     .van-button--primary {
    //         background: @mColor;
    //         border: @mColor;
    //     }
    // }

    // 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: 100%;
        }
        .van-button--primary {
            background: @mColor;
            border-color: @mColor;
        }
    }
}
/deep/.van-cell__title {
    font-size: .16rem;
    color: @mFontColor;
}
/deep/.van-cell-group {
    margin-top: .05rem;
    // &:first-child {
    //     margin-top: .12rem;
    // }
}
.title-content {
    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: @tFontColor;
    span {
        padding-right: .1rem;
    }
}

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