<template>
    <div class="pages">
        <img src="../static/images/main/banner.png" height="121" width="414"/>
        <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#33CAF7" >
            <mu-tab v-for="(day,i) in weeks">{{day.name}} <br> <em>{{day.data}}</em></mu-tab>
        </mu-tabs>
        <div class="context">
                <span class="sum">
                    当日预约名额剩余
                    <em class="green" v-if="num > 0">{{num}}</em>
                    <em class="red" v-else>{{num}}</em>
                    人
                </span>
            <ul class="list">
                <li v-for="l in list"
                    :class="[{'greenLi':l.remain > 0},{'redLi':l.Status == 1},{'yellowLi':l.remain == 0},{'whiteLi':l.WxOrder == 0}]">
                    <div class="dotContainer">
                        <!--                        正常-->
                        <i class="dot" v-if="l.remain>0"></i>

                        <i class="cubes" v-if="l.Status==1"></i>
<!--                        已满-->
                        <i class="tri" v-if="l.remain==0"></i>
                        <!--                        不可约-->
                        <i class="x" v-if="l.WxOrder==0"></i>
                    </div>
                    <div class="title">
                        <h5>{{l.ClassName}}</h5>
                        <span>{{l.BeginStr}} - {{l.EndStr}}</span>
                    </div>
                    <div class="current">
                        <h5>剩余
                            <em class="green" v-if="l.remain > 0">{{l.remain}}</em>
                            <em class="red" v-else>{{l.remain}}</em>
                            人</h5>
                        <span>总名额 {{l.OrderToplimit}} 人</span>
                    </div>
                    <mu-button class="appointBtn greenBtn" v-if="l.remain > 0 && l.OrderId == 0" @click="appointNow(l)">预约</mu-button>
                    <mu-button class="appointBtn redBtn" v-if="l.remain == 0" @click="isFulled">已满</mu-button>
                    <mu-button class="appointBtn yellowBtn" v-if="l.OrderId != 0" @click="isAppointed(l)">已约</mu-button>
                    <mu-button class="appointBtn disableBtn" v-if="l.WxOrder == 0" @click="isDisable">不可约</mu-button>
                </li>
                <div class="tips" v-if="list == ''">
                    <p style="text-align: center">
                        暂无可预约的课程
                    </p>
                </div>
            </ul>
        </div>
        <bottomTab :curTab="thisTab"></bottomTab>
        <div class="doalog">
            <mu-dialog title="预约课程" width="600" max-width="80%" :esc-press-close="false"
                       :overlay-close="false" :open.sync="openAlert">
                <p>
                    是否预约 课程：{{dialog.ClassName}} ，时间：{{dialog.BeginStr}} - {{dialog.EndStr}}
                    <br>
                </p>
                <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
                <mu-button slot="actions" flat color="primary" @click="confirmAppoint">确定</mu-button>
            </mu-dialog>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import bottomTab from '../components/bottomTab'
    import {
        SchoolTimeTableListQuery,
        OderAddByVipUser,
        OderCancelByVipUser,
        testSelect,
        testTable,
    } from '../api/getApiRes.js'

    let qs = require('qs');
    import Global from '../Global.js'

    export default {
        data() {
            return {
                num: 0,
                thisTab: '预约课程',
                active: 0,
                sum: 0,
                openAlert: false,
                list: [],
                weeks: [],
                dialog: {
                    id: '',
                    name: '',
                    timeLong: '',
                },
            }
        },
        mounted() {
            this.getFurtherDays();
        },
        methods: {
            // 获取未来7天的
            getFurtherDays() {
                let now = new Date();
                let nowTime = now.getTime();
                let oneDayTime = 24 * 60 * 60 * 1000;
                let days = '';
                let item = [];
                let month = 0;
                let day = 0;
                for (let i = 0; i < 7; i++) {
                    days = new Date(nowTime + (i) * oneDayTime);//显示周日
                    month = days.getMonth() + 1;
                    day = days.getDate();
                    month = month < 10 ? '0' + month : month;
                    day = day < 10 ? '0' + day : day;
                    item = {
                        name: this.numberToWeek(days.getDay()),
                        data: days.getMonth() + 1 + '月' + days.getDate() + '日',
                        orderDate: new Date().getFullYear() + '-' + month + '-' + day
                    }
                    this.weeks.push(item);
                }
                this.getList();
            },
            numberToWeek(val) {
                switch (parseInt(val)) {
                    case 1:
                        return '星期一'
                        break;
                    case 2:
                        return '星期二'
                        break;
                    case 3:
                        return '星期三'
                        break;
                    case 4:
                        return '星期四'
                        break;
                    case 5:
                        return '星期五'
                        break;
                    case 6:
                        return '星期六'
                        break;
                    case 0:
                        return '星期天'
                        break;
                }
            },
            confirmAppoint() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    stdId : that.dialog.StdId
                };
                let postdata = qs.stringify(param);
                OderAddByVipUser(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.Toast('已成功预约', 'success');
                        that.openAlert = false;
                        that.getList();
                    } else {
                        that.Toast(json.Memo + ',错误码：' + json.Code);
                    }
                })
            },
            closeAlertDialog() {
                this.openAlert = false;
            },
            appointNow(row) {
                this.dialog = row;
                this.openAlert = true;
            },
            isFulled() {
                let that = this;
                that.$alert('当前课程已满，请选择其他课程或其他时间预约', '提示', {
                    okLabel: '知道了'
                }).then(() => {
                    that.getList();
                });
            },
            isAppointed(row) {
                let that = this;
                this.$confirm('是否取消前课程预约？', '提示', {
                    type: 'warning'
                }).then(({result}) => {
                    if (result) {
                        let param = {
                            token: localStorage.token,
                            orderId : row.OrderId,
                        };
                        let postdata = qs.stringify(param);
                        OderCancelByVipUser(postdata).then(res => {
                            let json = res;
                            if (json.Code == 0) {
                                that.Toast('当前课程已取消预约', 'success');
                                that.getList();
                            } else {
                                that.Toast(json.Memo + ',错误码：' + json.Code);
                            }
                        })
                    } else {
                        this.$toast.message('点击了取消');
                    }
                });
            },
            isDisable(row) {
                this.Toast('课程不可预约，请选择其他课程或其他时间预约', 'info');
            },
            getList() {
                let that = this;
                let curDay = this.weeks[this.active].orderDate;
                let param = {
                    token: localStorage.token,
                    orderDate: curDay,
                };
                let postdata = qs.stringify(param);
                SchoolTimeTableListQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.list = json.Rs;
                        that.num = 0;
                        if (that.list) {
                            // 计算剩余
                            that.list.map(function (item) {
                                item.remain = parseInt(item.OrderToplimit) - parseInt(item.OrderCount);
                                that.num =  that.num + item.remain
                            })
                        }
                        console.log(that.num);
                    } else {
                        that.Toast(json.Memo + ',错误码：' + json.Code);
                    }
                })
            },
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                //因为当钩子执行前，组件实例还没被创建
                // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
                if (to.name == 'appoint') {
                    vm.getList();
                }
            });
        },
        watch: {
            'active'() {
                this.getList();
            }
        },
        components: {
            bottomTab
        }
    }
</script>

<style scoped>
    .pages {
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    /*mu-header*/
    .mu-primary-color {
        line-height: 60px;
        height: 60px;
        background: url("../static/images/comm/headerBg.png") top center no-repeat;
        background-size: 100%;
    }

    /deep/ .mu-appbar-left {
        padding-top: 15px;
    }

    /deep/ .material-icons {
        color: #fff;
    }

    /deep/ .mu-appbar-title {
        text-align: center;
    }
    /deep/ .mu-tabs {
        display: flex;
        overflow-x: scroll;
        float: left;
    }
    /deep/ .mu-tab {
        width: 85px;
        min-width: 85px;
        float: left;
        height: 51px;
        margin-right: 6px;
    }

    /*/deep/ .mu-tab:nth-child(5) {*/
    /*    margin-right: 0px;*/
    /*}*/

    /deep/ .mu-tab-wrapper {
        height: 51px;
        background: #fff;
        color: #363636;
        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
        border-radius: 8px 8px 0px 0px;
        font-size: 14px;
    }

    /deep/ .mu-tab-active .mu-tab-wrapper {
        height: 56px;
        border-radius: 8px 8px 0px 0px;
        background: #33caf7;
        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
        color: #fff;
    }

    /deep/ .mu-tab-wrapper em {
        font-size: 12px;
    }

    .sum {
        width: 100%;
        height: 55px;
        line-height: 55px;
        background: #fff;
        font-family: "PingFang SC";
        font-weight: 300;
        font-size: 16px;
        text-align: center;
        color: #909090;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .green {
        color: #37CB00;
    }

    .red {
        color: #F8847F;
    }

    .list {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 8px;
        padding-bottom: 30px;
    }

    .list li {
        width: 100%;
        height: 70px;
        margin-bottom: 8px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .list .dotContainer {
        width: 50px;
        float: left;
        height: 60px;
        padding-left: 22px;
        padding-top: 10px;
    }

    .dotContainer .dot {
        width: 12px;
        height: 12px;
        background: #37cb00;
        border-radius: 250px;
        float: left;
    }

    .cubes {
        width: 12px;
        height: 12px;
        background: #f8847f;
        float: left;
    }

    .tri {
        width: 12px;
        height: 12px;
        background: url("../static/images/appoint/tri.png") top center no-repeat;
        background-size: 100% 100%;
        float: left;
    }

    .x {
        width: 12px;
        height: 12px;
        background: url("../static/images/appoint/x.png") top center no-repeat;
        background-size: 100% 100%;
        float: left;
    }


    .yellowLi {
        background: #FFFBED;
    }

    .redLi {
        background: #FFF7F7;
    }

    .greenLi {
        background: #F7FFF4;
    }

    .whiteLi {
        background: #fff;
    }

    .list li .title {
        width: 90px;
        height: 60px;
        float: left;
    }

    li .title h5 {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-weight: normal;
        font-size: 14px;
        text-align: left;
        color: #3b3b3b;
    }

    li .title span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-weight: normal;
        font-size: 12px;
        text-align: left;
        color: #909090;
    }

    .list li .current {
        width: 120px;
        height: 60px;
        float: left;
    }

    li .current h5 {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-family: "PingFang SC";
        font-weight: normal;
        font-size: 14px;
        text-align: left;
        color: #3b3b3b;
    }

    .current h5 em {
        font-family: "PingFang SC";
        font-weight: normal;
        font-size: 14px;
        text-align: left;
    }

    .current span {
        font-family: "PingFang SC";
        font-weight: normal;
        font-size: 12px;
        text-align: left;
        color: #909090;
    }

    .appointBtn {
        width: 79px;
        height: 37px;
        border-radius: 18.5px;
        background: #fff;
        float: right;
        font-family: "PingFang SC";
        font-weight: normal;
        font-size: 18px;
        margin-right: 2%;
    }

    .greenBtn {
        border: 1px solid #37cb00;
        color: #37cb00;
    }

    .redBtn {
        border: 1px solid #F8847F;
        color: #F8847F;
    }

    .yellowBtn {
        border: 1px solid #FFB43C;
        color: #fff;
        background: #FFB43C;
    }

    .disableBtn {
        border: 1px solid #C9C9C9;
        color: #C9C9C9;
    }

    /deep/ .mu-tabs-center {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    /deep/ .mu-tabs-center::-webkit-scrollbar {
        display: none;
    }

    /deep/ .mu-modal-inner {
        width: 90%;
        float: left;
    }
    /deep/ .mu-tab-link-highlight {
        display: none!important;
    }

</style>